pinokiod 1.3.90 → 1.3.92

package/kernel/api/cloudflare/index.js

@@ -1,18 +1,37 @@
 const { yellow, green, blue  } = require('kleur');
 const QRCode = require('qrcode');
+const path = require('path')
+const Util = require('../../util')
 class C {
   async tunnel (req, ondata, kernel) {
     /*
       {
         "method": "cloundflare.tunnel",
         "params": {
-          "uri": "{{local.url}}"
+          "uri": "{{local.url}}",
+          "passcode": (optional)
         }
       }
 
       => cloudflared tunnel --url http://localhost:8080
     */
-    const message = `cloudflared tunnel --url ${req.params.uri}`
+
+
+    let pipe_uri
+    if (req.params.passcode) {
+      // 1. start a pipe server => needed for authentication
+      const api_path = Util.api_path(req.parent.path, kernel)
+      const pinokio_path = path.resolve(api_path, "pinokio.js")
+      const config  = (await kernel.loader.load(pinokio_path)).resolved
+      pipe_uri = await kernel.pipe.start(req.params.uri, req.parent.path, req.params.passcode, config)
+    } else {
+      // 2. if no passcode required, no need for a pipe server just use the original
+      pipe_uri = req.params.uri
+    }
+
+
+    // 2. run cloudflare tunnel on the proxy
+    const message = `cloudflared tunnel --url ${pipe_uri}`
     let params = {
       id: message,
       message
@@ -65,15 +84,24 @@ class C {
     if (!kernel.memory.local[req.parent.path].$share.cloudflare) {
       kernel.memory.local[req.parent.path].$share.cloudflare = {}
     }
-    kernel.memory.local[req.parent.path].$share.cloudflare[req.params.uri] = cloudflare_url
+    kernel.memory.local[req.parent.path].$share.cloudflare[pipe_uri] = cloudflare_url
 
     return { uri: cloudflare_url }
   }
   async stop (req, ondata, kernel) {
+    // stop the cloudflare shell
     const message = `cloudflared tunnel --url ${req.params.uri}`
     await kernel.shell.kill({
       id: message
     })
+
+    // stop pipe server
+    await kernel.pipe.stop(req.params.uri, req.parent.path)
+
+    // delete the local variable
+    delete kernel.memory.local[req.parent.path].$share.cloudflare[req.params.uri]
+
   }
+
 }
 module.exports = C

package/kernel/api/index.js

@@ -128,6 +128,10 @@ class Api {
     // stop all proxies
     this.stopProxy({ script: requestPath })
 
+    // stop all cloudflare tunnels
+
+    await this.kernel.stopCloudflare({ path: requestPath })
+
     // if there are any pending waiters, delete them
 
     if (this.waiter[requestPath]) {
@@ -538,7 +542,7 @@ class Api {
     // get fully resolved env
     let env = await Environment.get2(request.path, this.kernel)
     // set template
-    this.kernel.template.update(env)
+    this.kernel.template.update({ env })
 
     // render until `{{ }}` pattern does not exist
     // 1. render once

package/kernel/api/local/index.js

@@ -74,6 +74,9 @@ class Local {
         if (val === "true" || val === "1") {
           const c = new Cloudflare()
           req.params.uri = req.params[KEY]
+          if ("PINOKIO_SHARE_PASSCODE" in current_env) {
+            req.params.passcode = current_env.PINOKIO_SHARE_PASSCODE
+          }
           await c.tunnel(req, ondata, kernel)
         }
       }

package/kernel/environment.js

@@ -102,6 +102,48 @@ const ENVS = [{
     "#",
     "##########################################################################",
   ],
+}, {
+  type: ["system", "app"],
+  key: "PINOKIO_SHARE_CLOUDFLARE",
+  val: "false",
+  comment: [
+    "##########################################################################",
+    "#",
+    "# PINOKIO_SHARE_CLOUDFLARE",
+    "# Set this variable to share the app publicly via cloudflare tunnel.",
+    "#",
+    "##########################################################################",
+  ]
+}, {
+  type: ["app"],
+  key: "PINOKIO_SHARE_PASSCODE",
+  val: "",
+  comment: [
+    "##########################################################################",
+    "#",
+    "# PINOKIO_SHARE_PASSCODE",
+    "#",
+    "# By default, your publicly shared app will be 100% open to anyone",
+    "# with the link via Cloudflare.",
+    "#",
+    "# You can add authorization by protecting it with a passcode.",
+    "# Set this value, and any access to the app will require a pass code input",
+    "#",
+    "##########################################################################",
+  ],
+}, {
+  type: ["system", "app"],
+  key: "PINOKIO_SCRIPT_DEFAULT",
+  val: "true",
+  comment: [
+    "##########################################################################",
+    "#",
+    "# PINOKIO_SCRIPT_DEFAULT",
+    "# If this variable is false, 'default': true menu items in pinokio.js",
+    "# will NOT automatically run",
+    "#",
+    "##########################################################################",
+  ]
 }, {
   type: ["system"],
   key: "PINOKIO_DRIVE",
@@ -194,31 +236,6 @@ const ENVS = [{
     "#",
     "##########################################################################",
   ],
-}, {
-  type: ["system", "app"],
-  key: "PINOKIO_SHARE_CLOUDFLARE",
-  val: "false",
-  comment: [
-    "##########################################################################",
-    "#",
-    "# PINOKIO_SHARE_CLOUDFLARE",
-    "# Set this variable to share the app publicly via cloudflare tunnel.",
-    "#",
-    "##########################################################################",
-  ]
-}, {
-  type: ["system", "app"],
-  key: "PINOKIO_SCRIPT_DEFAULT",
-  val: "true",
-  comment: [
-    "##########################################################################",
-    "#",
-    "# PINOKIO_SCRIPT_DEFAULT",
-    "# If this variable is false, 'default': true menu items in pinokio.js",
-    "# will NOT automatically run",
-    "#",
-    "##########################################################################",
-  ]
 }];
 //const ENV = (homedir) => {
 //  const lines = ENVS.map((e) => {

package/kernel/index.js

@@ -22,6 +22,8 @@ const Environment = require("./environment")
 const Util = require('./util')
 const Config = require("./pinokio.json")
 const Info = require('./info')
+const Pipe = require("../pipe")
+const Cloudflare = require('./api/cloudflare')
 const VARS = {
   pip: {
     install: {
@@ -45,11 +47,33 @@ class Kernel {
     this.exposed = {}
     this.envs = {}
     this.info = new Info(this)
+    this.pipe = new Pipe(this)
+    this.cloudflare = new Cloudflare()
   }
   /*
     kernel.env() => return the system environment
     kernel.env("api/stablediffusion") => returns the full environment object
   */
+  async stopCloudflare(option) {
+    if (option.uri) {
+    } else if (option.path) {
+      let scriptPath = option.path
+      if (this.memory.local[scriptPath] && this.memory.local[scriptPath].$share) {
+        let cf = this.memory.local[scriptPath].$share.cloudflare
+        let uris = Object.keys(cf)
+        for(let uri of uris) {
+          await this.cloudflare.stop({
+            parent: {
+              path: scriptPath
+            },
+            params: { uri }
+          }, (e) => {
+            process.stdout.write(e.raw)
+          }, this)
+        }
+      }
+    }
+  }
   async env(...args) {
     let folderpath
     if (args) {
@@ -114,7 +138,10 @@ class Kernel {
     *  let available_port = await kernel.port()
     *
     **********************************************/
-    return portfinder.getPortPromise()
+    return portfinder.getPortPromise({
+      port: 42000
+    })
+    //return portfinder.getPortPromise()
   }
   path(...args) {
     return path.resolve(this.homedir, ...args)

package/kernel/sysinfo.js

@@ -122,8 +122,7 @@ class Sysinfo {
     }
 
 
-    this.info.env = process.env
-    //this.info.shell_env = vars
+//    this.info.env = process.env
     this.info.shell_env = lines
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "1.3.90",
+  "version": "1.3.92",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -12,6 +12,7 @@
     "7zip-min-win-asar-support": "^1.4.4",
     "async-retry": "^1.3.3",
     "axios": "^1.4.0",
+    "bcrypt": "^5.1.1",
     "clear-module": "^4.1.2",
     "compressing": "^1.10.0",
     "cookie-parser": "^1.4.6",
@@ -33,9 +34,10 @@
     "glob-gitignore": "^1.0.14",
     "handlebars": "^4.7.7",
     "http-proxy": "^1.18.1",
+    "http-proxy-middleware": "^3.0.0",
     "http-terminator": "^3.2.0",
     "isomorphic-git": "^1.23.0",
-    "jimini": "^0.0.5",
+    "jimini": "^0.0.6",
     "jsdom": "^24.0.0",
     "jsonpath-plus": "^7.2.0",
     "key-store": "^1.2.0",

package/pipe/index.js

@@ -0,0 +1,102 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+const path = require('path')
+const { createHttpTerminator } = require('http-terminator')
+const express = require('express')
+const session = require('express-session');
+const bcrypt = require('bcrypt');
+const cors = require('cors');
+class Pipe {
+  constructor(kernel) {
+    this.kernel = kernel
+    this.terminators = {}
+    this.procs = {}
+  }
+  authenticate (req, res, next) {
+    if (req.session.authenticated) {
+      next();
+    } else {
+      console.log("not authenticated. redirect /pionkio/login")
+      res.redirect('/pinokio/login');
+    }
+  }
+  // a pipe server for creating publicly shareable endpoints
+  async start(url, scriptPath, passcode, config) {
+
+    if (!config) config = {}
+    if (config.icon) {
+    }
+
+
+    let port = await this.kernel.port()
+    let app = express();
+    app.use(cors({ origin: '*' }));
+    app.use(express.urlencoded({ extended: true }));
+    app.set('view engine', 'ejs');
+    app.set("views", path.resolve(__dirname, "views"))
+//    app.use(express.static(path.resolve(__dirname, 'public')));
+    app.use(session({
+      secret: 'oikonip',
+      resave: false,
+      saveUninitialized: true
+    }));
+    app.get('/pinokio/login', (req, res) => {
+      res.render("login", { error: null, ...config })
+    });
+
+    app.post('/pinokio/login', async (req, res) => {
+      
+      const { password } = req.body;
+      
+      //if (await bcrypt.compare(password, hashedPassword)) {
+      if (password === passcode) {
+        req.session.authenticated = true;
+        res.redirect('/');
+      } else {
+        res.status(401).render("login", { error: "Invalid passcode", ...config })
+      }
+    });
+
+    app.get('/pinokio/logout', (req, res) => {
+      req.session.authenticated = false;
+      res.redirect('/login');
+    });
+
+
+    const proxy = createProxyMiddleware({
+      pathFilter: '/',
+      target: url,
+      ws: true
+    })
+
+    app.use('/', this.authenticate, proxy)
+
+
+    await new Promise((resolve, reject) => {
+      console.log("starting pipe server at port", port)
+      let server = app.listen(port, () => {
+        console.log(`Pipe server listening on port ${port}`)
+        resolve()
+      });
+      let terminator = createHttpTerminator({ server });
+      this.terminators[url] = terminator
+    })
+    let pipe_uri = `http://localhost:${port}`
+
+    // original url => pipe url
+    if (!this.procs[scriptPath]) {
+      this.procs[scriptPath] = {}
+    }
+    this.procs[scriptPath][url] = pipe_uri
+    return pipe_uri
+  }
+  async stop(url, scriptPath) {
+    console.log("stop pipe", { scriptPath, url, terminator: this.terminators[url] })
+    if (this.terminators[url]) {
+      await this.terminators[url].terminate()
+      delete this.terminators[url]
+      delete this.procs[scriptPath][url]
+    }
+  }
+}
+module.exports = Pipe

package/pipe/views/login.ejs

@@ -0,0 +1,78 @@
+<html>
+<head>
+<title>Pinokio</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+<style>
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  font-family: sans-serif;
+  font-size: 14px;
+  background: rgb(27, 28, 29);
+  color: white;
+}
+main {
+  max-width: 500px;
+  width: 100%;
+  text-align: center;
+  text-transform: lowercase;
+}
+main img {
+  width: 80px;
+  margin-bottom: 20px;
+}
+main form {
+  display: flex;
+}
+main input {
+  flex-grow: 1;
+  padding: 10px;
+  box-sizing: border-box;
+  border: none;
+  /*
+  background: rgba(0,0,0,0.06);
+  */
+  font-size: 14px;
+  border-radius: 0;
+
+}
+main button {
+  color: white;
+  background: royalblue;
+  padding: 10px;
+  box-sizing: border-box;
+  border: none;
+}
+.error {
+  border-left: 3px solid red;
+  color: red;
+  text-align: left;
+  padding: 5px 10px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+h1 {
+  letter-spacing: -1px;
+  margin-bottom: 20px;
+}
+</style>
+</head>
+<body>
+<main>
+<!--
+  <img src="/pinokio-black.png"/>
+  -->
+  <h1>PINOKIO</h1>
+  <form method="POST" action="/pinokio/login">
+    <input placeholder="enter passcode" type="password" name="password" required>
+    <button type="submit">Login</button>
+  </form>
+  <% if (error) { %>
+    <div class='error'><%=error%></div>
+  <% } %>
+<main>
+</body>
+</html>

package/server/index.js

@@ -172,6 +172,28 @@ class Server {
       }
     })
   }
+  async init_env(env_dir_path) {
+    let current = this.kernel.path(env_dir_path, "ENVIRONMENT")
+      // if environment.json doesn't exist, 
+    let exists = await this.exists(current)
+    if (exists) {
+      // if ENVIRONMENT already exists, don't do anything
+    } else {
+      // if ENVIRONMENT doesn't exist, need to create one
+      // 1. if _ENVIRONMENT exists, create ENVIRONMENT by appending _ENVIRONMENT to ENVIRONMENT
+      // 2. if _ENVIRONMENT doesn't exist, just write ENVIRONMENT
+      // if _ENVIRONMENT exists, 
+      let _environment = this.kernel.path(env_dir_path, "_ENVIRONMENT")
+      let _exists = await this.exists(_environment)
+      let content = await Environment.ENV("app")
+      if (_exists) {
+        let _environmentStr = await fs.promises.readFile(_environment, "utf8")
+        await fs.promises.writeFile(current, _environmentStr + "\n\n\n" + content)
+      } else {
+        await fs.promises.writeFile(current, content)
+      }
+    }
+  }
   async chrome(req, res, type) {
     let name = req.params.name
     let app_path = this.kernel.path("api", name, "pinokio.js")
@@ -230,26 +252,7 @@ class Server {
       }
     }
 
-    let current = this.kernel.path("api", name, "ENVIRONMENT")
-      // if environment.json doesn't exist, 
-    let exists = await this.exists(current)
-    if (exists) {
-      // if ENVIRONMENT already exists, don't do anything
-    } else {
-      // if ENVIRONMENT doesn't exist, need to create one
-      // 1. if _ENVIRONMENT exists, create ENVIRONMENT by appending _ENVIRONMENT to ENVIRONMENT
-      // 2. if _ENVIRONMENT doesn't exist, just write ENVIRONMENT
-      // if _ENVIRONMENT exists, 
-      let _environment = this.kernel.path("api", name, "_ENVIRONMENT")
-      let _exists = await this.exists(_environment)
-      let content = await Environment.ENV("app")
-      if (_exists) {
-        let _environmentStr = await fs.promises.readFile(_environment, "utf8")
-        await fs.promises.writeFile(current, content + "\n\n" + _environmentStr)
-      } else {
-        await fs.promises.writeFile(current, content)
-      }
-    }
+    await this.init_env("api/" + name)
 
     let mode = "run"
     if (req.query && req.query.mode) {
@@ -1872,9 +1875,15 @@ class Server {
       // stop proxies
       for(let scriptPath in this.kernel.api.proxies) {
         try {
+          // Turn off local sharing
           await this.kernel.api.stopProxy({
             script: scriptPath
           })
+
+          // Turn off cloudflare sharing
+          await this.kernel.stopCloudflare({
+            path: scriptPath
+          })
         } catch (e) {
         }
       }
@@ -2165,18 +2174,56 @@ class Server {
       }
     })
     this.app.post("/env", async (req, res) => {
-      console.log("req.body", req.body)
-      let fullpath = path.resolve(this.kernel.homedir, req.body.filepath)
+      let fullpath = path.resolve(this.kernel.homedir, req.body.filepath, "ENVIRONMENT")
       let updated = req.body.vals
       await Util.update_env(fullpath, updated)
       res.json({})
     })
+    this.app.get("/env", async (req, res) => {
+      let env_path = path.resolve(this.kernel.homedir)
+      await this.init_env(env_path)
+
+      let filepath = path.resolve(this.kernel.homedir, "ENVIRONMENT")
+      let editorpath = "/edit/ENVIRONMENT"
+
+      const items = await Util.parse_env_detail(filepath)
+
+
+      res.render("env_editor", {
+        config: null,
+        name: null,
+        init: null,
+        editorpath,
+        items,
+        theme: this.theme,
+        filepath,
+        agent: this.agent,
+      })
+    })
     this.app.get("/env/*", async (req, res) => {
+
+      let env_path = req.params[0]
+      await this.init_env(env_path)
+
       let pathComponents = req.params[0].split("/")
-      let filepath = path.resolve(this.kernel.homedir, req.params[0])
-      let editorpath = "/edit/" + req.params[0]
+      let filepath = path.resolve(this.kernel.homedir, req.params[0], "ENVIRONMENT")
+      let editorpath = "/edit/" + req.params[0] + "/ENVIRONMENT"
       const items = await Util.parse_env_detail(filepath)
+      let p = path.resolve(this.kernel.homedir, env_path, "pinokio.js")
+      let config  = (await this.kernel.loader.load(p)).resolved
+      if (config.icon) {
+        config.icon = `/${env_path}/${config.icon}?raw=true`
+      }
+
+      let name
+      if (env_path.startsWith("api")) {
+        name = env_path.split("/")[1]
+      }
+
       res.render("env_editor", {
+        config,
+        name,
+        init: req.query ? req.query.init : null,
         editorpath,
         items,
         theme: this.theme,
@@ -2184,12 +2231,45 @@ class Server {
         agent: this.agent,
       })
     })
+    this.app.get("/pre/api/:name", async (req, res) => {
+      let p = path.resolve(this.kernel.homedir, req.params.name, "pinokio.js")
+      let config  = (await this.kernel.loader.load(p)).resolved
+      if (config && config.pre) {
+        config.pre.forEach((item) => {
+          item.icon = `/api/${req.params.name}/${item.icon}?raw=true`
+        })
+        res.render("pre", {
+          name: req.params.name,
+          theme: this.theme,
+          agent: this.agent,
+          name: req.params.name,
+          items: config.pre
+        })
+      } else {
+        res.redirect("/env/" + req.params.name + "?init=true")
+      }
+    })
+    this.app.get("/initialize/:name", async (req, res) => {
+      let p = path.resolve(this.kernel.homedir, "api", req.params.name, "pinokio.js")
+      let config  = (await this.kernel.loader.load(p)).resolved
+      if (config) {
+        // if pinokio.js exists
+        if (config.pre && Array.isArray(config.pre)) {
+          // if pre exists, redirect to /pre/:name
+          res.redirect(`/pre/api/${req.params.name}`)
+        } else {
+          // if pre doesn't exist, redirect to /env/:name
+          res.redirect(`/env/api/${req.params.name}?init=true`)
+        }
+      } else {
+        // if pinokio.js doesn't exist, send to /browser/:name
+        res.redirect(`/pinokio/browser/${req.params.name}`)
+      }
+    })
     this.app.get("/share/:name", async (req, res) => {
       let filepath = path.resolve(this.kernel.homedir, "api", req.params.name, "ENVIRONMENT")
       //let filepath = path.resolve(this.kernel.homedir, req.params[0])
-      console.log("filepath", filepath)
       const config = await Util.parse_env(filepath)
-      console.log("config", config)
       const keys = [
         "PINOKIO_SHARE_CLOUDFLARE",
         "PINOKIO_SHARE_LOCAL",
@@ -2206,10 +2286,8 @@ class Server {
       })
       let cloudflare_links = []
       let local_links = []
-      console.log({ app_path, scripts })
       for(let script in this.kernel.memory.local) {
         let mem = this.kernel.memory.local[script]
-        console.log({ script, mem })
         if (mem.$share) {
           if (mem.$share.cloudflare) {
             for(let key in mem.$share.cloudflare) {
@@ -2802,47 +2880,6 @@ class Server {
       });
     })
 
-
-
-//    this.expose_app = express();
-//    this.expose_app.use(cors({
-//      origin: '*'
-//    }));
-//    this.expose_app.use('/', proxy(async (req) => {
-//      console.log("req.url", req.url)
-//      let tokens = req.url.split("/")
-//      console.log({ tokens })
-//      if (tokens.length >=2 ) {
-//        let app = tokens[1]
-//        console.log({ app })
-//        console.log("resolved = ", this.kernel.exposed[app])
-//        return this.kernel.exposed[app]
-//      }
-//    }, {
-////      proxyReqPathResolver: (req) => {
-////        console.log("proxyReqPathResolver", req.url)
-////        let chunks = req.url.split("/")
-////        let transformed
-////        if (chunks.length > 3) {
-////          transformed = "/" + chunks.slice(3).join("/")
-////        } else {
-////          transformed = "/"
-////        }
-////        console.log({ chunks, transformed })
-////        return transformed
-////      }
-//    }))
-//    this.expose_port = await portfinder.getPortPromise({ port: this.port })
-//    console.log("EXPOSE_PORT", this.expose_port)
-//    await new Promise((resolve, reject) => {
-//      this.expose_server = this.expose_app.listen(this.expose_port, () => {
-//        console.log(`Server listening on port ${this.expose_port}`)
-//        resolve()
-//      });
-//      this.exposeTerminator = createHttpTerminator({
-//        server: this.expose_server
-//      });
-//    })
   }
 }
 module.exports = Server

package/server/public/install.js

@@ -104,8 +104,8 @@ const install = async (name, url, term, socket, options) => {
     })
   } else {
     // ask the backend to create install.json and start.json if gradio
-    //location.href = `/?selected=${name}`
-    location.href = `/pinokio/browser/${name}`
+    //location.href = `/pinokio/browser/${name}`
+    location.href = `/initialize/${name}`
 
   }
 }

package/server/views/browser-experimental.ejs

@@ -561,7 +561,7 @@ body.dark .loader-container {
     <a target="/share/<%=name%>" href="/share/<%=name%>", class="btn header-item frame-link" data-index="1" data-mode="refresh">
       <div class='tab'><i class="fa-solid fa-wifi"></i> Share</div>
     </a>
-    <a target="/env/api/<%=name%>/ENVIRONMENT" href="/env/api/<%=name%>/ENVIRONMENT", class="btn header-item frame-link" data-index="1" data-mode="refresh">
+    <a target="/env/api/<%=name%>" href="/env/api/<%=name%>", class="btn header-item frame-link" data-index="1" data-mode="refresh">
       <div class='tab'><i class="fa-solid fa-gear"></i> Configure</div>
     </a>
   </div>

package/server/views/env_editor.ejs

@@ -73,13 +73,25 @@ td.key {
 .button:hover {
   
 }
-#editor {
-  box-sizing: border-box;
-  max-width: 800px;
-  padding: 20px;
-}
+<% if (init) { %>
+  main {
+    width: 100%;
+    box-sizing: border-box;
+    max-width: 600px;
+    padding: 20px;
+    margin: 0 auto;
+  }
+<% } else { %>
+  #editor {
+    width: 100%;
+    box-sizing: border-box;
+    max-width: 600px;
+    padding: 20px;
+    margin: 0 auto;
+  }
+<% } %>
+
 header .runner {
-  padding: 10px 0 0;
 }
 .disabled {
   opacity: 0.7;
@@ -119,6 +131,59 @@ body.dark .comment {
 #save {
   background: royalblue;
 }
+a#customize {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.e {
+  padding: 10px 0;
+}
+#editor {
+  padding: 20px 0;
+}
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+body {
+  display: block;
+}
+.card {
+  display: flex;
+  padding: 10px 0;
+  box-sizing: border-box;
+}
+.card img {
+  width: 100px;
+  border-radius: 10px;
+}
+.card .description {
+  opacity: 0.8;
+}
+.card .title {
+  font-weight: bold;
+  font-size: 30px;
+  letter-spacing: -1px;
+}
+.card .col {
+  padding-left: 10px;
+}
+h1 {
+  font-size: 50px;
+  font-family: georgia;
+  font-style: italic;
+}
+footer {
+  background: none;
+  padding: 0;
+  text-align: right;
+  display: block;
+  margin-bottom: 20px;
+}
+footer .btn {
+  margin-left: 10px;
+}
 </style>
 <script>
 document.addEventListener("DOMContentLoaded", async () => {
@@ -145,40 +210,70 @@ document.addEventListener("DOMContentLoaded", async () => {
       return res.json()
     })
     console.log("res" ,res)
-    n.Noty({
-      text: `Updated!`
-    })
+    <% if (init && name) { %>
+      location.href = "/pinokio/browser/<%=name%>"
+    <% } else { %>
+      n.Noty({
+        text: `Updated!`
+      })
+    <% } %>
   })
+  <% if (init) { %>
+    document.querySelector("#customize").addEventListener("click", (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      document.querySelector("#editor").classList.toggle("hidden")
+    })
+  <% } %>
 })
 </script>
 </head>
-<body class='columns <%=theme%>'>
-  <header class='navheader grabbable'>
-  <h1>
-    <a class='home' href="/"><i class="fa-solid fa-house"></i></a>
-    <%=filepath%>
-  </h1>
-  <div class='runner'>
-    <div id='save' class='btn'>
-      <span class='save'><i class="fa-solid fa-check"></i> Save</span>
-    </div>
-    <a class='btn' href="<%=editorpath%>"><i class="fa-solid fa-pen-to-square"></i> Edit file</a>
-    <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-eye"></i> Open in File Explorer</button>
-  </div>
-  </header>
-    <main>
-      <div id='editor'>
-        <% items.forEach((item) => { %>
-          <% if (item.type === "comment") { %>
-            <div class='comment'><%=item.val.replaceAll(/^[ #]+/g, "")%></div>
-          <% } else { %>
-            <div class='env-item'>
-              <label for="<%=item.key%>"><%=item.key%></label>
-              <input id="<%=item.key%>" type="text" value="<%=item.val%>">
+<body class='<%=theme%> <%=init ? 'center' : ''%>'>
+  <main>
+    <% if (init) { %>
+      <div>
+        <h1>Install</h1>
+        <% if (config) { %>
+          <div class='card'>
+            <% if (config.icon) { %>
+              <img src="<%=config.icon%>">
+            <% } %>
+            <div class='col'>
+              <div class='title'><%=config.title%></div>
+              <div class='description'><%=config.description%></div>
             </div>
-          <% } %>
-        <% }) %>
+          </div>
+        <% } %>
+        <footer>
+          <button id='customize' class='btn'><i class="fa-solid fa-gear"></i> Customize</button>
+          <div id='save' class='btn'>
+            <span class='save'><i class="fa-solid fa-check"></i> Install</span>
+          </div>
+        </footer>
       </div>
-    </main>
+    <% } else { %>
+      <header class='navheader grabbable'>
+      <div class='runner'>
+        <div id='save' class='btn'>
+          <span class='save'><i class="fa-solid fa-check"></i> Save</span>
+        </div>
+        <a class='btn' href="<%=editorpath%>"><i class="fa-solid fa-pen-to-square"></i> Edit file</a>
+        <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-eye"></i> Open in File Explorer</button>
+      </div>
+      </header>
+    <% } %>
+    <div id='editor' class='<%=init ? "hidden" : ''%>'>
+      <% items.forEach((item) => { %>
+        <% if (item.type === "comment") { %>
+          <div class='comment'><%=item.val.replaceAll(/^[ #]+/g, "")%></div>
+        <% } else { %>
+          <div class='env-item'>
+            <label for="<%=item.key%>"><%=item.key%></label>
+            <input id="<%=item.key%>" type="text" value="<%=item.val%>">
+          </div>
+        <% } %>
+      <% }) %>
+    </div>
+  </main>
 </body>
 </html>

package/server/views/pre.ejs

@@ -0,0 +1,109 @@
+<html class='columns'>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+<script src="/hotkeys.min.js"></script>
+<script src="/ace/ace.js"></script>
+<script src="/noty.js"></script>
+<script src="/notyq.js"></script>
+<script src="/xterm.js"></script>
+<script src="/xterm-addon-fit.js"></script>
+<script src="/xterm-addon-web-links.js"></script>
+<script src="/xterm-theme.js"></script>
+<script src="/xterm-addon-search.js"></script>
+<script src="/xterm-addon-search-bar.js"></script>
+<script src="/sweetalert2.js"></script>
+<script src="/Socket.js"></script>
+<script src="/common.js"></script>
+<script src="/he.js"></script>
+<script src="/opener.js"></script>
+<script src="/nav.js"></script>
+<script src="/autoexpand.js"></script>
+<script src="/modalinput.js"></script>
+<script src="/simplemodal.js"></script>
+<script src="/waitmodal.js"></script>
+<script src="/notifyinput.js"></script>
+<script src="/report.js"></script>
+<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="/style.css" rel="stylesheet"/>
+<link href="/noty.css" rel="stylesheet"/>
+<% if (agent === "electron") { %>
+  <link href="/electron.css" rel="stylesheet"/>
+<% } %>
+<style>
+main {
+  max-width: 500px;
+  margin: 50px auto;
+  width: 100%;
+}
+h1 {
+  letter-spacing: -1px;
+}
+.item {
+  border-radius: 5px;
+  padding: 10px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  /*
+  border: 1px solid rgba(0,0,0,0.07);
+  */
+  background: rgba(0,0,0,0.04);
+  margin: 10px 0;
+
+}
+.item .btn {
+  width: 50px;
+  text-align: center;
+}
+.item img {
+  width: 100px;
+}
+.item .col {
+  flex-grow: 1;
+  padding: 10px;
+  box-sizing: border-box;
+}
+footer {
+  background: none;
+}
+footer a.btn {
+  text-align: center;
+  display: block;
+  width: 100%;
+}
+.e {
+  padding: 5px 0;
+}
+</style>
+</head>
+<body class='columns <%=theme%>'>
+  <header class='navheader grabbable'>
+  </header>
+  <main>
+    <h1>Requirements</h1>
+    <div class='e'>
+      <div>To run <%=name%>, you need to have the following programs installed.</div>
+      <div>Get the apps if you haven't already, and press "Done".</div>
+    </div>
+    <div class='items'>
+      <% items.forEach((item) => { %>
+        <div class='item'>
+          <img src="<%=item.icon%>">
+          <div class='col'>
+            <div class='title'><%=item.title%></div>
+            <div class='description'><%=item.description%></div>
+          </div>
+          <a target="_blank" features="browser" href='<%=item.href%>' class='btn'>Get</a>
+        </div>
+      <% }) %>
+    </div>
+    <footer>
+      <a class='btn' href="/env/api/<%=name%>?init=true">Done</a>
+    </footer>
+  </main>
+</body>
+</html>

package/server/views/settings.ejs

@@ -302,7 +302,7 @@ hr {
       <br>
       <div>Edit the system ENVIRONMENT file to customize pinokio system wide settings, such as where files are stored, terminal behavior, etc.</div>
       <br>
-      <a class='btn' href="/env/ENVIRONMENT"><i class="fa-regular fa-pen-to-square"></i> Edit ENVIRONMENT</a>
+      <a class='btn' href="/env"><i class="fa-regular fa-pen-to-square"></i> Edit ENVIRONMENT</a>
     </div>
     <hr/>
     <div class='troubleshoot'>

package/server/views/share_editor.ejs

@@ -164,7 +164,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         "Content-Type": "application/json"
       },
       body: JSON.stringify({
-        filepath: "api/" + location.pathname.slice(7) + "/ENVIRONMENT",
+        filepath: "api/" + location.pathname.slice(7),
         vals
       })
     }).then((res) => {
@@ -194,6 +194,7 @@ document.addEventListener("DOMContentLoaded", async () => {
           <li>This will let you share your local Pinokio app to the public internet, which anyone with a URL can access.</li>
           <li>Powered by <a href="https://www.cloudflare.com/products/tunnel/" target="_blank" features="browser">Cloudflare Tunnel</a></li>
           <li>You can manually configure this in through the Configure menu (set PINOKIO_SHARE_CLOUDFLARE to true)</li>
+          <li>You can add <strong>authentication</strong> by adding a passcode (set PINOKIO_SHARE_PASSCODE in the <strong>Configure</strong> tab)</li>
         </ul>
         <% cloudflare_links.forEach((link) => { %>
           <div class='shared'>