pinokiod 3.9.2 → 3.9.12

package/server/public/modalinput.js

@@ -36,6 +36,8 @@ const ModalInput = async (params, uri) => {
           }).join("")
           input = `<select data-id="${field.key}">${items}</select>`
         }
+      } else if (type === 'checkbox') {
+        input = `<div class='checkbox-row'><input data-type="checkbox" type="checkbox" data-id="${field.key}" value="${field.key}" />${field.text}</div>`
       } else if (type === 'file') {
         input = `<div class='dropzone' data-type='file' data-id='${field.key}'></div>`
         //input = `<input type='file' data-id="${field.key}" />`
@@ -84,11 +86,14 @@ const ModalInput = async (params, uri) => {
       for(let field of form) {
         let input = Swal.getPopup().querySelector("[data-id='" + field.key + "']")
         let type = input.getAttribute("data-type")
-        if (type !== 'file') {
+        debugger
+        if (type !== 'file' && type !== 'checkbox') {
           response[field.key] = input.value
         }
+        if (type === 'checkbox') {
+          response[field.key] = input.checked
+        }
 
-//        let type = input.getAttribute("type")
 //        if (type === 'file') {
 //          const file = input.files[0];
 //          const reader = new FileReader();

package/server/public/opener.js

@@ -8,6 +8,8 @@ document.addEventListener("click", async (e) => {
     }
   }
   if (el) {
+    e.preventDefault()
+    e.stopPropagation()
     let filepath = el.getAttribute("data-filepath")
     let command = el.getAttribute("data-command")
     await fetch("/openfs", {
@@ -26,6 +28,36 @@ document.addEventListener("click", async (e) => {
     return
   }
 
+  // [data-run] runs commands kernel.exec (without a shell UI)
+  el = e.target.closest("[data-run]")
+  if (!el) {
+    let run = e.target.getAttribute("[data-run]")
+    if (run) {
+      el = e.target
+    }
+  }
+  if (el) {
+    debugger
+    e.preventDefault()
+    e.stopPropagation()
+    let run = el.getAttribute("data-run")
+    let cwd = el.getAttribute("data-cwd")
+    await fetch("/runcmd", {
+      method: "post",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        run,
+        cwd
+      })
+    }).then((res) => {
+      return res.json()
+    })
+//    window.open("about:blank", "_blank", "file://" + filepath)
+    return
+  }
+
   // target=_blank should open in new window
   el = e.target.closest("[target=_blank]")
   if (!el) {

package/server/public/style.css

@@ -80,7 +80,11 @@
 .drawer.vertical-collapsed {
   max-height: 0;
 }
-.dynamic {
+.dynamic.selected {
+  background: rgba(0,0,0,0.05);
+}
+body.dark .dynamic.selected {
+  background: rgba(0,150,250,0.05);
 }
 .dynamic-item img {
   width: 20px !important;
@@ -149,7 +153,13 @@ body.dark .type-tabs {
 .navheader {
   backdrop-filter: blur(16px);
 
+  /*
   padding: 15px 10px 5px;
+  */
+  padding: 15px;
+}
+.navheader .btn2 {
+  text-transform: lowercase;
 }
 body.columns footer {
 }
@@ -677,6 +687,10 @@ body.columns .containers {
 .containers .terminal-container #terminal {
   height: 100%;
 }
+.menu-btns {
+  display: flex;
+  align-items: flex-start;
+}
 .terminal-container {
 /*
   padding: 10px 0;
@@ -1128,6 +1142,7 @@ body.dark .line .btn {
 }
 .line .btn {
   background: rgba(0,0,0,0.9);
+  text-transform: lowercase;
   /*
   border: 1px solid rgba(0,0,0,0.1);
   color: rgba(0,0,0,0.7);
@@ -1187,6 +1202,7 @@ body.dark .line.align-top h3 .col .title a {
 }
 .line.align-top h3 .col .btn {
   padding: 4px 10px;
+  margin-right: 5px;
 }
 body.dark .line.align-top h3 .col .btn.label {
   background: rgba(255,255,255,0.05);
@@ -1426,6 +1442,19 @@ body.dark .swal2-modal input {
   outline: none !important;
   -webkit-appearance: none !important;
 }
+.swal2-modal input[type=checkbox] {
+  width: 14px;
+  height: 14px;
+  background: white;
+  margin-right: 5px;
+}
+.swal2-modal input[type=checkbox]:checked {
+  background: royalblue; 
+}
+.swal2-modal .checkbox-row {
+  display: flex;
+  align-items: center;
+}
 .swal2-container {
   font-size: 14px !important;
   z-index: 100000 !important;
@@ -1784,8 +1813,14 @@ footer.status {
     background: black;
 }
 */
+body.dark .btn.red {
+  color: rgba(230,0,0,1) !important;
+  border: 1px solid rgba(210,0,0,0.7) !important;
+}
 .btn.red {
-  background: brown !important;
+  color: rgba(210,0,0,0.8) !important;
+  border: 1px solid rgba(210,0,0,0.3);
+  background: none;
 }
 
 #error-screen {

package/server/socket.js

@@ -83,7 +83,12 @@ class Socket {
                 ******************************************************************/
 
                 // req.uri is always http or absolute path
-                let id = this.parent.kernel.api.filePath(req.uri)
+                let id
+                if (req.id) {
+                  id = req.id
+                } else {
+                  id = this.parent.kernel.api.filePath(req.uri)
+                }
 
                 if (req.status) {
                   ws.send(JSON.stringify({
@@ -121,8 +126,8 @@ class Socket {
                 // if the shell is running, don't do anything
                 // if the shell is not running, run the request
                 let shell = this.parent.kernel.shell.get(sh)
-                console.log("get shell for", sh, shell)
                 if (!shell) {
+                  await this.parent.kernel.clearLog(req.id)
                   this.parent.kernel.api.process(req)
                 }
                 // if it's not killed, don't do anything
@@ -171,7 +176,6 @@ class Socket {
     this.subscriptions.get(id).add(ws);
   }
   trigger(e) {
-
     // send to id session
     let id
     if (e.kernel) {

package/server/views/app.ejs

@@ -106,6 +106,11 @@ main iframe {
   height: 100%;
   border: none;
 }
+/*
+.header-item.indent {
+  padding-left: 23px !important;
+}
+*/
 .header-item {
   /*
   display: block;
@@ -122,7 +127,6 @@ main iframe {
 .header-item .btn2 {
   margin: 0;
   border: none;
-  padding: 5px;
   /*
   color: var(--light-color);
   */
@@ -161,7 +165,7 @@ body.dark .header-item.btn {
   color: var(--dark-color);
 }
 .header-item.btn {
-  padding: 10px;
+  padding: 8px;
   background: none !important;
   color: var(--light-color);
 }
@@ -192,6 +196,9 @@ body.dark #new-window {
   background: rgba(255,255,255,0.04);
 }
 */
+.app-info-card img {
+  padding: 10px;
+}
 .app-info {
   
 /*
@@ -201,7 +208,6 @@ body.dark #new-window {
   text-align: center;;
   font-weight: bold;
   align-items: center;
-  padding: 20px 0px 0px;
   /*
   background: rgba(0,0,0,0.04);
   */
@@ -249,18 +255,56 @@ body.dark .header-btns {
   margin: 10px 20px 0;
   */
 }
+.app-info-card {
+/*
+  padding: 10px !important;
+  */
+  display: flex;
+}
 .app-info .btn {
   width: 100%;
+  box-sizing: border-box;
+}
+body.dark .app-info .mode-section {
+  background: rgba(0,0,0,0.4);
+}
+.app-info .mode-section {
+  background: rgba(0,0,0,0.06);
+  padding: 20px;
+  box-sizing: border-box;
+  width: 100%;
+  text-align: left;
+}
+.app-info .mode-section .desc {
+  font-weight: normal;
+  opacity: 0.7;
+}
+.app-info .mode-section h3 {
+  font-size: 18px;
+  line-height: 26px;
+  margin: 0;
+}
+body.dark .app-info .mode-section .btn {
+  border: 1px solid rgba(255,255,255,0.1);
+}
+.app-info .mode-section .btn {
+  margin-top: 10px;
+  text-align: center;
 }
-.app-info > * {
+.app-info-card > * {
+/*
   padding: 5px;
+  */
   color: var(--light-color);
   text-decoration: none;
   box-sizing: border-box;
 }
-body.dark .app-info > * {
+body.dark .app-info-card > * {
   color: var(--dark-color);
 }
+.app-info-title {
+  padding: 10px;
+}
 .footer {
 /*
   display: flex;
@@ -387,6 +431,14 @@ body.dark .grid-btns .btn2 {
 }
 .tab i {
   margin-right: 10px;
+  font-size: 12px;
+  width: 12px;
+}
+.menu-item-image {
+  width: 16px !important;
+  height: 16px !important;
+  margin-right: 10px;
+  background: white;
 }
 .temp-menu {
 /*
@@ -542,8 +594,12 @@ body.dark #new-tab {
   border-top: 1px solid rgba(255,255,255,0.04);
   */
 }
+body.dark .submenu {
+  border-left: 1px solid rgba(255,255,255,0.3);
+}
 .submenu {
-  padding-left: 15px;
+  border-left: 1px solid black;
+  margin-left: 15px;
   box-sizing: border-box;
 }
 .loader-dialog {
@@ -600,6 +656,7 @@ body.dark .loader-container {
   z-index: 5;
 }
 .appcanvas {
+  overflow: auto;
   display: flex;
   flex-grow: 1;
   border-top: 1px solid rgba(0, 0,0 ,0.04);
@@ -661,6 +718,7 @@ body.dark .appcanvas {
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
 <script src="/nav.js"></script>
+<script src="/common.js"></script>
 <script src="/opener.js"></script>
 <script src="/report.js"></script>
 <script src="/normalize.js"></script>
@@ -687,7 +745,7 @@ body.dark .appcanvas {
 <a class='btn2' id='explore' href="/?mode=explore"><div><i class="fa-solid fa-globe"></i></div><div>Discover</div></a>
 <a href="/network" class='btn2'><div><i class="fa-solid fa-wifi"></i></div><div>Network</div></a>
 <a href="/connect" class='btn2'><div><i class="fa-solid fa-circle-user"></i></div><div>Connect</div></a>
-<input type='url' id='location' readonly>
+<input type='url' id='location' readonly value="<%=execUrl%>">
 <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>
@@ -706,81 +764,98 @@ body.dark .appcanvas {
 <aside class='active'>
   <div class='header-top header-item'>
     <div class='app-info'>
-      <% if (config.icon) { %>
-        <img src="<%=config.icon%>"/>
-      <% } else { %>
-        <i class="fa-regular fa-circle-dot"></i>
+      <% if (type !== 'run') { %>
+        <div class='mode-section'>
+          <h3><i class='fa-solid fa-code'></i> Dev mode</h3>
+          <div class='desc'>In dev mode, 'default' scripts do not automatically start</div>
+          <a class='btn' href="."><i class="fa-solid fa-circle-play"></i> Switch to Run mode</a>
+        </div>
       <% } %>
-      <div><%=config.title%></div>
-      <div class="folderpath">/api/<%=name%></div>
+      <div class='app-info-card'>
+        <% if (config.icon) { %>
+          <img src="<%=config.icon%>"/>
+        <% } else { %>
+          <i class="fa-regular fa-circle-dot"></i>
+        <% } %>
+        <div class='app-info-title'><%=config.title%></div>
+      </div>
       <div class='header-btns'>
-        <a class='btn header-item frame-link' href="/prototype">
-          <div class='tab'>
-            <i class='fa-solid fa-bolt'></i> Setup
-          </div>
-        </a>
-        <button class='btn header-item frame-link' id='edit-toggle'>
+        <div class='btn header-item frame-link revealer' id='edit-toggle' data-group='.edit-group'>
           <div class='tab'>
             <i class='fa-solid fa-pen-to-square'></i> Edit
           </div>
-        </button>
-      </div>
-      <div class='editsubmenu submenu hidden'>
-        <div class='btn header-item frame-link' id='edit'>
-          <div class='tab'><i class="fa-solid fa-pencil"></i> Edit info</div>
-        </div>
-        <div class='btn header-item frame-link' id='move'>
-          <div class='tab'><i class="fa-solid fa-right-to-bracket"></i> Move folder</div>
+          <div class='loader'><i class="fa-solid fa-caret-down"></i><i class="fa-solid fa-caret-up hidden"></i></div>
         </div>
-        <div class='btn header-item frame-link' id='copy'>
-          <div class='tab'><i class="fa-solid fa-copy"></i> Copy folder</div>
-        </div>
-        <div class='btn header-item frame-link' id='delete' data-name="<%=name%>">
-          <div class='tab'><i class="fa-solid fa-trash-can"></i> Delete folder</div>
+        <div class='edit-group editsubmenu submenu hidden'>
+          <a <%=config.init_required ? 'data-init' : ''%> class='btn header-item frame-link' href="/prototype?type=init&path=<%=path%>">
+            <div class='tab'>
+              <i class='fa-solid fa-bolt'></i> Initialize
+            </div>
+          </a>
+          <a class='btn header-item frame-link' href="/prototype?type=extension&path=<%=path%>">
+            <div class='tab'>
+              <i class='fa-solid fa-puzzle-piece'></i> Extensions
+            </div>
+          </a>
+          <div class='btn header-item frame-link' id='edit'>
+            <div class='tab'><i class="fa-solid fa-pencil"></i> Edit info</div>
+          </div>
+          <div class='btn header-item frame-link' id='move'>
+            <div class='tab'><i class="fa-solid fa-right-to-bracket"></i> Move folder</div>
+          </div>
+          <div class='btn header-item frame-link' id='copy'>
+            <div class='tab'><i class="fa-solid fa-copy"></i> Copy folder</div>
+          </div>
+          <div class='btn header-item frame-link' id='delete' data-name="<%=name%>">
+            <div class='tab'><i class="fa-solid fa-trash-can"></i> Delete folder</div>
+          </div>
         </div>
       </div>
     </div>
   </div>
   <div class='m n system' data-type="n">
-    <!--<a data-index="0" target="<%=src%>" href="<%=src%>" class='btn header-item frame-link'>-->
-    <!--
-    <div id='copy' data-name="<%=name%>" class='btn header-item frame-link'>
-      <div class='tab'><i class="fa-solid fa-copy"></i> Copy</div>
-    </div>
-    <div id='delete' data-name="<%=name%>" class='btn header-item frame-link'>
-      <div class='tab'><i class="fa-solid fa-trash-can"></i> Delete</div>
-    </div>
-    -->
     <a target="<%=src%>" href="<%=src%>" class='btn header-item frame-link' data-index="0">
       <div class='tab'><i class="fa-regular fa-folder-open"></i> Files <div class='disk-usage'></div></div>
     </a>
+    <% if (profile || feed) { %>
+      <div class='btn header-item frame-link revealer' data-group='.info-group'>
+        <div class='tab'>
+          <i class='fa-solid fa-circle-info'></i> Info
+        </div>
+        <div class='loader'><i class="fa-solid fa-caret-down"></i><i class="fa-solid fa-caret-up hidden"></i></div>
+      </div>
+      <div class='info-group submenu hidden'>
+        <% if (profile) { %>
+        <a target="_blank" href="<%=profile%>" class='btn header-item frame-link'>
+          <div class='tab'><i class="fa-regular fa-circle-user"></i> Publisher</div>
+        </a>
+        <% } %>
+        <% if (feed) { %>
+        <a target="_blank" href="<%=feed%>" class='btn header-item frame-link'>
+          <div class='tab'><i class="fa-solid fa-rss"></i> Newsfeed</div>
+        </a>
+        <% } %>
+      </div>
+    <% } %>
     <div class='dynamic'>
       <% if (plugin_menu) { %>
       <%- include('./partials/dynamic', { dynamic: plugin_menu, }) %>
       <% } %>
     </div>
-    <!--
-    <a target="run_frame" href="/run/<%=name%>" class='btn header-item frame-link' data-index="1">
-      <div class='tab'><i class="fa-solid fa-bolt-lightning"></i> Run...</div>
-    </a>
-    -->
-    <!--
-    <a target="_blank" href="/terminal/<%=name%>/<%=Date.now()%>" class='btn header-item frame-link' data-index="1">
-      <div class='tab'><i class="fa-solid fa-terminal"></i> Terminal</div>
-    </a>
-    -->
-    <a target="_blank" href="<%=profile%>" class='btn header-item frame-link'>
-      <div class='tab'><i class="fa-regular fa-circle-user"></i> Publisher</div>
-    </a>
-    <a target="_blank" href="<%=feed%>" class='btn header-item frame-link'>
-      <div class='tab'><i class="fa-solid fa-rss"></i> Newsfeed</div>
-    </a>
-    <a target="/share/<%=name%>" href="/share/<%=name%>", class="btn header-item frame-link" data-index="2" data-mode="refresh">
-      <div class='tab'><i class="fa-solid fa-wifi"></i> Share</div>
-    </a>
-    <a target="/env/api/<%=name%>" href="/env/api/<%=name%>", class="btn header-item frame-link" data-index="3" data-mode="refresh">
-      <div class='tab'><i class="fa-solid fa-gear"></i> Configure</div>
-    </a>
+    <div class='btn header-item frame-link revealer' data-group='.config-group'>
+      <div class='tab'>
+        <i class='fa-solid fa-gear'></i> Settings
+      </div>
+      <div class='loader'><i class="fa-solid fa-caret-down"></i><i class="fa-solid fa-caret-up hidden"></i></div>
+    </div>
+    <div class='config-group submenu hidden'>
+      <a target="/share/<%=name%>" href="/share/<%=name%>", class="btn header-item frame-link" data-index="2" data-mode="refresh">
+        <div class='tab'><i class="fa-solid fa-wifi"></i> Share</div>
+      </a>
+      <a target="/env/api/<%=name%>" href="/env/api/<%=name%>", class="btn header-item frame-link" data-index="3" data-mode="refresh">
+        <div class='tab'><i class="fa-solid fa-gear"></i> Configure</div>
+      </a>
+    </div>
   </div>
   <div class='m h menu' data-type='h'>
     <% if (config.menu) { %>
@@ -847,15 +922,6 @@ body.dark .appcanvas {
     </nav>
     -->
     <main class='browserview'>
-      <% if (false) { %>
-        <% if (config.menu) { %>
-          <% config.menu.forEach((item) => { %>
-            <% if (item.btn && item.src) { %>
-              <iframe name='<%=item.src%>' class='hidden'></iframe>
-            <% } %>
-          <% }) %>
-        <% } %>
-      <% } %>
     </main>
   </div>
   </div>
@@ -971,6 +1037,11 @@ body.dark .appcanvas {
 //    } else {
 //      selection = document.querySelector("[data-default]")
 //    }
+      let init = document.querySelector("[data-init]")
+      if (init) {
+        location.href = init.href
+        return
+      }
       let selection = document.querySelector("[data-default]")
 
 //    console.log("> 3")
@@ -1056,9 +1127,20 @@ body.dark .appcanvas {
 
         // Instantiate a frame with the selected target's href
         let url = target.href
+          
+        if (!url) {
+          return
+        }
 //        document.querySelector("#open-browser").href = url
 //        document.querySelector("#clone-tab").setAttribute("data-href", url)
-        document.querySelector("#location").value = url
+
+        //document.querySelector("#location").value = url
+
+        if (target.pathname.startsWith("/run")) {
+          document.querySelector("#location").value = target.pathname.slice(4)
+        } else {
+          document.querySelector("#location").value = target.pathname
+        }
 
 
         // select the selected target element (tab)
@@ -1372,11 +1454,13 @@ body.dark .appcanvas {
       document.querySelector("#menu").classList.toggle("margin")
     })
   }
+  /*
   document.querySelector("#edit-toggle").addEventListener("click", async (e) => {
     e.preventDefault()
     e.stopPropagation()
     document.querySelector(".editsubmenu").classList.toggle("hidden")
   })
+  */
   document.querySelector("#move").addEventListener("click", async (e) => {
     e.preventDefault()
     e.stopPropagation()
@@ -1503,6 +1587,24 @@ body.dark .appcanvas {
   document.querySelector("aside").addEventListener("click", async (e) => {
     let target
 
+    // 0. handle dropdowns
+    if (e.target.classList.contains("revealer")) {
+      target = e.target
+    } else {
+      target = e.target.closest(".revealer")
+    }
+
+    if (target) {
+      e.preventDefault()
+      e.stopPropagation()
+      let group = target.getAttribute("data-group")
+      document.querySelector(group).classList.toggle("hidden")
+      target.querySelector(".loader .fa-caret-down").classList.toggle("hidden")
+      target.querySelector(".loader .fa-caret-up").classList.toggle("hidden")
+      return
+    }
+
+
 
     // 1. handle delete
     if (e.target.classList.contains("del")) {
@@ -1622,7 +1724,10 @@ body.dark .appcanvas {
       } else {
         if (target.classList.contains("reveal")) {
           // nested menu
+          target.closest(".dynamic").classList.toggle("selected")
           target.closest(".nested-menu").querySelector(".submenu").classList.toggle("hidden")
+          target.querySelector(".loader .fa-caret-down").classList.toggle("hidden")
+          target.querySelector(".loader .fa-caret-up").classList.toggle("hidden")
           e.preventDefault()
           e.stopPropagation()
         } else {
@@ -1636,13 +1741,17 @@ body.dark .appcanvas {
           //location.hash = target.getAttribute("href")
 
           if (target.closest(".h")) {
-            location.hash = target.target
+            if (target.target) {
+              location.hash = target.target
+            }
           } else {
             let index = target.getAttribute("data-index")
             let type = target.closest(".m").getAttribute("data-type")
 
 
-            location.hash = type + index
+            if (type) {
+              location.hash = type + index
+            }
           }
 
           document.querySelectorAll(".frame-link").forEach((el) => {
@@ -1718,7 +1827,10 @@ body.dark .appcanvas {
   //        }, 500)
   //      })
       }
-      renderSelection()
+      <% if (type === "run" && env.PINOKIO_SCRIPT_DEFAULT && env.PINOKIO_SCRIPT_DEFAULT.toString().toLowerCase() === "true") { %>
+        
+        renderSelection()
+      <% } %>
     }
   }
   if (document.querySelector("#genlog")) {
@@ -1758,9 +1870,14 @@ body.dark .appcanvas {
             } else if (event.data.action.type === "location") {
               let url = event.data.action.url
               console.log({ action: event.data.action })
-              document.querySelector("#open-browser").href = url
-              //document.querySelector("#location").innerHTML = url
-              document.querySelector("#location").value = url
+
+              //document.querySelector("#location").value = url
+              let pathname = new URL(url).pathname
+              if (pathname.startsWith("/run")) {
+                document.querySelector("#location").value = pathname.slice(4)
+              } else {
+                document.querySelector("#location").value = pathname
+              }
             }
           } else if (event.data.type) {
             let asideHidden = (window.getComputedStyle(document.querySelector("aside")).display === "none")
@@ -1804,6 +1921,9 @@ body.dark .appcanvas {
 
   });
   refresh_du()
+  <% if (type !== 'run') { %>
+    document.querySelector(".dynamic .reveal").click()
+  <% } %>
   /*
   document.addEventListener("keydown", (e) => {
     let size = document.querySelectorAll(".selectable").length

package/server/views/env_editor.ejs

@@ -215,6 +215,7 @@ footer .btn.go-home {
 }
 .env-title {
   font-weight: bold;
+  margin-bottom: 5px;
 }
 .env-description {
   margin-bottom: 10px;

package/server/views/file_explorer.ejs

@@ -456,7 +456,7 @@ const n = new N()
 let socket = new Socket()
 const pull = async () => {
   socket.close()
-  await new Promise((resolve, reject) => {
+  await new Promise(async (resolve, reject) => {
     if (!term) {
       <% if (theme === "dark") { %>
       await createTerm(xtermTheme.FrontEndDelight)