pinokiod 3.41.0 → 3.42.0

package/server/views/install.ejs

@@ -351,7 +351,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   })
   setInterval(async () => {
     try {
-      let res = await fetch("/check").then((res) => {
+      let res = await fetch("/bin_ready").then((res) => {
         return res.json()
       })
       if (res.success) {

package/server/views/mini.ejs

@@ -730,6 +730,8 @@ body.dark .appcanvas {
 }
 </style>
 <link href="/app.css" rel="stylesheet"/>
+<script src="/popper.min.js"></script>
+<script src="/tippy-bundle.umd.min.js"></script>
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
 <script src="/nav.js"></script>
@@ -754,26 +756,54 @@ body.dark .appcanvas {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
-<button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div><div>Prev</div></button>
-<button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div><div>Next</div></button>
-<button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div><div>Refresh</div></button>
+<button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
+<button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
+<button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
+<button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
 <div class='flexible filler'></div>
-<div class='url-bar'>
-  <% if (current_urls.https) { %>
-    <a class='https-url' target="_blank" href="<%=current_urls.https%>"><i class="fa-solid fa-square-arrow-up-right"></i> <%=current_urls.https%></a>
-  <% } %>
-  <% if (current_urls.http) { %>
-    <a class='http-url' target="_blank" href="<%=current_urls.http%>"><i class="fa-solid fa-square-arrow-up-right"></i> <%=current_urls.http%></a>
-  <% } %>
+<a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+  <div><i class="fa-solid fa-table-columns"></i></div>
+</a>
+<a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
+  <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
+</a>
+<div class="dropdown btn2">
+  <button class='btn2' id='window-management'>
+    <div><i class="fa-solid fa-plus"></i></div>
+  </button>
+  <div class="dropdown-content" id="dropdown-content">
+    <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+      <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+    </button>
+    <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+      <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+    </button>
+  </div>
 </div>
-<a href="/connect" class='btn2'><div><i class="fa-solid fa-circle-user"></i></div><div>Connect</div></a>
-<div class='nav-btns'>
-  <a class='btn2' href="<%=portal%>" target="_blank"><div><i class="fa-solid fa-question"></i></div><div>Help</div></a>
-  <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></button>
-  <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><div><i class="fa-solid fa-download"></i></div><div>Download logs</div></a>
-  <a class='btn2' href="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
-  <button id='new-window' title='open a new window' class='btn2' data-agent="<%=agent%>"><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
+<!--
+<div class="dropdown btn2">
+  <button class='btn2' id='window-management'>
+    <div><i class="fa-regular fa-window-restore"></i></div>
+  </button>
+  <div class="dropdown-content" id="dropdown-content">
+    <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+      <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+    </button>
+    <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+      <div><i class="fa-solid fa-table-columns"></i><div>split columns</div></div>
+    </a>
+    <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
+      <div><i class="fa-solid fa-table-columns fa-rotate-270"></i><div>split rows</div></div>
+    </a>
+    <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+      <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+    </button>
+  </div>
 </div>
+-->
+<button class='btn2 hidden' id='close-window' data-tippy-content='close this section'>
+  <div><i class="fa-solid fa-xmark"></i></div>
+</button>
 </h1>
 </header>
 <div class='appcanvas'>
@@ -1453,7 +1483,6 @@ body.dark .appcanvas {
 
   })
   const refresh = async (silent, options) => {
-    debugger
     console.log("REFRESH")
     const dynamic = await fetch("<%=dynamic%>").then((res) => {
       return res.text()

package/server/views/net.ejs

@@ -117,6 +117,7 @@ a.badge {
 }
 body.dark .btn {
   color: white;
+  background: rgba(255,255,255,0.05) !important;
 }
 body.dark .badge {
   background: rgba(255,255,255,0.1);
@@ -178,7 +179,6 @@ body.dark .section-header {
 }
 .section-header h2 {
   font-size: 20px;
-  font-weight: lighter;
 }
 .section-header .section {
   padding: 0;
@@ -252,10 +252,18 @@ body.dark .open-menu, body.dark .browse {
 }
 .section {
   display: block;
+  width: 100%;
 }
 .section h2 {
   margin: 0;
 }
+.section a {
+  display: flex;
+  align-items: center;
+}
+.section a span {
+  min-width: 0;
+}
 .line.align-top h3 .col .btn {
   box-sizing: border-box;
   margin-top: 5px;
@@ -266,11 +274,22 @@ body.dark .open-menu, body.dark .browse {
   color: rgba(0, 0, 0, 0.7);
   padding: 5px 0;
 }
+.container {
+  margin-left: 20px;
+}
 .section-container {
   display: grid;
-  grid-template-columns: repeat(2, 1fr); /* Three equal columns */
+  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
+  /*
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  */
   gap: 1rem; /* Optional spacing between columns */
 }
+.section-container > * {
+  min-width: 0;
+  overflow: hidden;
+}
+
 .grid-2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr); /* Three equal columns */
@@ -304,7 +323,6 @@ aside {
   width: 200px;
   display: block;
   flex-shrink: 0;
-  border-right: 1px solid rgba(0,0,0,0.04);
 }
 aside .tab i {
   width: 20px;
@@ -318,7 +336,9 @@ body.dark aside .tab:hover, aside .tab:hover {
   opacity: 1;
 }
 aside .tab {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 5px;
   color: black;
   text-decoration: none;
   padding: 10px;
@@ -373,15 +393,18 @@ body.dark .net {
   border-radius: 3px;
   color: white;
   width: 40px;
-  display: inline-block;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   text-align: center;
   margin-right: 5px;
   padding: 2px 8px;
   font-size: 12px;
 }
 body.dark .net .mark {
-  background: white;
-  color: black;
+  background: rgba(255,255,255,0.1);
+  color: white;
 }
 .placeholder-icon {
   font-size: 40px;
@@ -404,6 +427,48 @@ body.dark .net .mark {
 .installed-apps .title i {
   color: silver !important;
 }
+
+@media only screen and (max-width: 800px) {
+  body {
+    display: flex !important;
+    flex-direction: row !important;
+  }
+}
+@media only screen and (max-width: 600px) {
+  aside {
+    width: unset;
+    flex-shrink: unset;
+  }
+  aside {
+    padding: 0 10px;
+  }
+  aside .tab i {
+    width: 100%;
+  }
+  aside .tab .caption {
+    display: none;
+  }
+  aside .tab {
+    margin: 0;
+    padding: 10px;
+    border-left: none;
+  }
+  aside .btn-tab {
+    flex-direction: column;
+    padding: 10px 0;
+  }
+  aside .btn-tab .btn {
+    display: flex;
+    justify-content: center;
+  }
+  aside .btn-tab .btn .caption {
+    display: none; 
+  }
+  header .flexible {
+    min-width: unset;
+  }
+}
+
 @media only screen and (max-width: 480px) {
   .btn2 {
     padding: 5px;
@@ -416,6 +481,8 @@ body.dark .net .mark {
   }
 }
 </style>
+<script src="/popper.min.js"></script>
+<script src="/tippy-bundle.umd.min.js"></script>
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
 <script src="/noty.js"></script>
@@ -453,47 +520,37 @@ body.dark .net .mark {
 <header class='navheader grabbable'>
   <h1>
     <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
-    <button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div><div>Prev</div></button>
-    <button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div><div>Next</div></button>
-    <button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div><div>Refresh</div></button>
-    <div class='url-bar'>
-      <% if (current_urls.https) { %>
-        <a class='https-url' target="_blank" href="<%=current_urls.https%>"><i class="fa-solid fa-square-arrow-up-right"></i> <%=current_urls.https%></a>
-      <% } %>
-      <% if (current_urls.http) { %>
-        <a class='http-url' target="_blank" href="<%=current_urls.http%>"><i class="fa-solid fa-square-arrow-up-right"></i> <%=current_urls.http%></a>
-      <% } %>
-    </div>
-    <a href="/connect" class='btn2'><div><i class="fa-solid fa-circle-user"></i></div><div>Connect</div></a>
-    <div class='nav-btns'>
-      <a class='btn2' href="<%=portal%>" target="_blank"><div><i class="fa-solid fa-question"></i></div><div>Help</div></a>
-      <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></button>
-      <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><div><i class="fa-solid fa-download"></i></div><div>Download logs</div></a>
-      <a class='btn2' href="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
-      <button id='new-window' title='open a new window' class='btn2' data-agent="<%=agent%>"><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
+    <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
+    <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
+    <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
+    <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+    <div class='flexible'></div>
+    <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+      <div><i class="fa-solid fa-table-columns"></i></div>
+    </a>
+    <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
+      <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
+    </a>
+    <div class="dropdown btn2">
+      <button class='btn2' id='window-management'>
+        <div><i class="fa-solid fa-plus"></i></div>
+      </button>
+      <div class="dropdown-content" id="dropdown-content">
+        <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+          <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+        </button>
+        <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+          <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+        </button>
+      </div>
     </div>
+    <button class='btn2 hidden' id='close-window' data-tippy-content='close this section'>
+      <div><i class="fa-solid fa-xmark"></i></div>
+    </button>
   </h1>
 </header>
 <main>
 <div id='terminal' class='hidden'></div>
-<aside>
-  <div class='btn-tab'>
-    <a href="/init" class='btn'><i class="fa-solid fa-plus"></i> Create</a>
-    <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-globe"></i> Discover</a>
-  </div>
-  <a href="/" class='tab'><i class='fas fa-laptop-code'></i> Local</a>
-  <a href="/network" class='tab'><i class="fa-solid fa-wifi"></i> Network</a>
-  <% if (list.length > 0) { %>
-    <% let brands = { win32: "windows", darwin: "apple", linux: "Linux" } %>
-    <% list.forEach(({ host, name, platform, processes }, index) => { %>
-      <% if (selected_name === name) { %>
-        <a href="/net/<%=name%>" class='submenu tab selected'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=current_host === host ? 'this machine' : host%>)</a>
-      <% } else { %>
-        <a href="/net/<%=name%>" class='submenu tab'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=current_host === host ? 'this machine' : host%>)</a>
-      <% } %>
-    <% }) %>
-  <% } %>
-</aside>
 <div class='container'>
   <form class='search'>
     <!--
@@ -512,11 +569,11 @@ body.dark .net .mark {
           <div class='col'>
             <div class='grid-3'>
               <div class='section'>
-                <h2><i class='fas fa-laptop-code'></i> Local</h2>
+                <h2><i class='fas fa-laptop-code'></i> This machine</h2>
                 <div>accessible from this machine</div>
               </div>
               <div class='section'>
-                <h2><i class="fa-solid fa-wifi"></i> Network</h2><div>accessible from any machine on the local network</div>
+                <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'>How to start a peer</a></div>
@@ -541,21 +598,27 @@ body.dark .net .mark {
               <div class='title'><i class="fa-solid fa-circle"></i><span><%=item.title || item.name%></span></div>
               <div class='grid-3'>
                 <div class='section'>
-                  <% item.internal_router.forEach((domain) => { %>
-                    <a class='net' target="_blank" href="https://<%=domain%>"><span class='mark'>HTTPS</span> https://<%=domain%></a>
-                  <% }) %>
-                  <a class='net' target="_blank" href="http://localhost:<%=item.port%>"><span class='mark'>HTTP</span> http://localhost:<%=item.port%></a>
-                </div>
-                <div class='section'>
-                  <% if (item.external_ip) { %>
-                    <a class='net' target="_blank" href="http://<%=item.external_ip%>"><span class='mark'>HTTP</span> http://<%=item.external_ip%></a>
+                  <% 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>
                   <% } %>
                 </div>
-                <div class='section'>
-                  <% item.external_router.forEach((domain) => { %>
-                    <a class='net' target="_blank" href="https://<%=domain%>"><span class='mark'>HTTPS</span> https://<%=domain%></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>
             </div>
           </div>
@@ -569,7 +632,7 @@ body.dark .net .mark {
               <div class='col'>
                 <div class='grid-1'>
                   <div class='section'>
-                    <h2><i class="fas fa-circle-notch fa-spin"></i> Running Endpoints</h2><div>Use these URLs to access the remote servers.</div>
+                    <h2>Online</h2><div>Use these URLs to access the online remote servers.</div>
                   </div>
                 </div>
               </div>
@@ -591,12 +654,15 @@ body.dark .net .mark {
                   <div class='title'><i class="fa-solid fa-circle"></i><span><%=item.title || item.name%></span></div>
                   <div class='grid-1'>
                     <div class='section'>
-                      <% if (item.external_ip) { %>
-                        <a class='net' target="_blank" href="http://<%=item.external_ip%>"><span class='mark'>HTTP</span> http://<%=item.external_ip%></a>
+                      <% if (item.external_router.length > 0) { %>
+                        <% item.external_router.forEach((domain) => { %>
+                            <a class='net' target="_blank" href="https://<%=domain%>"><span class='mark'>HTTPS</span><span><%=domain%></span></a>
+                        <% }) %>
+                      <% } else { %>
+                        <% 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>
+                        <% } %>
                       <% } %>
-                      <% item.external_router.forEach((domain) => { %>
-                          <a class='net' target="_blank" href="https://<%=domain%>"><span class='mark'>HTTPS</span> https://<%=domain%></a>
-                      <% }) %>
                     </div>
                   </div>
                 </div>
@@ -610,7 +676,7 @@ body.dark .net .mark {
               <div class='col'>
                 <div class='grid-1'>
                   <div class='section'>
-                    <h2><i class="fa-regular fa-folder-open"></i> Installed Apps</h2><div>Remotely launch the installed apps.</div>
+                    <h2>Installed</h2><div>Remotely launch the installed apps.</div>
                   </div>
                 </div>
               </div>
@@ -633,8 +699,49 @@ body.dark .net .mark {
                   <div class='description'><%=item.description%></div>
                   <div class='launch-btns grid-1'>
                     <div class='section'>
-                      <a target="_blank" href="<%=item.https_href%>" class='net'><span class='mark'>HTTPS</span> <%=item.https_href%></a>
-                      <a target="_blank" href="<%=item.http_href%>" class='net'><span class='mark'>HTTP</span> <%=item.http_href%></a>
+                      <% if (item.app_href) { %>
+                        <a target="_blank" href="<%=item.app_href%>" class='net'><span class='mark'>HTTPS</span><span><%=item.app_href.replace("https://", "")%></span></a>
+                      <% } else if (item.https_href) { %>
+                        <a target="_blank" href="<%=item.https_href%>" class='net'><span class='mark'>HTTPS</span><span><%=item.https_href.replace("https://", "")%></span></a>
+                      <% } else { %>
+                        <a target="_blank" href="<%=item.http_href%>" class='net'><span class='mark'>HTTP</span><span><%=item.http_href.replace("http://", "")%></span></a>
+                      <% } %>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </h3>
+          <% }) %>
+        </div>
+        <div class='section-col'>
+          <div class='section-header'>
+            <h3>
+              <div class='col'>
+                <div class='grid-1'>
+                  <div class='section'>
+                    <h2>Serverless</h2><div>Static websites or serverless apps that connect to 3rd party APIs</div>
+                  </div>
+                </div>
+              </div>
+            </h3>
+          </div>
+          <% serverless.forEach((item, index) => { %>
+            <div class='index line align-top' data-index="<%=processes.length + installed.length + index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-description="<%=item.name%>">
+              <h3>
+                <div class='item-icon'>
+                  <div class='placeholder-icon'>
+                    <i class="fa-solid fa-database"></i>
+                  </div>
+                </div>
+                <div class='col'>
+                  <div class='title'><%=item.name%></div>
+                  <div class='launch-btns grid-1'>
+                    <div class='section'>
+                      <% if (item.external_router.length > 0) { %>
+                        <a target="_blank" href="https://<%=item.external_router[0]%>" class='net'><span class='mark'>HTTPS</span><span><%=item.external_router[0]%></span></a>
+                      <% } else { %>
+                        <a target="_blank" href="http://<%=item.external_ip%>" class='net'><span class='mark'>HTTP</span><span><%=item.external_ip%></span></a>
+                      <% } %>
                     </div>
                   </div>
                 </div>
@@ -646,6 +753,31 @@ body.dark .net .mark {
     <% } %>
   </div>
 </div>
+<aside>
+  <div class='btn-tab'>
+    <a href="/init" class='btn'><i class="fa-solid fa-plus"></i><div class='caption'>Create</div></a>
+    <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-globe"></i><div class='caption'>Discover</div></a>
+  </div>
+  <a href="/" class='tab'><i class='fas fa-laptop-code'></i><div class='caption'>This machine</div></a>
+  <a href="/network" class='tab'><i class="fa-solid fa-wifi"></i><div class='caption'>Local network</div></a>
+  <% if (list.length > 0) { %>
+    <% let brands = { win32: "windows", darwin: "apple", linux: "Linux" } %>
+    <% list.forEach(({ host, name, platform, processes }, index) => { %>
+      <% if (selected_name === name) { %>
+        <a href="/net/<%=name%>" class='submenu tab selected'><i class="fa-brands fa-<%=brands[platform]%>"></i><div class='caption'><%=name%> (<%=current_host === host ? 'this machine' : host%>)</div></a>
+      <% } else { %>
+        <a href="/net/<%=name%>" class='submenu tab'><i class="fa-brands fa-<%=brands[platform]%>"></i><div class='caption'><%=name%> (<%=current_host === host ? 'this machine' : host%>)</div></a>
+      <% } %>
+    <% }) %>
+  <% } %>
+  <a href="/connect" class='tab'><i class="fa-solid fa-plug"></i><div class='caption'>Login</div></a>
+  <a class='tab' href="<%=portal%>" target="_blank"><i class="fa-solid fa-question"></i><div class='caption'>Help</div></a>
+  <a class='tab' id='genlog'><i class="fa-solid fa-laptop-code"></i><div class='caption'>Logs</div></a>
+  <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
+  <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
+  <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
+  <a class='tab' href="/?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
+</aside>
 </main>
 <script>
 let list = []