pinokiod 3.47.0 → 3.49.0

package/server/public/urldropdown.js

@@ -0,0 +1,396 @@
+/**
+ * URL Dropdown functionality for process selection
+ * Fetches running processes from /info/procs API and displays them in a dropdown
+ */
+
+function initUrlDropdown(config = {}) {
+  const urlInput = document.querySelector('.urlbar input[type="url"]');
+  const dropdown = document.getElementById('url-dropdown');
+  const mobileButton = document.getElementById('mobile-link-button');
+  
+  if (!urlInput || !dropdown) {
+    console.warn('URL dropdown elements not found');
+    return;
+  }
+
+  // Configuration options
+  const options = {
+    clearBehavior: config.clearBehavior || 'empty', // 'empty' or 'restore'
+    defaultValue: config.defaultValue || '',
+    apiEndpoint: config.apiEndpoint || '/info/procs',
+    ...config
+  };
+
+  let isDropdownVisible = false;
+  let allProcesses = []; // Store all processes for filtering
+  let filteredProcesses = []; // Store currently filtered processes
+
+  // Initialize input field state based on clear behavior
+  initializeInputValue();
+  
+  // Handle page navigation events
+  window.addEventListener('pageshow', function(event) {
+    if (event.persisted || window.performance?.navigation?.type === 2) {
+      initializeInputValue();
+    }
+  });
+
+  // Event listeners
+  urlInput.addEventListener('focus', function() {
+    // Auto-select text for restore behavior to make filtering easier
+    if (options.clearBehavior === 'restore' && urlInput.value) {
+      // Use setTimeout to ensure the focus event completes first
+      setTimeout(() => {
+        urlInput.select();
+      }, 0);
+    }
+    showDropdown();
+  });
+  urlInput.addEventListener('input', handleInputChange);
+  
+  // Hide dropdown when clicking outside
+  document.addEventListener('click', function(e) {
+    if (!e.target.closest('.url-input-container')) {
+      hideDropdown();
+    }
+  });
+
+  function initializeInputValue() {
+    if (options.clearBehavior === 'empty') {
+      urlInput.value = '';
+    } else if (options.clearBehavior === 'restore') {
+      const originalValue = urlInput.getAttribute('value') || options.defaultValue;
+      if (urlInput.value !== originalValue) {
+        urlInput.value = originalValue;
+      }
+    }
+  }
+
+  function showDropdown() {
+    if (isDropdownVisible && allProcesses.length > 0) {
+      // If dropdown is already visible and we have data, show all initially
+      showAllProcesses();
+      return;
+    }
+    
+    isDropdownVisible = true;
+    dropdown.style.display = 'block';
+    
+    // If we already have processes data, show all initially
+    if (allProcesses.length > 0) {
+      showAllProcesses();
+      return;
+    }
+    
+    // Otherwise, show loading and fetch data
+    dropdown.innerHTML = '<div class="url-dropdown-loading">Loading running processes...</div>';
+    
+    // Fetch processes from API
+    fetch(options.apiEndpoint)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        return response.json();
+      })
+      .then(data => {
+        allProcesses = data.info || [];
+        showAllProcesses(); // Show all processes when dropdown first opens
+      })
+      .catch(error => {
+        console.error('Failed to fetch processes:', error);
+        dropdown.innerHTML = '<div class="url-dropdown-empty">Failed to load processes</div>';
+        allProcesses = [];
+      });
+  }
+
+  function showAllProcesses() {
+    filteredProcesses = allProcesses;
+    populateDropdown(filteredProcesses);
+  }
+
+  function handleInputChange() {
+    if (!isDropdownVisible) return;
+    
+    const query = urlInput.value.toLowerCase().trim();
+    
+    // Special case: if text is selected (user just focused), don't filter yet
+    if (urlInput.selectionStart === 0 && urlInput.selectionEnd === urlInput.value.length) {
+      // Text is fully selected, show all processes until user starts typing
+      filteredProcesses = allProcesses;
+    } else if (!query) {
+      // No query, show all processes
+      filteredProcesses = allProcesses;
+    } else {
+      // Filter processes based on name and URL
+      filteredProcesses = allProcesses.filter(process => {
+        const url = `http://${process.ip}`;
+        const name = process.name.toLowerCase();
+        const urlLower = url.toLowerCase();
+        
+        return name.includes(query) || urlLower.includes(query);
+      });
+    }
+    
+    populateDropdown(filteredProcesses);
+  }
+
+  function hideDropdown() {
+    isDropdownVisible = false;
+    dropdown.style.display = 'none';
+  }
+
+  function populateDropdown(processes) {
+    if (processes.length === 0) {
+      const query = urlInput.value.toLowerCase().trim();
+      const message = query 
+        ? `No processes match "${query}"` 
+        : 'No running processes found';
+      dropdown.innerHTML = `<div class="url-dropdown-empty">${message}</div>`;
+      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('');
+
+    dropdown.innerHTML = items;
+
+    // Add click handlers to dropdown items
+    dropdown.querySelectorAll('.url-dropdown-item').forEach(item => {
+      item.addEventListener('click', function() {
+        const url = this.getAttribute('data-url');
+        urlInput.value = url;
+        hideDropdown();
+        // Submit the form
+        urlInput.closest('form').dispatchEvent(new Event('submit'));
+      });
+    });
+  }
+
+  // Utility function to escape HTML
+  function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  // Mobile modal functionality
+  function createMobileModal() {
+    const overlay = document.createElement('div');
+    overlay.className = 'url-modal-overlay';
+    overlay.id = 'url-modal-overlay';
+    
+    const content = document.createElement('div');
+    content.className = 'url-modal-content';
+    
+    const closeButton = document.createElement('span');
+    closeButton.className = 'url-modal-close';
+    closeButton.innerHTML = '&times;';
+    closeButton.onclick = closeMobileModal;
+    
+    const modalInput = document.createElement('input');
+    modalInput.type = 'url';
+    modalInput.className = 'url-modal-input';
+    modalInput.placeholder = 'enter a local url';
+    
+    const modalDropdown = document.createElement('div');
+    modalDropdown.className = 'url-dropdown';
+    modalDropdown.id = 'url-modal-dropdown';
+    modalDropdown.style.position = 'relative';
+    modalDropdown.style.top = '0';
+    modalDropdown.style.left = '0';
+    modalDropdown.style.right = '0';
+    modalDropdown.style.marginTop = '10px';
+    
+    content.appendChild(closeButton);
+    content.appendChild(modalInput);
+    content.appendChild(modalDropdown);
+    overlay.appendChild(content);
+    
+    return { overlay, input: modalInput, dropdown: modalDropdown };
+  }
+  
+  function showMobileModal() {
+    let modal = document.getElementById('url-modal-overlay');
+    if (!modal) {
+      const { overlay, input: modalInput, dropdown: modalDropdown } = createMobileModal();
+      modal = overlay;
+      document.body.appendChild(modal);
+      
+      // Initialize dropdown functionality for modal
+      modalInput.addEventListener('focus', function() {
+        if (options.clearBehavior === 'restore' && modalInput.value) {
+          setTimeout(() => modalInput.select(), 0);
+        }
+        showModalDropdown(modalDropdown);
+      });
+      modalInput.addEventListener('input', function() {
+        handleModalInputChange(modalInput, modalDropdown);
+      });
+      
+      // Close modal when clicking outside content
+      modal.addEventListener('click', function(e) {
+        if (e.target === modal) {
+          closeMobileModal();
+        }
+      });
+      
+      // Handle form submission
+      modalInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          if (modalInput.value) {
+            urlInput.value = modalInput.value;
+            urlInput.closest('form').dispatchEvent(new Event('submit'));
+            closeMobileModal();
+          }
+        }
+      });
+    }
+    
+    modal.style.display = 'flex';
+    const modalInput = modal.querySelector('.url-modal-input');
+    
+    // Set initial value based on config
+    if (options.clearBehavior === 'restore') {
+      modalInput.value = urlInput.value || options.defaultValue || '';
+    } else {
+      modalInput.value = '';
+    }
+    
+    setTimeout(() => modalInput.focus(), 100);
+  }
+  
+  function closeMobileModal() {
+    const modal = document.getElementById('url-modal-overlay');
+    if (modal) {
+      modal.style.display = 'none';
+    }
+  }
+  
+  function showModalDropdown(modalDropdown) {
+    modalDropdown.style.display = 'block';
+    
+    if (allProcesses.length > 0) {
+      populateModalDropdown(allProcesses, modalDropdown);
+      return;
+    }
+    
+    modalDropdown.innerHTML = '<div class="url-dropdown-loading">Loading running processes...</div>';
+    
+    fetch(options.apiEndpoint)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        return response.json();
+      })
+      .then(data => {
+        allProcesses = data.info || [];
+        populateModalDropdown(allProcesses, modalDropdown);
+      })
+      .catch(error => {
+        console.error('Failed to fetch processes:', error);
+        modalDropdown.innerHTML = '<div class="url-dropdown-empty">Failed to load processes</div>';
+      });
+  }
+  
+  function handleModalInputChange(modalInput, modalDropdown) {
+    const query = modalInput.value.toLowerCase().trim();
+    let filtered = allProcesses;
+    
+    if (modalInput.selectionStart === 0 && modalInput.selectionEnd === modalInput.value.length) {
+      filtered = allProcesses;
+    } else if (query) {
+      filtered = allProcesses.filter(process => {
+        const url = `http://${process.ip}`;
+        const name = process.name.toLowerCase();
+        const urlLower = url.toLowerCase();
+        return name.includes(query) || urlLower.includes(query);
+      });
+    }
+    
+    populateModalDropdown(filtered, modalDropdown);
+  }
+  
+  function populateModalDropdown(processes, modalDropdown) {
+    const modalInput = modalDropdown.parentElement.querySelector('.url-modal-input');
+    
+    if (processes.length === 0) {
+      const query = modalInput.value.toLowerCase().trim();
+      const message = query ? `No processes match "${query}"` : 'No running processes found';
+      modalDropdown.innerHTML = `<div class="url-dropdown-empty">${message}</div>`;
+      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('');
+
+    modalDropdown.innerHTML = items;
+
+    modalDropdown.querySelectorAll('.url-dropdown-item').forEach(item => {
+      item.addEventListener('click', function() {
+        const url = this.getAttribute('data-url');
+        modalInput.value = url;
+        urlInput.value = url;
+        urlInput.closest('form').dispatchEvent(new Event('submit'));
+        closeMobileModal();
+      });
+    });
+  }
+  
+  // Set up mobile button click handler
+  if (mobileButton) {
+    mobileButton.addEventListener('click', showMobileModal);
+  }
+
+  // Public API
+  return {
+    show: showDropdown,
+    hide: hideDropdown,
+    showAll: showAllProcesses,
+    showMobileModal: showMobileModal,
+    closeMobileModal: closeMobileModal,
+    refresh: function() {
+      allProcesses = []; // Clear cache to force refetch
+      if (isDropdownVisible) {
+        showDropdown();
+      }
+    },
+    filter: handleInputChange,
+    destroy: function() {
+      // Remove the focus event listener (need to store reference)
+      urlInput.removeEventListener('input', handleInputChange);
+      if (mobileButton) {
+        mobileButton.removeEventListener('click', showMobileModal);
+      }
+      hideDropdown();
+      closeMobileModal();
+      allProcesses = [];
+      filteredProcesses = [];
+    }
+  };
+}
+
+// Auto-initialize if DOM is already loaded, otherwise wait for it
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', function() {
+    // Will be initialized by individual templates with their specific config
+  });
+} else {
+  // DOM is already loaded, templates can initialize immediately
+}

package/server/public/window_storage.js

@@ -0,0 +1,30 @@
+const WINDOW_ID = (() => {
+  // Try to get existing window ID or create a new one
+  let id = sessionStorage.getItem('__window_id');
+  if (!id) {
+    id = Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+    try { sessionStorage.setItem('__window_id', id); } catch (_) {}
+  }
+  return id;
+})();
+
+// Window-specific storage wrapper
+window.windowStorage = {
+  setItem: (key, value) => {
+    try { 
+      sessionStorage.setItem(`${WINDOW_ID}:${key}`, value); 
+    } catch (_) {}
+  },
+  removeItem: (key, value) => {
+    try { 
+      sessionStorage.removeItem(`${WINDOW_ID}:${key}`)
+    } catch (_) {}
+  },
+  getItem: (key) => {
+    try { 
+      return sessionStorage.getItem(`${WINDOW_ID}:${key}`); 
+    } catch (_) { 
+      return null; 
+    }
+  }
+};

package/server/views/app.ejs

@@ -1663,13 +1663,30 @@ body.dark .pinokio-git-commit-hash:hover {
 body.minimized {
   flex-direction: row !important;
 }
+body.minimized aside {
+  display: none;
+}
+@media only screen and (max-width: 800px) {
+  .mode-selector .btn2 {
+    width: unset;
+  }
+  .mode-selector .btn2 .caption {
+    display: none;
+  }
+}
+/*
 @media only screen and (max-width: 800px) {
   body {
     flex-direction: row !important;
   }
+  aside {
+    display: none;
+  }
 }
+*/
 </style>
 <link href="/app.css" rel="stylesheet"/>
+<script src="/window_storage.js"></script>
 <script src="/timeago.min.js"></script>
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
@@ -2003,24 +2020,6 @@ body.minimized {
     document.querySelector("main").appendChild(frame)
     loaded[name] = true
   }
-  /*
-  if (document.body.classList.contains("minimized")) {
-    document.querySelector("#collapse i").className = "fa-solid fa-compress"
-  } else {
-    document.querySelector("#collapse i").className = "fa-solid fa-expand"
-  }
-  */
-  document.querySelector("#collapse").addEventListener("click", (e) => {
-    document.body.classList.toggle("minimized")
-    let frame_key = window.frameElement?.name || "";
-    if (document.body.classList.contains("minimized")) {
-//      document.querySelector("#collapse i").className = "fa-solid fa-compress"
-      sessionStorage.setItem(frame_key + ":window_mode", "minimized")
-    } else {
-//      document.querySelector("#collapse i").className = "fa-solid fa-expand"
-      sessionStorage.setItem(frame_key + ":window_mode", "full")
-    }
-  })
   document.addEventListener("click", (e) => {
     interacted = true
   })
@@ -2256,7 +2255,7 @@ body.minimized {
         <% if (type !== "run") { %>
           let _url = new URL(target.href)
           let frame_key = window.frameElement?.name || "";
-          sessionStorage.setItem(frame_key + ":url", _url.pathname + _url.search + _url.hash)
+          windowStorage.setItem(frame_key + ":url", _url.pathname + _url.search + _url.hash)
         <% } %>
 
         // hide all frames
@@ -3223,7 +3222,7 @@ body.minimized {
   refresh_du("logs")
   let frame_key = window.frameElement?.name || "";
 
-  let selection_url = sessionStorage.getItem(frame_key + ":url")
+  let selection_url = windowStorage.getItem(frame_key + ":url")
   console.log({ frame_key, selection_url })
   let selection
   if (selection_url) {
@@ -3237,13 +3236,6 @@ body.minimized {
       selection.click()
 //    }, 100)
   }
-  let window_mode = sessionStorage.getItem(frame_key + ":window_mode")
-  console.log({ window_mode })
-  if (window_mode) {
-    if (window_mode === "minimized") {
-      document.body.classList.add("minimized")
-    }
-  }
   <% if (type !== 'run') { %>
     fetch("<%=repos%>").then((res) => {
       return res.text()

package/server/views/columns.ejs

@@ -54,6 +54,7 @@ body.resizing {
 .gutter:hover::before, body.resizing .gutter::before { background: #9e9e9e; }
 .gutter:focus { outline: none; box-shadow: inset 0 0 0 2px #90caf9; }
 </style>
+<script src="/window_storage.js"></script>
 </head>
 <body class='<%=theme%>'>
 <iframe id='col0' data-src="<%=src%>"></iframe>
@@ -103,7 +104,7 @@ body.resizing {
       const total = computeTotal();
       if (total > 0) {
         const ratio = clamp(leftPx / total, 0, 1);
-        try { sessionStorage.setItem(splitKey, String(ratio)); } catch (_) {}
+        windowStorage.setItem(splitKey, String(ratio));
       }
     }
 
@@ -118,7 +119,7 @@ body.resizing {
     // --- Per-window URL persistence for each pane ---
     function restorePaneURL(pane, key) {
       try {
-        const saved = sessionStorage.getItem(key);
+        const saved = windowStorage.getItem(key);
         const fallback = pane.getAttribute('data-src') || pane.getAttribute('src') || '';
         const target = (saved && typeof saved === 'string') ? saved : fallback;
         if (target && pane.src !== target) pane.src = target;
@@ -130,7 +131,7 @@ body.resizing {
         const cw = pane.contentWindow;
         if (!cw) return;
         const notify = () => {
-          try { sessionStorage.setItem(key, cw.location.href); } catch (_) {}
+          windowStorage.setItem(key, cw.location.href);
         };
         // Hook SPA navigations
         const _ps = cw.history.pushState;
@@ -143,7 +144,7 @@ body.resizing {
         else notify();
       } catch (err) {
         // Cross-origin: fall back to saving src only
-        try { sessionStorage.setItem(key, pane.src); } catch (_) {}
+        windowStorage.setItem(key, pane.src);
       }
     }
     function onPaneLoadFactory(pane, key) {
@@ -170,8 +171,10 @@ body.resizing {
     let overlay = null;
 
     function refreshLayout (splitKey) {
-      let val = sessionStorage.getItem(splitKey)
+      console.log("refreshLayout", splitKey)
+      let val = windowStorage.getItem(splitKey)
       let id = splitKey.replace("splitRatio:", "")
+      console.log({ id, val })
       if (val === "1" || val === "0") {
         if (val === "1") {
           id_to_hide = id + ".1"
@@ -180,8 +183,28 @@ body.resizing {
         }
         const el = document.querySelector(`iframe[name='${id_to_hide}']`)
         el.remove()
-        document.body.className = "single"
-        document.querySelector("#gutter").remove()
+        if (document.querySelector("#gutter")) {
+          document.querySelector("#gutter").remove()
+        }
+        let existing_iframe = document.querySelector("iframe")
+        console.log("1")
+        if (existing_iframe) {
+          console.log("2")
+          document.body.className = "single"
+        } else {
+          console.log("3")
+          if (window.parent) {
+            console.log("4")
+            // if all child iframes have been removed, remove self
+            window.parent.postMessage({
+              e: "close"
+            }, "*")
+          } else {
+            console.log("5")
+            // if this is the top window, everything has been removed, so just redirect to home
+            location.href = "/"
+          }
+        }
       }
     }
 
@@ -262,7 +285,7 @@ body.resizing {
 
     // Initialize from saved ratio if available and set ARIA
     try {
-      const saved = parseFloat(sessionStorage.getItem(splitKey) || '');
+      const saved = parseFloat(windowStorage.getItem(splitKey) || '');
       console.log({ saved })
       if (!Number.isNaN(saved) && saved > 0 && saved < 1) {
         console.log("> 1")
@@ -280,7 +303,7 @@ body.resizing {
     // Re-apply on window resize to keep ratio
     window.addEventListener('resize', () => {
       try {
-        const saved = parseFloat(sessionStorage.getItem(splitKey) || '');
+        const saved = parseFloat(windowStorage.getItem(splitKey) || '');
         if (!Number.isNaN(saved) && saved > 0 && saved < 1) {
           applyFromRatio(saved);
         } else {
@@ -299,11 +322,17 @@ body.resizing {
         
         let sourceFrameId = null;
         
-        if (event.source === col0.contentWindow) {
+        if (col0 && event.source === col0.contentWindow) {
           sourceFrameId = 'col0';
-        } else if (event.source === col1.contentWindow) {
+        } else if (col1 && event.source === col1.contentWindow) {
           sourceFrameId = 'col1';
         }
+
+        if (!sourceFrameId) {
+          windowStorage.removeItem(splitKey)
+          location.href = "/"
+          return
+        }
         
         console.log('Message received from iframe:', sourceFrameId);
         
@@ -312,19 +341,11 @@ body.resizing {
         console.log({ splitKey })
         for (let iframe of iframes) {
           if (event.source === iframe.contentWindow) {
-//            const splitKey = `splitRatio:${iframe.name}`
-//            console.log({ splitKey })
             if (iframe.id === "col0") {
-              // hide col0 => ratio: 0
-//              col0.src = "about:blank"
-//              col0.style.display = "none"
-              try { sessionStorage.setItem(splitKey, "0"); } catch (_) {}
+              windowStorage.setItem(splitKey, "0");
               refreshLayout(splitKey)
             } else if (iframe.id === "col1") {
-              // hide col1 => ratio: 1
-//              col1.src = "about:blank"
-//              col1.style.display = "none"
-              try { sessionStorage.setItem(splitKey, "1"); } catch (_) { console.log("<<< ", _ )}
+              windowStorage.setItem(splitKey, "1");
               refreshLayout(splitKey)
             }
             break;
@@ -333,6 +354,17 @@ body.resizing {
       }
     })
   })();
+  if (document.querySelector("#collapse") && window.windowStorage) {
+    document.querySelector("#collapse").addEventListener("click", (e) => {
+      document.body.classList.toggle("minimized")
+      let frame_key = window.frameElement?.name || "";
+      if (document.body.classList.contains("minimized")) {
+        windowStorage.setItem(frame_key + ":window_mode", "minimized")
+      } else {
+        windowStorage.setItem(frame_key + ":window_mode", "full")
+      }
+    })
+  }
   </script>
 </body>
 </html>