pinokiod 3.48.0 → 3.49.0

package/kernel/environment.js

@@ -534,6 +534,12 @@ const init = async (options, kernel) => {
     // 1. if _ENVIRONMENT exists, create ENVIRONMENT by appending _ENVIRONMENT to ENVIRONMENT
     // 2. if _ENVIRONMENT doesn't exist, just write ENVIRONMENT
     // if _ENVIRONMENT exists, 
+
+    let root_exists = await kernel.exists(root)
+    if (!root_exists) {
+      await fs.promises.mkdir(root, { recursive: true }).catch((e) => { })
+    }
+
     let _environment = path.resolve(root, "_ENVIRONMENT")
     let _exists = await kernel.exists(_environment)
     if (options && options.no_inherit) {

package/package.json

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

package/server/index.js

@@ -5458,21 +5458,37 @@ class Server {
       } else {
         // if there is no menu, display all files
         let p = this.kernel.path("api", name)
-        let files = await fs.promises.readdir(p, { withFileTypes: true })
-        files = files.filter((file) => {
-          return file.name.endsWith(".json") || file.name.endsWith(".js")
-        }).filter((file) => {
-          return file.name !== "pinokio.js" && file.name !== "pinokio.json" && file.name !== "pinokio_meta.json"
-        })
-        config = {
-          title: name, 
-          menu: files.map((file) => {
-            return {
-              text: file.name,
-              href: file.name
-            }
+
+        let html_path = path.resolve(p, "index.html")
+        let html_exists = await this.kernel.exists(html_path)
+        if (html_exists) {
+          config = {
+            title: name, 
+            menu: [{
+              default: true,
+              icon: "fa-solid fa-link",
+              text: "index.html",
+              href: "index.html?raw=true",
+            }]
+          }
+        } else {
+          let files = await fs.promises.readdir(p, { withFileTypes: true })
+          files = files.filter((file) => {
+            return file.name.endsWith(".json") || file.name.endsWith(".js")
+          }).filter((file) => {
+            return file.name !== "pinokio.js" && file.name !== "pinokio.json" && file.name !== "pinokio_meta.json"
           })
+          config = {
+            title: name, 
+            menu: files.map((file) => {
+              return {
+                text: file.name,
+                href: file.name
+              }
+            })
+          }
         }
+
         let uri = this.kernel.path("api")
         await this.renderMenu(req, uri, name, config, [])
       }
@@ -5522,6 +5538,14 @@ class Server {
 //      res.json({ success: true })
 //    }))
 
+    this.app.get("/info/procs", ex(async (req, res) => {
+      console.time("Refresh")
+      await this.kernel.processes.refresh()
+      console.timeEnd("Refresh")
+      res.json({
+        info: this.kernel.processes.info
+      })
+    }))
 
     this.app.get("/info/system", ex(async (req,res) => {
       let current_peer_info = await this.kernel.peer.current_host()

package/server/public/common.js

@@ -308,14 +308,82 @@ const refreshParent = (e) => {
     window.parent.postMessage(e, "*")
   }
 }
-document.addEventListener("DOMContentLoaded", () => {
+let tippyInstances = [];
+
+function initTippy() {
   try {
-    tippy("[data-tippy-content]", {
-      theme: "pointer"
-    })
+    tippyInstances = tippy("[data-tippy-content]", {
+      theme: "pointer",
+      onCreate(instance) {
+        updateTippyPlacement(instance);
+      }
+    });
   } catch(e) {
-    console.log(e)
+    console.log(e);
   }
+}
+
+function updateTippyPlacement(instance) {
+  //const isMobileOrMinimized = window.innerWidth <= 800 || document.body.classList.contains('minimized');
+  const isMinimized = document.body.classList.contains('minimized');
+  const isHeaderElement = instance.reference.closest('header.navheader');
+  const isSidebarTab = instance.reference.closest('aside') && instance.reference.classList.contains('tab');
+  
+  //if (isHeaderElement && isMobileOrMinimized) {
+  if (isMinimized) {
+    console.log(">1")
+    instance.setProps({ placement: 'right' });
+  } else if (isSidebarTab) {
+    console.log(">2")
+    instance.setProps({ placement: 'left' });
+  } else {
+    console.log(">3")
+    instance.setProps({ placement: 'top' });
+  }
+}
+
+function updateAllTooltips() {
+  tippyInstances.forEach(updateTippyPlacement);
+}
+
+function setTabTooltips() {
+  // Set data-tippy-content for sidebar tabs based on their .caption text
+  const tabs = document.querySelectorAll('aside .tab');
+  tabs.forEach(tab => {
+    const caption = tab.querySelector('.caption');
+    if (caption && caption.textContent.trim()) {
+      tab.setAttribute('data-tippy-content', caption.textContent.trim());
+    }
+  });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  setTabTooltips();
+  initTippy();
+
+  if (window.windowStorage) {
+    let frame_key = window.frameElement?.name || "";
+    let window_mode = windowStorage.getItem(frame_key + ":window_mode")
+    if (window_mode) {
+      if (window_mode === "minimized") {
+        document.body.classList.add("minimized")
+        updateAllTooltips()
+      }
+    }
+  }
+  
+  // Listen for window resize
+  window.addEventListener('resize', updateAllTooltips);
+  
+  // Listen for body class changes (for minimize/maximize)
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.attributeName === 'class' && mutation.target === document.body) {
+        updateAllTooltips();
+      }
+    });
+  });
+  observer.observe(document.body, { attributes: true });
   
   if (document.querySelector("#screenshot")) {
     document.querySelector("#screenshot").addEventListener("click", (e) => {
@@ -415,9 +483,9 @@ document.addEventListener("DOMContentLoaded", () => {
 
   if (document.querySelector(".urlbar")) {
     document.querySelector(".urlbar").addEventListener("submit", (e) => {
+      debugger
       e.preventDefault()
       e.stopPropagation()
-      debugger
       location.href = "/container?url=" + e.target.querySelector("input[type=url]").value
     })
   }
@@ -430,7 +498,6 @@ document.addEventListener("DOMContentLoaded", () => {
       fetch("/pinokio/log", {
         method: "post",
       }).then((res) => {
-        console.log("RES", res)
         let btn = document.querySelector("#genlog")
         let btn2 = document.querySelector("#downloadlogs")
         btn2.classList.remove("hidden") 
@@ -440,9 +507,19 @@ document.addEventListener("DOMContentLoaded", () => {
       })
     })
   }
+  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")
+      }
+    })
+  }
   if (document.querySelector("#close-window")) {
     const isInIframe = window.self !== window.top;
-    console.log("isInIframe", isInIframe)
     if (isInIframe) {
       document.querySelector("#close-window").classList.remove("hidden")
       document.querySelector("#close-window").addEventListener("click", (e) => {

package/server/public/style.css

@@ -1166,6 +1166,8 @@ body.dark .memory {
 .memory-item {
 }
 main {
+  min-width: 0;
+  flex-grow: 1;
 }
 main h1 {
   margin: 0;
@@ -1191,6 +1193,7 @@ body.dark .offline .indicator {
 .container {
   flex-grow: 1;
   box-sizing: border-box;
+  min-width: 0;
   /*
   padding: 0 20px;
   */
@@ -2136,6 +2139,8 @@ footer.status {
   padding: 5px 5px 10px;
 }
 */
+#close-window {
+}
 #error-screen .btn {
   font-size: 14px;
   padding: 15px 30px;
@@ -2337,21 +2342,6 @@ body.dark .mode-selector .btn2.selected {
   border-radius: 5px;
 }
 
-.urlbar {
-  flex-grow: 1;
-  margin: 0 20px;
-}
-body.dark .urlbar input[type=url] {
-  background: rgba(255,255,255,0.1);
-  color: white;
-}
-.urlbar input[type=url] {
-  background: rgba(0,0,0,0.05);
-  border-radius: 6px;
-  border: none;
-  padding: 10px;
-  width: 100%;
-}
 
 
 
@@ -2378,9 +2368,6 @@ body.minimized header {
   overflow: auto;
   flex-shrink: 0;
 }
-body.minimized header h1 .urlbar {
-  display: none; 
-}
 body.minimized header h1 .btn2 {
   padding: 10px;
   width: 100%;
@@ -2413,16 +2400,22 @@ body.minimized .appcanvas, body.minimized main {
 body.minimized .appcanvas {
   padding-top: 20px;
 }
+body.minimized main {
+  padding-top: 10px;
+}
 body.minimized main .container {
   margin-left: 0;
 }
 body.minimized .app-icon {
   display: block; 
 }
+/*
 body.minimized aside {
   display: none;
 }
+*/
 
+/*
 @media only screen and (max-width: 800px) {
   header .dropdown-content {
     position: relative;
@@ -2451,9 +2444,6 @@ body.minimized aside {
     overflow: auto;
     display: block;
   }
-  header h1 .urlbar {
-    display: none; 
-  }
   .mode-selector {
     flex-direction: column;
     padding: 0;
@@ -2470,9 +2460,9 @@ body.minimized aside {
   .mode-selector .caption {
     display: none;
   }
-  /*
-  .appcanvas, main {
-  */
+  main {
+    padding-top: 10px;
+  }
   .appcanvas {
     padding-top: 20px;
   }
@@ -2482,7 +2472,5 @@ body.minimized aside {
   .app-icon {
     display: block;
   }
-  aside {
-    display: none;
-  }
 }
+*/

package/server/public/urldropdown.css

@@ -0,0 +1,174 @@
+.url-input-container {
+  position: relative;
+  width: 100%;
+}
+.url-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid rgba(255,255,255,0.1);
+  border-top: none;
+  border-radius: 0 0 5px 5px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 1000;
+  display: none;
+}
+body.dark .url-dropdown {
+  background: rgb(27, 28, 29);
+  /*
+  border-color: #4a5568;
+  */
+  box-shadow: 0 2px 8px rgba(255,255,255,0.1);
+}
+.url-dropdown-item {
+  padding: 12px 16px;
+  cursor: pointer;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+body.dark .url-dropdown-item {
+  border-bottom-color: rgba(255,255,255,0.1);
+}
+.url-dropdown-item:hover {
+  background: #f7fafc;
+}
+body.dark .url-dropdown-item:hover {
+  background: rgba(255,255,255,0.04);
+}
+.url-dropdown-item:last-child {
+  border-bottom: none;
+}
+.url-dropdown-name {
+  font-weight: bold;
+  color: #2d3748;
+  font-size: 14px;
+}
+body.dark .url-dropdown-name {
+  color: #e2e8f0;
+}
+.url-dropdown-url {
+  color: #718096;
+  font-size: 12px;
+}
+body.dark .url-dropdown-url {
+  color: #a0aec0;
+}
+.url-dropdown-loading {
+  padding: 12px 16px;
+  font-size: 14px;
+}
+body.dark .url-dropdown-loading {
+  color: #a0aec0;
+}
+.url-dropdown-empty {
+  padding: 12px 16px;
+  text-align: center;
+  color: #718096;
+  font-style: italic;
+}
+body.dark .url-dropdown-empty {
+  color: #a0aec0;
+}
+.urlbar {
+  flex-grow: 1;
+  margin: 0 20px;
+}
+body.dark .mobile-link-button {
+  background: rgba(255,255,255,0.1);
+  padding: 5px;
+}
+body.dark .urlbar input[type=url] {
+  background: rgba(255,255,255,0.1);
+  color: white;
+}
+body.minimized .mobile-link-button {
+  border-radius: 0;
+}
+.mobile-link-button {
+  background: rgba(0,0,0,0.05);
+  padding: 5px;
+  flex-grow: 1;
+}
+.urlbar input[type=url] {
+  background: rgba(0,0,0,0.05);
+  border-radius: 6px;
+  border: none;
+  padding: 10px;
+  width: 100%;
+}
+body.minimized header h1 .urlbar {
+  display: none; 
+}
+body.minimized header h1 .mobile-link-button {
+  display: block; 
+}
+@media only screen and (max-width: 800px) {
+  header h1 .urlbar {
+    display: none; 
+  }
+  header h1 .mobile-link-button {
+    display: block; 
+  }
+}
+.mobile-link-button {
+  display: none;
+}
+.url-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 10000;
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+.url-modal-content {
+  background: white;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  width: 90%;
+  max-width: 500px;
+  position: relative;
+}
+body.dark .url-modal-content {
+  background: rgb(27, 28, 29);
+}
+.url-modal-close {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  font-size: 24px;
+  color: #aaa;
+  cursor: pointer;
+  user-select: none;
+}
+.url-modal-close:hover {
+  color: #000;
+}
+body.dark .url-modal-close:hover {
+  color: #fff;
+}
+.url-modal-input {
+  width: 100%;
+  padding: 15px;
+  font-size: 16px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  box-sizing: border-box;
+  background: white;
+}
+body.dark .url-modal-input {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+  color: white;
+}