pinokiod 3.22.0 → 3.24.0

package/server/views/app.ejs

@@ -316,13 +316,14 @@ body.dark .app-info-card > * {
   color: var(--dark-color);
 }
 .app-info-container {
-  padding: 10px 0;
+  padding: 7px 0;
   min-width: 0;
   text-overflow: ellipsis;
 }
 .app-info-title {
   width: 100%;
   font-weight: bold;
+  font-size: 16px;
   /*
   padding: 15px 0;
   */
@@ -339,8 +340,10 @@ body.dark .app-info-card > * {
   overflow: hidden;
 }
 .app-info-description {
+  margin-top: 5px;
   word-wrap: break-word;
   width: 100%;
+  opacity: 0.7;
 }
 .footer {
 /*
@@ -485,13 +488,42 @@ body.dark .grid-btns .btn2 {
   padding: 2px;
   border-radius: 4px;
 }
+body.dark aside .btn {
+  background: rgba(255,255,255,0.05);
+}
+.fa-circle {
+  color: yellowgreen;
+  margin-right: 10px;
+}
+.dynamic .submenu .tab i {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 15px;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+}
+/*
+body.dark .dynamic .submenu {
+  border-left: 5px solid white;
+}
+*/
+.dynamic .submenu {
+  margin-left: 0px;
+  /*
+  border-left: 5px solid black;
+  */
+}
 .menu-item-image {
-  width: 18px !important;
-  height: 18px !important;
+  width: 20px !important;
+  height: 20px !important;
   margin-right: 6px;
   background: white;
+  /*
   padding: 2px;
-  border-radius: 20px;
+  */
+  border-radius: 2px;
 }
 .temp-menu {
 /*
@@ -992,17 +1024,27 @@ body.dark .mode-selector .btn2.selected {
         <% } %>
       </div>
     <% } %>
+    <a id='devtab' data-mode="refresh" target="<%=dev_link%>" href="<%=dev_link%>" class="btn header-item frame-link selected">
+      <div class="tab"><i class="fa-solid fa-code"></i> Dev</div>
+    </a>
     <div class="dynamic <%=type==='run' ? '' : 'selected'%>">
-      <% if (type !== "run") { %>
+      <div class='submenu'>
         <% if (plugin_menu) { %>
           <%- include('./partials/dynamic', { dynamic: plugin_menu, }) %>
-        <% } else { %>
-          <div class="nested-menu">
-            <div class="btn header-item frame-link selected">
-              <div class="tab"><i class="fa-solid fa-code"></i> Dev</div>
-              <div class="loader"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
+        <% } %>
+      </div>
+      <% if (false) { %>
+        <% if (type !== "run") { %>
+          <% if (plugin_menu) { %>
+            <%- include('./partials/dynamic', { dynamic: plugin_menu, }) %>
+          <% } else { %>
+            <div class="nested-menu">
+              <div class="btn header-item frame-link selected">
+                <div class="tab"><i class="fa-solid fa-code"></i> Dev</div>
+                <div class="loader"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
+              </div>
             </div>
-          </div>
+          <% } %>
         <% } %>
       <% } %>
     </div>
@@ -1140,13 +1182,15 @@ body.dark .mode-selector .btn2.selected {
     interacted = true
   })
   <% if (type !== "run" && !config.title) { %>
+  /*
   tippy('#edit-toggle', {
     arrow: true,
     showOnCreate: true,
     theme: "pointer",
-    placement: "right-end",
+    placement: "top",
     content: "Click here to edit metadata"
   });
+  */
   <% } %>
   <% if (type === "run" && config.meta_required) { %>
   setTimeout(() => {
@@ -1811,6 +1855,7 @@ body.dark .mode-selector .btn2.selected {
     }
   })
   document.querySelector("aside").addEventListener("click", async (e) => {
+    console.log("ASIDE CLICK")
     let target
 
     // 0. handle dropdowns
@@ -1969,6 +2014,7 @@ body.dark .mode-selector .btn2.selected {
     } else {
       target = e.target.closest(".frame-link")
     }
+    console.log( { target })
 
 
 
@@ -2063,6 +2109,7 @@ body.dark .mode-selector .btn2.selected {
           document.querySelectorAll(".frame-link").forEach((el) => {
             el.classList.remove("selected")
           })
+          console.log("SELECTED")
           target.classList.add("selected")
 
           renderSelection(e)
@@ -2114,8 +2161,8 @@ body.dark .mode-selector .btn2.selected {
     })
     if (dynamic && dynamic.length > 0) {
       console.log({ dynamic })
-      if (document.querySelector(".dynamic")) {
-        document.querySelector(".dynamic").innerHTML = dynamic
+      if (document.querySelector(".dynamic .submenu")) {
+        document.querySelector(".dynamic .submenu").innerHTML = dynamic
       }
       rendered = true
     } else {
@@ -2123,17 +2170,17 @@ body.dark .mode-selector .btn2.selected {
     }
     console.log({ rendered, dynamic_loaded })
     if (rendered) {
-      if (dynamic_loaded) {
-        // already loaded, don't touch the UI
-      } else {
-        // first time being loaded
-        dynamic_loaded = true
-        if (document.querySelector(".dynamic .reveal")) {
-          console.log("click")
-
-//          document.querySelector(".dynamic .reveal").click()
-        }
-      }
+//      if (dynamic_loaded) {
+//        // already loaded, don't touch the UI
+//      } else {
+//        // first time being loaded
+//        dynamic_loaded = true
+//        if (document.querySelector(".dynamic .reveal")) {
+//          console.log("click")
+//
+////          document.querySelector(".dynamic .reveal").click()
+//        }
+//      }
     } else {
       console.log("Not yet rendered. Try again")
       setTimeout(() => {
@@ -2293,10 +2340,19 @@ body.dark .mode-selector .btn2.selected {
   fetch("/state/<%=type%>/<%=name%>").then((res) => {
     return res.json()
   }).then((res) => {
+    console.log("STATE", res)
+    let selection
     if (res.selected) {
-      let selection = document.querySelector(`[href='${res.selected}']`)
-      selection.click()
+      selection = document.querySelector(`[href='${res.selected}']`)
+    } else {
+      selection = document.querySelector("#devtab")
     }
+    console.log("CLICK", selection)
+    selection.click()
+//    setTimeout(() => {
+//      alert("click")
+//      document.querySelector(".selected").click()
+//    }, 500)
   })
   <% if (type !== 'run') { %>
     fetch("<%=repos%>").then((res) => {

package/server/views/d.ejs

@@ -0,0 +1,225 @@
+<html>
+<head>
+<title>Pinokio</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+<link href="/xterm.min.css" rel="stylesheet" />
+<link href="/css/fontawesome.min.css" rel="stylesheet">
+<link href="/css/solid.min.css" rel="stylesheet">
+<link href="/css/regular.min.css" rel="stylesheet">
+<link href="/css/brands.min.css" rel="stylesheet">
+<link href="/markdown.css" rel="stylesheet"/>
+<link href="/noty.css" rel="stylesheet"/>
+<link href="/style.css" rel="stylesheet"/>
+<% if (agent === "electron") { %>
+  <link href="/electron.css" rel="stylesheet"/>
+<% } %>
+<style>
+main {
+  max-width: 1000px;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20px;
+  /*
+  justify-content: center;
+  */
+}
+.tab-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  padding: 10px 20px;
+}
+.submenu.tab {
+  margin: 10px 0;
+}
+/*
+.tab:hover {
+  border: 2px solid royalblue;
+}
+*/
+.tab {
+  min-width: 250px;
+  text-decoration: none;
+  display: flex;
+  /*
+  flex-direction: column;
+  */
+  font-size: 14px;
+  font-weight: bold;
+  color: black;
+  overflow: hidden;
+  margin: 10px;
+  box-sizing: border-box;
+  border-radius: 4px;
+  align-items: center;
+  padding: 10px 15px;
+  /*
+  width: 120px;
+  */
+
+  /*
+  margin-bottom: 10px;
+  */
+  background: rgba(0,0,0,0.05);
+}
+body.dark .tab {
+  color: white;
+  background: rgba(255,255,255,0.03);
+}
+.tab h2 {
+  padding: 5px 2px 10px;
+/*
+  text-align: center;
+  */
+  margin: 0;
+  font-size: 14px;
+}
+.tab .col {
+  flex-grow: 1;
+  margin-left: 10px;
+}
+.tab i.img {
+  height: 50px;
+  width: 50px;
+  background: white;
+  color: black;
+  display: flex;
+  justify-content: center;
+  font-size: 20px;
+  align-items: center;
+  border-radius: 3px;
+}
+.tab img {
+  height: 50px;
+  width: 50px;
+  border-radius: 3px;
+  background: white;
+}
+/*
+body.dark .tab i {
+  background: rgba(0,0,0,0.1);
+  color: white;
+}
+.tab i {
+  width: 120px;
+  height: 120px;
+  font-size: 30px;
+  box-sizing: border-box;
+  text-align:center;
+  background: white;
+  color: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+*/
+.menu-container {
+  border: 3px solid rgba(0,0,0,0.04);
+  background: white;
+}
+body.dark .menu-container {
+  background: rgba(255,255,255,0.03);
+}
+.menu-container {
+  width: 100%;
+  box-sizing: border-box;
+  margin: 20px;
+}
+body.dark .tab-header {
+  background: rgba(0,0,0,0.3);
+}
+.tab-header {
+  background: rgba(0,0,0,0.04);
+  padding: 15px;
+  font-weight: bold;
+}
+.container {
+  margin: 0;
+  padding: 0 !important;
+}
+.btns {
+  display: flex;
+}
+body.dark .btn {
+  background: rgba(255,255,255,0.08);
+}
+.btn {
+  padding: 7px 10px;
+  background: rgba(0,0,0,0.8);
+  border-radius: 0;
+}
+.btn.run-btn {
+  flex-grow: 1;
+  text-align: center;
+  margin-right: 2px;
+  /*
+  background: royalblue !important;
+  */
+}
+</style>
+<script src="/hotkeys.min.js"></script>
+<script src="/sweetalert2.js"></script>
+<script src="/common.js"></script>
+<script src="/opener.js"></script>
+<script src="/nav.js"></script>
+</head>
+<body class='<%=theme%>' data-agent="<%=agent%>">
+<main>
+  <% dynamic.forEach((item, index) => { %>
+    <% if (item.menu) { %>
+      <div class='menu-container'>
+        <div class='tab-header'><i class='<%=item.icon%>'></i> <%=item.text%></div>
+        <div class='tab-content'>
+          <% item.menu.forEach((i) => { %>
+            <div class='tab'>
+              <% if (i.image) { %>
+                <img src="<%=i.image%>">
+              <% } else if (i.icon) { %>
+                <i class="img <%=i.icon%>"></i>
+              <% } %>
+              <div class='col'>
+                <h2><%=i.title%></h1>
+                <div class='btns'>
+                  <a class='run-btn btn' href="<%=i.href%>"><i class="fa-solid fa-play"></i> Run</a>
+                  <a class='btn' target="_blank" href="<%=i.link%>"><i class="fa-solid fa-question"></i></a>
+                </div>
+              </div>
+            </div>
+          <% }) %>
+        </div>
+      </div>
+    <% } else { %>
+      <div class='tab'>
+        <img src="<%=item.image%>">
+        <div class='col'>
+          <h2><%=item.title%></h1>
+          <div class='btns'>
+            <a class='run-btn btn' href="<%=item.href%>"><i class="fa-solid fa-play"></i> Run</a>
+            <a class='btn' target="_blank" href="<%=item.link%>"><i class="fa-solid fa-question"></i></a>
+          </div>
+        </div>
+      </div>
+    <% } %>
+  <% }) %>
+  <% if (retry) { %>
+    <div class='requirements'>
+      <div class='content'>
+        <div class='loading'>
+          <i class="fa-solid fa-circle-notch fa-spin"></i>
+        </div>
+      </div>
+    </div>
+  <% } %>
+</main>
+<script>
+<% if (retry) { %>
+setTimeout(() => {
+  location.href = location.href
+}, 2000)
+<% } %>
+</script>
+</body>
+</html>

package/server/views/env_editor.ejs

@@ -220,6 +220,15 @@ footer .btn.go-home {
 .env-description {
   margin-bottom: 10px;
 }
+.warning {
+  padding: 10px;
+  margin: 10px 0 20px;
+  border-left: 5px solid rgba(0,0,0,0.1);
+}
+.warning a {
+  text-decoration: none;
+  color: royalblue;
+}
 </style>
 <script>
 document.addEventListener("DOMContentLoaded", async () => {
@@ -281,6 +290,9 @@ document.addEventListener("DOMContentLoaded", async () => {
             </div>
           </div>
         <% } %>
+        <div class='warning'>
+          This will execute the 3rd party script downloaded from <a href="<%=gitRemote%>" target="_blank"><%=gitRemote%>.</a>
+        </div>
         <footer>
           <a href="/" class='btn go-home'><i class='fa-solid fa-home'></i> home</a>
           <div class='flexible'></div>

package/server/views/index.ejs

@@ -365,21 +365,13 @@ body.dark aside .current.selected {
 </div>
 <% } %>
 </header>
-<% if (ishome) { %>
-  <form class='search'>
-    <div class='app-btns'>
-      <a class='btn create-new' href="/init"><i class="fa-solid fa-plus"></i> Build</a>
-      <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-magnifying-glass"></i> Discover</a>
-    </div>
-    <% if (display.includes("form")) { %>
-      <input type='search' class="flexible" placeholder='Filter local apps'>
-    <% } else { %>
-    <% } %>
-  </form>
-<% } %>
 <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 selected'><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) { %>
@@ -391,6 +383,23 @@ body.dark aside .current.selected {
   <div class='tab'><i class="fa-solid fa-code"></i> Dev</div>
 </aside>
 <div class='container'>
+<% if (ishome) { %>
+  <form class='search'>
+    <div class='app-btns'>
+      <!--
+      <a class='btn create-new' href="/init"><i class="fa-solid fa-plus"></i> Build</a>
+      <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-globe"></i> Discover</a>
+      -->
+      <!--
+      <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-magnifying-glass"></i> Discover</a>
+      -->
+    </div>
+    <% if (display.includes("form")) { %>
+      <input type='search' class="flexible" placeholder='Search apps'>
+    <% } else { %>
+    <% } %>
+  </form>
+<% } %>
 <% if (ishome) { %>
   <% if (running.length > 0) { %>
     <div class='running-apps'>
@@ -497,7 +506,10 @@ body.dark aside .current.selected {
               <% } %>
             </div>
             <div class='col'>
-              <div class='title'><%=item.name%></div>
+              <div class='title'>
+                <i class="fa-solid fa-circle"></i>
+                <span><%=item.name%></span>
+              </div>
               <div class='uri'><%=item.filepath%></div>
               <div class='description'><%=item.description%></div>
               <div class='menu-btns'>

package/server/views/init/index.ejs

@@ -1244,13 +1244,19 @@ body.dark .ace-editor {
       -->
       <div class="tab-container">
         <div class="tab-nav">
+            <!--
+            <button type="button" class="tab-button active" data-tab="launcher">
+               <i class="fa-solid fa-robot" style="margin-right: 5px;"></i>
+                Quick Launcher
+            </button>
+            -->
             <button type="button" class="tab-button active" data-tab="launcher">
                 <i class="fa-solid fa-cloud-arrow-down" style="margin-right: 5px;"></i>
-                Git
+                Git Project Launcher
             </button>
             <button type="button" class="tab-button" data-tab="cli">
                 <i class="fa-solid fa-terminal" style="margin-right: 5px;"></i>
-                CLI
+                CLI App Launcher
             </button>
             <button type="button" class="tab-button" data-tab="project">
                 <i class="fa-regular fa-star" style="margin-right: 5px;"></i>

package/server/views/net.ejs

@@ -430,16 +430,13 @@ body.dark .net {
     </div>
   </h1>
 </header>
-<form class='search'>
-  <div class='app-btns'>
-    <a class='btn create-new' href="/init"><i class="fa-solid fa-plus"></i> Build</a>
-    <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-magnifying-glass"></i> Discover</a>
-  </div>
-  <input type='search' class="flexible" placeholder='Filter network apps'>
-</form>
 <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) { %>
@@ -455,6 +452,15 @@ body.dark .net {
   <div class='tab'><i class="fa-solid fa-code"></i> Dev</div>
 </aside>
 <div class='container'>
+    <form class='search'>
+      <!--
+      <div class='app-btns'>
+        <a class='btn create-new' href="/init"><i class="fa-solid fa-plus"></i> Build</a>
+        <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-magnifying-glass"></i> Discover</a>
+      </div>
+      -->
+      <input type='search' class="flexible" placeholder='Search apps'>
+    </form>
     <div class='running-apps'>
       <% if (current_host === host) { %>
         <div class='section-header'>

package/server/views/network.ejs

@@ -278,7 +278,7 @@ body.dark .config {
   background: rgba(0,0,0,0.9);
   */
   color: black;
-  padding: 10px 100px 0;
+  padding: 50px 50px 0;
   text-align: left;
 }
 .config-header {
@@ -565,6 +565,7 @@ input[type=search] {
 </div>
 </h1>
 </header>
+    <!--
 <form class='search'>
   <div class='app-btns'>
     <a class='btn create-new' href="/init"><i class="fa-solid fa-plus"></i> Build</a>
@@ -572,8 +573,13 @@ input[type=search] {
   </div>
   <input type='search' class="flexible" placeholder='Filter network apps'>
 </form>
+    -->
 <main>
   <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 selected'><i class="fa-solid fa-wifi"></i> Network</a>
     <% if (list.length > 0) { %>

package/server/views/partials/dynamic.ejs

@@ -36,6 +36,9 @@
         </a>
       <% } else { %>
         <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index+4%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>' <%=item.shell_id ? `data-shell=${item.shell_id}` : ""%> <%=item.script_id ? `data-script=${item.script_id}` : ''%>>
+          <% if (item.running) { %>
+            <i class="fa-solid fa-circle"></i>
+          <% } %>
           <div class='tab'><%-item.btn%></div>
           <% if (item.running) { %>
             <% if (item.online) { %>

package/server/views/partials/menu.ejs

@@ -51,6 +51,9 @@
         </a>
       <% } else { %>
         <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>' <%=item.shell_id ? `data-shell=${item.shell_id}` : ""%> <%=item.script_id ? `data-script=${item.script_id}` : ''%>>
+          <% if (item.running) { %>
+            <i class="fa-solid fa-circle"></i>
+          <% } %>
           <div class='tab'><%-item.btn%></div>
           <% if (item.running) { %>
             <!--

package/server/views/partials/running.ejs

@@ -0,0 +1,22 @@
+<% dynamic.forEach((item, index) => { %>
+  <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index+4%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>' <%=item.shell_id ? `data-shell=${item.shell_id}` : ""%> <%=item.script_id ? `data-script=${item.script_id}` : ''%>>
+    <% if (item.running) { %>
+      <i class="fa-solid fa-circle"></i>
+    <% } %>
+    <div class='tab'><%-item.btn%></div>
+    <% if (item.running) { %>
+      <% if (item.online) { %>
+        <div class='loader shutdown online'>
+        </div>
+      <% } else { %>
+        <div class='loader shutdown'>
+          <button class='btn'>
+          <i class="fa-solid fa-square"></i> Stop
+          </button>
+        </div>
+      <% } %>
+    <% } else { %>
+      <i class="fa-solid fa-angle-right"></i>
+    <% } %>
+  </a>
+<% }) %>

package/server/views/settings.ejs

@@ -417,7 +417,7 @@ body.dark .keys pre {
         <div>Keys are array values stored for unique host names, stored at <code>~/pinokio/key.json</code>, and can be set through <code>pre</code> attributes in pinokio scripts. Here's an example:</div>
         <pre>{
   "openai.com": [
-    "sk-proj-2najBvCGFx18belpjf13T3BlbkFJIAR5KXK031n41WzAsPEn"
+    "12345678-FAKEaccesstoken1234567890abcdef"
   ],
   "x.com": [
     "12345678-FAKEaccesstoken1234567890abcdef",