pinokiod 3.8.151 → 3.8.152

package/kernel/bin/index.js

@@ -369,7 +369,7 @@ class Bin {
               let channel = chunks[3]
               let coerced = semver.coerce(version)
               let mamba_requirement = ">=24.11.1"
-              console.log({ name, channel, version })
+//              console.log({ name, channel, version })
               //if (semver.satisfies(coerced, mamba_requirement) && channel === "conda-forge") {
               if (semver.satisfies(coerced, mamba_requirement)) {
                 conda_check.mamba = true
@@ -439,11 +439,10 @@ class Bin {
 
     if (this.platform === "darwin") {
       // 3. brew
-      console.log("## check brew")
 
       let brew_path = path.resolve(this.kernel.homedir, "bin", "homebrew")
       let brew_exists = await this.exists(brew_path)
-      console.log({ brew_path, brew_exists })
+//      console.log({ brew_path, brew_exists })
 
       let brew = []
       if (brew_exists) {
@@ -451,7 +450,7 @@ class Bin {
         res = await this.exec({ message: `brew list -1`, conda: { skip: true } }, (stream) => {
 //          console.log("brew list check", { stream })
         })
-        console.log("BREW", res.response)
+//        console.log("BREW", res.response)
         lines = res.response.split(/[\r\n]+/).slice(0, -1)  // ignore last line since it's the prompt
         let end = false
         for(let line of lines) {
@@ -475,7 +474,7 @@ class Bin {
 
 
       // check brew_installed
-      console.log("checking brew installed")
+//      console.log("checking brew installed")
       let e = await this.kernel.bin.exists("homebrew")
       let { stdout }= await this.exec({ message: "xcode-select -p", conda: { skip: true } }, (stream) => { })
       let e2 = /(.*Library.*Developer.*CommandLineTools.*|.*Xcode.*Developer.*)/gi.test(stdout)
@@ -493,7 +492,7 @@ class Bin {
         e4 = /xcode-select version ([0-9]+)/gi.exec(result.stdout)
         if (e4 && e4.length > 1) {
           let version = Number(e4[1]) 
-          console.log("xcode-select version", version)
+//          console.log("xcode-select version", version)
           if (version >= 2349) {
             e4 = true
           } else {

package/kernel/index.js

@@ -257,12 +257,12 @@ class Kernel {
     }
 //    console.log("kernel.refresh", { active, notify_peers })
 
-//    let caddy_installed = await this.bin.check_installed({ name: "caddy" })
+    let caddy_installed = await this.bin.check_installed({ name: "caddy" })
 
     // 1. https
     // 2. https + local share
 //    console.log("caddy installed?", caddy_installed)
-//    if (caddy_installed && https_active) {
+    if (caddy_installed && https_active) {
 
       // 1. get the process list
       await this.processes.refresh()
@@ -293,7 +293,7 @@ class Kernel {
       // 9. announce self to the peer network
       this.peer.announce()
       
-//    }
+    }
 
     //if (https_installed && peer_active) {
 

package/kernel/loader.js

@@ -43,12 +43,14 @@ class Loader {
   async requireJSON(filepath) {
     let config
     try { config = require(filepath) } catch (e) {
+      console.log(e)
     }
     return config
   }
   async requireJS(filepath) {
     let config
     try { config = require(filepath) } catch (e) {
+      console.log(e)
     }
     try {
       // if the required module is a class, return the instantiated object

package/kernel/router/index.js

@@ -33,7 +33,6 @@ class Router {
     this.custom_routers = {}
   }
   async init() {
-    console.log("router.init")
     // if ~/pinokio/network doesn't exist, clone
     let exists = await this.kernel.exists("network/system")
     if (!exists) {
@@ -190,7 +189,6 @@ class Router {
       await this.fill()
     }
     this.mapping = this._mapping
-    console.log("after local()", JSON.stringify(this.mapping, null, 2))
   }
 
   // set remote config

package/kernel/router/peer_port_router.js

@@ -9,9 +9,7 @@ class PeerPortRouter extends Processor {
   }
   handle(peer) {
     let https_domains_mapping = this.router.info[peer.host]
-    console.log({ https_domains_mapping })
     for(let dial in https_domains_mapping) {
-      console.log({ dial })
       let parsed_dial = this.parse_ip(dial)
       if (parsed_dial.host !== peer.host) {
         // ONLY connect for 127.0.0.1 or localhost

package/kernel/shells.js

@@ -99,6 +99,7 @@ class Shells {
       break: false
     }]
     params.on = params.on.concat(defaultHandlers)
+
     let response = await sh.start(params, async (stream) => {
       /*
         {
@@ -462,6 +463,9 @@ class Shells {
         return shell.group === group
       })
       return found
+    } else if (request.filter) {
+      let found = this.shells.filter(request.filter)
+      return found
     }
   }
   get(id) {

package/package.json

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

package/server/index.js

@@ -19,7 +19,7 @@ const semver = require('semver')
 const fse = require('fs-extra')
 const QRCode = require('qrcode')
 const axios = require('axios')
-
+const crypto = require('crypto')
 
 const git = require('isomorphic-git')
 const http = require('isomorphic-git/http/node')
@@ -1126,6 +1126,7 @@ class Server {
 
           // check if there is a running process with this folder name
           let runningApps = new Set()
+          console.log("API RUNNING", this.kernel.api.running)
           for(let key in this.kernel.api.running) {
             let p = this.kernel.path("api", items[i].name) + path.sep
             //let re = new RegExp(items[i].name)
@@ -1143,6 +1144,17 @@ class Server {
               running.push(items[i])
 //              break
             }
+            let shell = this.kernel.shell.find({
+              filter: (shell) => {
+                return shell.id.startsWith(items[i].name + "_")
+              }
+            })
+            if (shell.length > 0) {
+              items[i].running = true
+              items[i].index = index
+              index++;
+              running.push(items[i])
+            }
           }
           if (!items[i].running) {
             items[i].index = index
@@ -1156,6 +1168,7 @@ class Server {
 
       running = this.getItems(running, meta, p)
       notRunning = this.getItems(notRunning, meta, p)
+      console.log({ notRunning })
 
       // check running for each
       // running_items
@@ -1423,6 +1436,61 @@ class Server {
           menuitem.href = menuitem.href + "?" + new URLSearchParams(menuitem.params).toString();
         }
 
+
+        if (menuitem.shell) {
+          /*
+            shell :- {
+              id (optional),
+              path (required),    // api, bin, prototype, network, api/
+              message (optional), // if not specified, start an empty shell
+              venv,
+              input,              // input mode if true
+              callback,           // callback url after shutting down
+              kill,               // when to kill (regular expression)
+            }
+          */
+
+          let rendered = this.kernel.template.render(menuitem.shell, {})
+          let params = new URLSearchParams()
+//          if (rendered.id) {
+//            params.set("id", encodeURIComponent(rendered.id))
+//          } else {
+//            let shell_id = "sh_" + name + "_" + i
+//            params.set("id", encodeURIComponent(shell_id))
+//          }
+          let basePath = this.kernel.path("api", name)
+          if (rendered.path) {
+            params.set("path", encodeURIComponent(this.kernel.api.filePath(rendered.path, basePath)))
+          } else {
+            params.set("path", encodeURIComponent(basePath))
+          }
+          if (rendered.message) params.set("message", encodeURIComponent(rendered.message))
+          if (rendered.venv) params.set("venv", encodeURIComponent(rendered.venv))
+          if (rendered.input) params.set("input", true)
+          if (rendered.callback) params.set("callback", encodeURIComponent(rendered.callback))
+          if (rendered.env) {
+            for(let key in rendered.env) {
+              let env_key = "env." + key
+              params.set(env_key, rendered.env[key])
+            }
+          }
+
+          // deterministic shell id generation
+          // `${api_path}_${i}_${hash}`
+          let hash = crypto.createHash('md5').update(JSON.stringify(rendered)).digest('hex')
+          let shell_id
+          if (rendered.id) {
+            shell_id = encodeURIComponent(`${name}_${rendered.id}`)
+          } else {
+            shell_id = encodeURIComponent(`${name}_${i}_${hash}`)
+          }
+          menuitem.href = "/shell/" + shell_id + "?" + params.toString()
+          let shell = this.kernel.shell.get(shell_id)
+          if (shell) {
+            menuitem.running = true
+          }
+        }
+
         if (menuitem.href) {
           let u
           if (menuitem.href.startsWith("http")) {
@@ -2222,12 +2290,12 @@ class Server {
     //let home = this.kernel.store.get("home")
     this.app.get("/", ex(async (req, res) => {
       // check bin folder
-      let bin_path = this.kernel.path("bin/miniconda")
-      let bin_exists = await this.exists(bin_path)
-      if (!bin_exists) {
-        res.redirect("/setup")
-        return
-      }
+//      let bin_path = this.kernel.path("bin/miniconda")
+//      let bin_exists = await this.exists(bin_path)
+//      if (!bin_exists) {
+//        res.redirect("/setup")
+//        return
+//      }
       
 
       if (req.query.mode !== "settings" && !home) {
@@ -2456,14 +2524,60 @@ class Server {
         })
       }
     }))
-    this.app.get("/terminal/:api/:id", ex(async (req, res) => {
-      res.render("minterm", {
+    this.app.get("/shell/:id", ex(async (req, res) => {
+      /*
+        req.query := {
+          path (required),    // api, bin, prototype, network, api/
+          message (optional), // if not specified, start an empty shell
+          venv,
+          callback,
+          kill,               // regex for killing
+          env.<key1>,
+          env.<key2>,
+          ...
+        }
+      */
+
+      console.log("SHELLS", this.kernel.shell.shells.map((s) => { return { id: s.id, message: s.params.message } }))
+      // create a new term from cwd
+      let id = decodeURIComponent(req.params.id)
+      let cwd = this.kernel.path(this.kernel.api.filePath(decodeURIComponent(req.query.path)))
+      let message = req.query.message ? decodeURIComponent(req.query.message) : null
+      let venv = req.query.venv ? decodeURIComponent(req.query.venv) : null
+      let input = req.query.input ? true : false
+      let callback = req.query.callback ? decodeURIComponent(req.query.callback) : null
+      let env = {}
+      for(let env_key in req.query) {
+        if (env_key.startsWith("env.")) {
+          let chunks = env_key.split(".")
+          let key = chunks.slice(1).join(".")
+          env[key] = req.query[env_key]
+        }
+      }
+
+      let shell = this.kernel.shell.get(id)
+      console.log({ shell })
+      res.render("shell", {
         theme: this.theme,
         agent: this.agent,
-        cwd: this.kernel.path("api/" + req.params.api),
-        id: req.params.id
+        id,
+        cwd,
+        message,
+        venv,
+        env,
+        input,
+        callback,
+        running: (shell ? true : false)
       })
     }))
+//    this.app.get("/terminal/:api/:id", ex(async (req, res) => {
+//      res.render("shell", {
+//        theme: this.theme,
+//        agent: this.agent,
+//        cwd: this.kernel.path("api/" + req.params.api),
+//        id: req.params.id
+//      })
+//    }))
     this.app.get("/peer_check", ex(async (req, res) => {
       if (this.kernel.peer.refreshing) {
         res.json({ updated: false })
@@ -2532,7 +2646,7 @@ class Server {
       })
       console.log({ requirements, install_required, requirements_pending })
 
-      if (install_required) {
+      if (!requirements_pending && install_required) {
         res.redirect("/setup/network?callback=/network")
         return
       }
@@ -2617,6 +2731,8 @@ class Server {
         }
       }
 
+
+
       res.render("network", {
         current_host: this.kernel.peer.host,
         peers,
@@ -3774,6 +3890,7 @@ class Server {
     this.app.post("/network", ex(async (req, res) => {
       if (this.kernel.homedir) {
         let fullpath = path.resolve(this.kernel.homedir, "ENVIRONMENT")
+        console.log("req.body", req.body)
         await Util.update_env(fullpath, req.body)
         res.json({ success: true })
       } else {

package/server/public/commander.js

@@ -0,0 +1,40 @@
+const Commander = async (config) => {
+  console.log({ config })
+  let result = await Swal.fire({
+    title: `<i class='${config.icon}'></i> ${config.title}`,
+    html: `<div class='commander-dialog'>${config.description}</div>
+  <input style='width:100%; padding: 10px;' class='cmd' type='text' placeholder='${config.placeholder}'>`,
+    allowOutsideClick: true,
+    focusConfirm: false,
+//    showCancelButton: true,
+    confirmButtonText: 'OK',
+    didOpen: () => {
+      const input = document.querySelector(".cmd")
+      input.focus()
+    },
+    preConfirm: () => {
+      let message = config.message(Swal.getPopup().querySelector(".cmd").value)
+      let path = config.path
+      let callback = config.callback
+      let search_params = new URLSearchParams()
+      search_params.set("message", message)
+      if (config.callback) {
+        search_params.set("callback", config.callback)
+      }
+      search_params.set("path", config.path)
+      if (config.venv) {
+        search_params.set("venv", config.venv)
+      }
+
+      // env
+      if (config.env) {
+        for(let key in config.env) {
+          search_params.set("env." + key, config.env[key])
+        }
+      }
+      let terminal_path = "/shell/" + config.id + "?" + search_params.toString()
+      location.href = terminal_path
+    }
+  })
+  console.log({ result })
+}

package/server/public/style.css

@@ -571,6 +571,16 @@ body.fullscreen .btn {
   border: 1px solid rgba(0,0,0,0.1);
   */
 }
+body.dark .commander-dialog {
+  background: rgba(255,255,100,0.08);
+}
+.commander-dialog {
+  font-size: 14px;
+  text-align: left;
+  margin-bottom: 10px;
+  padding: 15px;
+  background: rgba(0,0,100,0.04);
+}
 .runnables {
   padding: 20px;
   box-sizing: border-box;
@@ -1067,7 +1077,7 @@ body.dark .line i {
   /*
   padding: 10px;
   */
-  padding: 4px;
+  padding: 8px;
   /*
   width: 40px;
   height: 40px;
@@ -1681,7 +1691,7 @@ body.dark .not-running-apps, body.dark .running-apps {
 }
 */
 .running-apps .line img {
-  background: #82bc09;
+  border: 3px solid  #82bc09;
   /*
   border: 3px solid #8fd400;
   */

package/server/socket.js

@@ -19,6 +19,7 @@ class Socket {
       });
       ws.on('message', async (message) => {
         const req = JSON.parse(message);
+        console.log({ req })
         if (req.response) {
           this.parent.kernel.api.respond(req)
         } else {
@@ -89,7 +90,17 @@ class Socket {
               let buf = this.buffer[req.id]
               let sh = this.active_shell[req.id]
               this.subscribe(ws, req.id, buf, sh)
-              if (!sh) {
+              if (sh) {
+                // if the active shell exists, check if it's killed
+                // 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) {
+                  this.parent.kernel.api.process(req)
+                }
+                // if it's not killed, don't do anything
+              } else {
                 this.parent.kernel.api.process(req)
               }
             } else {

package/server/views/app.ejs

@@ -686,9 +686,11 @@ body.dark .loader-container {
     <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>
+    <!--
     <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>

package/server/views/network.ejs

@@ -12,6 +12,7 @@
 <link href="/noty.css" rel="stylesheet"/>
 <link href="/style.css" rel="stylesheet"/>
 <script src="/sweetalert2.js"></script>
+<script src="/commander.js"></script>
 <% if (agent === "electron") { %>
   <link href="/electron.css" rel="stylesheet"/>
 <% } %>
@@ -200,6 +201,7 @@ a.ln:hover {
   box-sizing: border-box;
 }
 .container-row.current {
+  background: rgba(0,0,255,0.08);
 }
 /*
 .container-row.current .header-label-sub {
@@ -212,6 +214,11 @@ a.ln:hover {
   */
   padding: 10px 0;
 }
+#advanced-label {
+  text-decoration: underline;
+  color: royalblue;
+  cursor: pointer;
+}
 .container-row table {
   width: 100%;
 }
@@ -266,14 +273,16 @@ td:first-child, th:first-child {
 .config-row {
   padding: 10px 20px 0 0;
 }
-.config-row .label {
+.label {
   padding-bottom: 5px;
   font-weight: bold;
 }
 .config-row input[type=text] {
   padding: 7px;
 }
-
+.btn.save {
+  padding: 8px;
+}
 .switcher {
   position: relative;
   display: inline-block;
@@ -340,6 +349,22 @@ input:checked + .slider:before {
   text-align: center;
   padding: 50px;
 }
+.advanced a.btn {
+  text-align: center;
+}
+.advanced {
+  margin: 20px 0;
+}
+.advanced h3 {
+  margin: 0 0 5px;
+}
+.advanced .row {
+  display: flex;
+}
+.advanced input[type=text] {
+  flex-grow: 1;
+  padding: 10px;
+}
 
 
 @media only screen and (max-width: 480px) {
@@ -377,8 +402,9 @@ input:checked + .slider:before {
   <div class='config'>
     <div class='config-header'>
       <div class='header-label'><i class='fa-solid fa-wifi'></i> Network</div>
-      <div class='desc'>Serve Pinokio, installed apps, and even external apps to any device on the same network.</div>
+      <div class='desc'>Instant HTTPS for every app on your local network.</div>
     </div>
+    <!--
     <div class='config-body'>
       <div class='config-row'>
         <div class='label'>Instant HTTPS</div>
@@ -388,21 +414,41 @@ input:checked + .slider:before {
         </label>
       </div>
     </div>
+    -->
     <div class='config-body'>
+      <!--
       <div class='config-row'>
-        <div class='label'>Network Share</div>
+        <div class='label'>Local Network Share</div>
         <label class="switcher">
           <input id='peer_active' type="checkbox" <%=peer_active ? 'checked' : ''%>>
           <span class="slider"></span>
         </label>
       </div>
+      -->
+      <div class='config-row'>
+        <div id='active-label' class='label'><%=peer_active ? "On" : "Off"%></div>
+        <label class="switcher">
+          <input id='active' type="checkbox" <%=peer_active ? 'checked' : ''%>>
+          <span class="slider"></span>
+        </label>
+      </div>
       <div class='config-row' id='network_name'>
         <div class='label'>Network Name</div>
         <input id='name' type='text' value="<%=name%>">
       </div>
-      <div class='flexible'></div>
       <button class='btn save'>Save</button>
     </div>
+    <div class='advanced'>
+      <div class='row'>
+        <div id='advanced-label' class='label'>Advanced</div>
+      </div>
+      <!--
+      <div id='advanced-input' class='row hidden'>
+        <input id='git' type='text' placeholder='git url for custom network router'>
+        <a id="custom_download" class='btn'>Install</a>
+      </div>
+      -->
+    </div>
   </div>
   <div class='loading hidden'>
     <i class="fa-solid fa-circle-notch fa-spin"></i> Stand by. Do not close this window..
@@ -549,19 +595,36 @@ input:checked + .slider:before {
   </div>
 </main>
 <script>
-if (document.querySelector("#peer_active").checked) {
+document.querySelector("#advanced-label").addEventListener("click", (e) => {
+  //document.querySelector("#advanced-input").classList.toggle("hidden") 
+  Commander({
+    callback: "/network",
+    path: "~/network",
+    icon: "fa-solid fa-circle-down",
+    title: "Custom Router",
+    placeholder: "enter a custom router git url",
+    description: `<div>you can write your own custom routers to handle custom request handling for any port <a target="_blank" href="https://program.pinokio.computer">Learn more</a></div>`,
+    message: (url) => {
+      let name = new URL(url).pathname.split("/").slice(-2).join("_")
+      return encodeURIComponent(`git clone ${url} ${name}`)
+    }
+  })
+})
+if (document.querySelector("#active").checked) {
   console.log("checked")
   document.querySelector("#network_name").classList.remove("hidden")
 } else {
   console.log("not checked")
   document.querySelector("#network_name").classList.add("hidden")
 }
-document.querySelector("#peer_active").addEventListener("change", (e)=> {
+document.querySelector("#active").addEventListener("change", (e)=> {
   console.log(e.target.checked)
   if (e.target.checked) {
     document.querySelector("#network_name").classList.remove("hidden")
+    document.querySelector("#active-label").innerHTML = "On"
   } else {
     document.querySelector("#network_name").classList.add("hidden")
+    document.querySelector("#active-label").innerHTML = "Off"
   }
 })
 document.querySelector("main").addEventListener("click", async (e) => {
@@ -574,13 +637,20 @@ document.querySelector("main").addEventListener("click", async (e) => {
   }
 
   if (target) {
+    let active = document.querySelector("#active").checked ? "1": "0"
+    let body = {
+      PINOKIO_NETWORK_NAME: document.querySelector("#name").value,
+      PINOKIO_NETWORK_ACTIVE: active,
+      PINOKIO_HTTPS_ACTIVE: active,
+    }
+    /*
     let body = {
-      PINOKIO_NETWORK_NAME: document.querySelector("#network_name").value,
+      PINOKIO_NETWORK_NAME: document.querySelector("#name").value,
       PINOKIO_NETWORK_ACTIVE: (document.querySelector("#peer_active").checked ? "1": "0"),
       PINOKIO_HTTPS_ACTIVE: (document.querySelector("#https_active").checked ? "1": "0")
     }
+    */
     console.log(body)
-    debugger
     let r = await fetch("/network", {
       method: "post",
       headers: { "Content-Type": "application/json" },

package/server/views/prototypes.ejs

@@ -141,6 +141,9 @@ body.dark .badge {
   height: 20px;
   margin-right: 10px;
 }
+.prototype-header {
+  padding: 10px;
+}
 /*
 body.dark .browser-options-row {
   border-top: 1px solid rgba(255,255,255,0.05);
@@ -183,6 +186,7 @@ body.dark .browser-options-row {
 <script src="/filepond-plugin-image-transform.min.js"></script>
 <script src="/filepond.min.js"></script>
 <script src="/fscreator.js"></script>
+<script src="/commander.js"></script>
 </head>
 <body class='<%=theme%>'>
 <header class='navheader grabbable'>
@@ -213,6 +217,9 @@ body.dark .browser-options-row {
 <main>
 <div id='terminal' class='hidden'></div>
 <div class='container'>
+  <div class='prototype-header'>
+    <a class='btn' id='download'><i class='fa-solid fa-download'></i> Download a prototype</a>
+  </div>
   <div class='folder-templates drawer'>
     <% items.forEach((folder, i) => { %>
       <a href="/prototypes/<%=folder.id%>" class='line folder' data-id="<%=folder.id%>" data-icon="<%=folder.icon%>" data-name="<%=folder.title%>" data-description="<%=folder.description || ''%>" data-title="<%=folder.title%>" data-index="<%=i%>">
@@ -312,6 +319,20 @@ const renderSearch = () => {
 
 renderSearch()
 
+document.querySelector("#download").addEventListener("click", (e) => {
+  Commander({
+    callback: "/new",
+    path: "~/prototype",
+    icon: "fa-solid fa-circle-down",
+    title: "Download a Prototype",
+    placeholder: "enter a custom prototype git url",
+    description: `<div>prototypes are recipes for automatically bootstrapping projects. You can write your own custom prototypes <a target="_blank" href="https://program.pinokio.computer">Learn more</a></div>`,
+    message: (url) => {
+      let name = new URL(url).pathname.split("/").slice(-2).join("_")
+      return encodeURIComponent(`git clone ${url} ${name}`)
+    }
+  })
+})
 document.querySelector("form input[type=search]").addEventListener("input", (e) => {
   selectedIndex = 0
   selectedBtnIndex = 0

package/server/views/setup_home.ejs

@@ -153,11 +153,21 @@ body.dark .card {
 <a class='path' href="/"><%-logo%></a>
 <div class='flexible'></div>
 <div class='nav-btns'>
-  <button class='btn2' id='report'><div><i class="fa-solid fa-bug"></i></div><div>Report Bug</div></button>
-  <a class='btn2' href='https://discord.gg/TQdNwadtE4' target="_blank"><div><i class="fa-brands fa-discord"></i></div><div>Discord</div></a>
-  <a class='btn2' href='https://twitter.com/cocktailpeanut' target="_blank"><div><i class="fa-brands fa-twitter"></i></div><div>Twitter</div></a>
+  <a href="/network" class='btn2'><div><i class="fa-solid fa-wifi"></i></div><div>Network</div></a>
+  <a class='btn2' href="https://portal.pinokio.computer/" target="_blank"><div><i class="fa-solid fa-question"></i></div><div>Help</div></a>
+  <% if (agent === "electron") { %>
+    <a class='btn2' data-filepath="<%=filepath%>"><div><i class="fa-regular fa-folder-open"></i></div><div>Files</div></a>
+  <% } %>
+  <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Debug</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>
+  <% if (agent === "electron") { %>
+    <a href="/" target="_blank" class='btn2' features="browser"><div><i class="fa-solid fa-square-up-right"></i></div><div>Open</div></a>
+  <% } else { %>
+    <a href="/" target="_blank" class='btn2'><div><i class="fa-solid fa-square-up-right"></i></div><div>Open</div></a>
+  <% } %>
   <button id='new-window' title='open a new window' class='btn2'><i class="fa-solid fa-plus"></i></button>
+
 </div>
 </h1>
 </h1>

package/server/views/{minterm.ejs → shell.ejs}

@@ -157,6 +157,9 @@ document.addEventListener("DOMContentLoaded", async () => {
         text: `[Success] All steps complete`,
       })
       */
+      document.querySelector(".play-btn").classList.remove("hidden")
+      document.querySelector(".stop-btn").classList.add("hidden")
+      document.querySelector(".starting-btn").classList.add("hidden")
     }
     stop() {
       this.socket.run({
@@ -197,21 +200,42 @@ document.addEventListener("DOMContentLoaded", async () => {
         let query = Object.fromEntries(new URLSearchParams(location.search))
         console.log(">>>>>>>> 1")
 
+        let firstPacketReceived = false
         this.socket.run({
-          method: "kernel.bin.shell_start",
-          input: true,
+          //method: "kernel.bin.shell_start",
+          method: "kernel.bin.exec",
+          <% if (message) { %>
+            message: "<%=message%>",
+          <% } %>
+          <% if (venv) { %>
+            venv: "<%=venv%>",
+          <% } %>
+          <% if (input) { %>
+            input: true,
+          <% } %>
+          <% if (env) { %>
+          env: <%-JSON.stringify(env)%>,
+          <% } %>
           id: "<%=id%>",
-//          params: {
-            path: "<%=cwd%>",
-//          },
+          path: "<%=cwd%>",
           client: {
             cols: this.term.cols,
             rows: this.term.rows,
           }
         }, async (packet) => {
-          console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ", { packet })
+          if (!firstPacketReceived) {
+            refreshParent({
+              type: "start"
+            })
+            firstPacketReceived = true
+          }
+          console.log({ packet, type: packet.type })
           if (packet.type === 'start') {
+            console.log("refreshParent", packet)
             refreshParent(packet)
+            document.querySelector(".play-btn").classList.add("hidden")
+            document.querySelector(".starting-btn").classList.add("hidden")
+            document.querySelector(".stop-btn").classList.remove("hidden")
             if (packet.data && packet.data.description) {
               if ('current' in packet.data) {
                 document.querySelector("footer").innerHTML = `<b>
@@ -255,12 +279,20 @@ document.addEventListener("DOMContentLoaded", async () => {
               this.write(JSON.stringify(packet.data.json2, null, 2).replace(/\n/g, "\r\n"))
               this.write("\r\n")
             }
+            document.querySelector(".play-btn").classList.add("hidden")
+            document.querySelector(".starting-btn").classList.add("hidden")
+            document.querySelector(".stop-btn").classList.remove("hidden")
           } else if (packet.type === 'disconnect') {
+            console.log("refreshParent", packet)
             refreshParent(packet)
             this.term.write("\r\nDisconnected...\r\n")
             document.querySelector("footer").innerHTML = "<b>Ready</b>"
             this.socket.close()
+            document.querySelector(".play-btn").classList.remove("hidden")
+            document.querySelector(".stop-btn").classList.add("hidden")
           } else if (packet.type === 'connect') {
+            console.log("refreshParent", packet)
+            refreshParent(packet)
             if (packet.data) {
               if (packet.data.shell) {
                 shell_id = packet.data.shell
@@ -269,39 +301,9 @@ document.addEventListener("DOMContentLoaded", async () => {
                 this.write(packet.data.state)
               }
             }
-            /*
-            for(let i=0; i<message.length; i++) {
-              await new Promise((r, reject) => {
-                setTimeout(()=> {
-                  this.term.write(message[i])
-                  r()
-                }, 20)
-              })
-            }
-            */
-            console.log(">>>>>>>> 2")
-//          } else if (packet.type === "key.set") {
-//            let keys = await fetch("/pinokio/keys").then((res) => {
-//              return res.json()
-//            })
-//            let input = await ModalInput({
-//              title: "Key",
-//              description: "select a key",
-//              form: [{
-//                key: "key",
-//                type: "select",
-//                items: keys,
-//              }, {
-//                key: "password",
-//                type: "password",
-//              }]
-//            })
-//            if (input) {
-//              this.socket.respond({
-//                response: input,
-//                uri: "~" + location.pathname,
-//              })
-//            }
+            document.querySelector(".play-btn").classList.add("hidden")
+            document.querySelector(".starting-btn").classList.add("hidden")
+            document.querySelector(".stop-btn").classList.remove("hidden")
           } else if (packet.type === 'wait.end') {
             try {
               Swal.close()
@@ -435,7 +437,7 @@ document.addEventListener("DOMContentLoaded", async () => {
               n.Noty(payload)
             }
           } else if (packet.type === "result") {
-            refreshParent(packet)
+            this.socket.close()
           } else if (packet.type === "info") {
             n.Noty({
               text: `${packet.data}`,
@@ -457,6 +459,10 @@ document.addEventListener("DOMContentLoaded", async () => {
 //            document.querySelector("footer").classList.add("expanded")
             document.querySelector("footer i").className = "fa-solid fa-triangle-exclamation"
 
+            document.querySelector(".play-btn").classList.remove("hidden")
+            document.querySelector(".starting-btn").classList.add("hidden")
+            document.querySelector(".stop-btn").classList.add("hidden")
+
             document.querySelector("#error-screen").classList.remove("hidden")
             document.querySelector("#error-screen pre").textContent = packet.data
             let instance = new Mark(document.querySelector("#error-screen pre"), {
@@ -477,6 +483,8 @@ document.addEventListener("DOMContentLoaded", async () => {
 
           } else if (packet.type === "event") {
             if (packet.data === "stop") {
+              document.querySelector(".stop-btn").classList.add("hidden")
+              document.querySelector(".stopped-btn").classList.remove("hidden")
               document.querySelector("footer").innerHTML = "<b>Ready</b>"
               setTimeout(() => {
 
@@ -513,6 +521,9 @@ document.addEventListener("DOMContentLoaded", async () => {
                   type: 'success'
                 })
                 */
+                document.querySelector(".play-btn").classList.remove("hidden")
+                document.querySelector(".starting-btn").classList.add("hidden")
+                document.querySelector(".stop-btn").classList.add("hidden")
               }, 0)
               //this.socket.close()
             }
@@ -534,6 +545,15 @@ document.addEventListener("DOMContentLoaded", async () => {
 //          this.fit.fit()
 //          let pageBottom = document.querySelector("#end")
 //          pageBottom.scrollIntoView()
+        }).then(() => {
+          refreshParent({
+            type: "disconnect"
+          })
+          document.querySelector(".stop-btn").classList.add("hidden")
+          document.querySelector(".stopped-btn").classList.remove("hidden")
+          <% if (callback) { %>
+          location.href = "<%=callback%>"
+          <% } %>
         })
       })
     }
@@ -649,7 +669,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     }
   }
   const rpc = new RPC()
-  document.querySelector(".stop").addEventListener("click", async (e) => {
+  document.querySelector(".stop-btn").addEventListener("click", async (e) => {
     await rpc.stop()
 //    socket.run({
 //      id: location.pathname,
@@ -657,13 +677,31 @@ document.addEventListener("DOMContentLoaded", async () => {
 //    }, (stream) => {
 //      console.log("#", stream)
 //    })
-/*
-    document.querySelector(".run .play").classList.remove("hidden")
-    document.querySelector(".run .starting").classList.add("hidden")
-    */
+
+
+    document.querySelector(".play-btn").classList.remove("hidden")
+    document.querySelector(".starting-btn").classList.add("hidden")
     document.querySelector(".stop-btn").classList.add("hidden")
     document.querySelector(".stopped-btn").classList.remove("hidden")
   })
+  document.querySelector(".play-btn").addEventListener("click", async (e) => {
+    document.querySelector(".play-btn").classList.add("hidden")
+    document.querySelector(".starting-btn").classList.remove("hidden")
+    await rpc.run()
+  })
+  <% if (running) { %>
+    // if running, connect
+    rpc.run("listen")
+    // hide play button
+    document.querySelector(".play-btn").classList.add("hidden")
+    // show stop button
+    document.querySelector(".stop-btn").classList.remove("hidden")
+  <% } else { %>
+    // if not running, start
+    rpc.run()
+    // show starting button
+    document.querySelector(".starting-btn").classList.remove("hidden")
+  <% } %>
 
   window.addEventListener('message', function(event) {
     console.log("Message received from the parent: ", event.data); // Message received from parent
@@ -681,7 +719,7 @@ document.addEventListener("DOMContentLoaded", async () => {
       }
     }
   });
-  rpc.run()
+//  rpc.run()
 })
 
 </script>
@@ -689,10 +727,16 @@ document.addEventListener("DOMContentLoaded", async () => {
 <body class='<%=theme%>'>
   <header class='navheader grabbable'>
     <div class='navheader3'>
-      <div class='btn run stop-btn'>
+      <div class='hidden btn run play-btn'>
+        <span class='play'><i class="fa-solid fa-play"></i> Start</span>
+      </div>
+      <div class='hidden btn run starting-btn'>
+        <span class='starting'><i class="fa-solid fa-circle-notch fa-spin"></i> Starting...</span>
+      </div>
+      <div class='hidden btn run stop-btn'>
         <span class='stop'><i class="fa-solid fa-stop"></i> Stop</span>
       </div>
-      <div class='btn stopped-btn hidden'>
+      <div class='hidden btn stopped-btn'>
         <span class='stopped'><i class="fa-solid fa-hand"></i> Stopped</span>
       </div>
     </div>