pinokiod 1.3.55 → 1.3.61

package/kernel/api/env/index.js

@@ -0,0 +1,22 @@
+const set = require("../set")
+const rm = require("../rm")
+const Environment = require('../../environment')
+const Util = require("../../util")
+class Env {
+  async set(req, ondata, kernel) {
+    /*
+      req := {
+        "method": "env.set",
+        "params": {
+          <key>: <val>,
+          <key>: <val>,
+        }
+      }
+    */
+    // write to current app folder's ENVIRONMENT
+
+    let api_path = await Util.api_path(req.parent.path, kernel)
+    await Util.update_env(api_path, req.params)
+  }
+}
+module.exports = Env

package/kernel/api/fs/index.js

@@ -129,11 +129,13 @@ class FS {
     ondata({ raw: "\r\ncreating a shared drive:\r\n" + JSON.stringify(req.params, null, 2).replace(/\n/g, "\r\n") })
 
 
-    let api_path = await Util.api_path(req.parent.path, kernel)
-    let current_env = await Environment.get(api_path)
+    // start with the proces.env => merge pinokio global ENVIRONMENT => merge app ENVIRONMENT
     let default_env = await Environment.get(kernel.homedir)
-    current_env = Object.assign(process.env, default_env, current_env)
+    let api_path = await Util.api_path(req.parent.path, kernel)
+    let api_env = await Environment.get(api_path)
+    let current_env = Object.assign(process.env, default_env, api_env)
 
+    // if PINOKIO_DRIVE environment variable is specified, use this custom value for the drive path instead of ~/pinokio/drive
     let env_drive_path = current_env.PINOKIO_DRIVE
     let drive_home
     if (env_drive_path) {

package/kernel/api/index.js

@@ -560,7 +560,6 @@ class Api {
     // 6. rpc must have method names
     if (rpc.method) {
 
-
       // 7. resolve the rpc
       let resolved = await this.resolveMethod(rpc, cwd)
 
@@ -1051,20 +1050,34 @@ class Api {
         }
       }
     } else if (request.method) {
-
-      if (request.params && request.params.path) {
-        if (request.cwd) {
-          console.log("request.cwd", request.cwd)
-          let rendered_cwd = this.kernel.template.render(request.cwd, { kernel: this.kernel }, { allow_undefined: true })
-          console.log("rendered_cwd", rendered_cwd)
-          request.params.path = this.resolvePath(rendered_cwd, request.params.path)
+      let pass = 0;
+      while(true) {
+        request = this.kernel.template.render(request, { kernel: this.kernel })
+        if (this.kernel.template.istemplate(request)) {
+          pass++;
+          if (pass >= 4) {
+            // only try 4 times
+            break;
+          } else {
+            continue;
+          }
         } else {
-          request.params.path = this.resolvePath(this.userdir, request.params.path)
+          break;
         }
       }
+      if (this.kernel.template.istemplate(request)) {
+        console.log("something wrong with the request", request)
+        return
+      }
+
+      // replace {{{ }}} with {{ }}
+      request = this.kernel.template.flatten(request)
+
+      if (request.params && request.params.path) {
+        request.params.path = this.resolvePath(this.userdir, request.params.path)
+      }
 
       // Kernel Call
-      console.log("REQUEST", request)
       let resolved = await this.resolveMethod(request)
       try {
         resolved.dirname = resolved.dirname

package/kernel/environment.js

@@ -160,7 +160,6 @@ const init_folders = async (homedir) => {
     }
   }
 }
-
 const get = async (homedir) => {
   const env_path = path.resolve(homedir, "ENVIRONMENT")
   const current_env = await util.parse_env(env_path)

package/kernel/index.js

@@ -175,7 +175,6 @@ class Kernel {
   }
 
   async init(options) {
-    this.port = options.port
     let home = this.store.get("home")
 
     // reset shells if they exist

package/kernel/shell.js

@@ -112,19 +112,22 @@ class Shell {
 
     this.env.CMAKE_OBJECT_PATH_MAX = 1024
 
-    console.log("THIS.env before", this.env)
-    let home_env = await Environment.get(this.kernel.homedir)
-    console.log("home_env before", home_env)
-    this.env = Object.assign(this.env, home_env)
-    console.log("home_env after", this.env)
+    // First override this.env with system env
+    let system_env = await Environment.get(this.kernel.homedir)
+    this.env = Object.assign(this.env, system_env)
+
+    // if the shell is running from a script file, the params.$parent will include the path to the parent script
+    // this means we need to apply app environment as well
     if (params.$parent) {
       let api_path = await Util.api_path(params.$parent.path, this.kernel)
+
+      // initialize folders
       await Environment.init_folders(api_path)
-      let current_env = await Environment.get(api_path)
-      console.log({ current_env, api_path })
-      this.env = Object.assign(this.env, current_env)
+
+      // apply app env to this.env
+      let app_env = await Environment.get(api_path)
+      this.env = Object.assign(this.env, app_env)
     }
-    console.log("THIS.env after", this.env)
     let PATH_KEY;
     if (this.env.Path) {
       PATH_KEY = "Path"

package/kernel/shells.js

@@ -160,7 +160,6 @@ class Shells {
                 matches[2] += "g"   // if g option is not included, include it (need it for matchAll)
               }
               let re = new RegExp(matches[1], matches[2])
-              console.log("stream", stream)
               let line = stream.cleaned.replaceAll(/[\r\n]/g, "")
               //let rendered_event = [...stream.cleaned.matchAll(re)]
               let rendered_event = [...line.matchAll(re)]
@@ -222,7 +221,6 @@ class Shells {
       for(let i=0; i<shells.length; i++) {
         let shell = shells[i]
         if (shell.id === request.id) {
-          console.log("FOUND SHELL TO KILL", shell.id)
           shell.kill(message, true)
         }
       }
@@ -235,7 +233,6 @@ class Shells {
       for(let i=0; i<shells.length; i++) {
         let shell = shells[i]
         if (shell.group === request.group) {
-          console.log("kill shell ", request.group, i, shell)
           shell.kill(message, true)
         }
       }

package/kernel/util.js

@@ -1,6 +1,17 @@
 const fs = require('fs')
 const path = require('path')
 const dotenv = require('dotenv')
+
+const {auto: normalizeEOL} = require("eol");
+const {EOL} = require("os");
+const breakPattern = /\n/g;
+const breakReplacement = "\\n";
+const groupPattern = /\$/g;
+const groupReplacement = "$$$";
+const h = "[^\\S\\r\\n]";  // simulate `\h`
+const returnPattern = /\r/g;
+const returnReplacement = "\\r";
+
 const parse_env = async (filename) => {
   try {
     const buf = await fs.promises.readFile(filename)
@@ -10,6 +21,52 @@ const parse_env = async (filename) => {
     return {}
   }
 }
+
+const parse_env_detail = async (filename) => {
+  // takes env and returns an array
+  const config = parse_env(filename)
+  /*
+    config := {
+      key1: val1,
+      key2; val2,
+      ...
+    }
+  */
+  const keys = Object.keys(config)
+  const str = await fs.promises.readFile(filename, "utf8")
+  const lines = str.split(EOL)
+
+  let items = []
+
+  for(let line of lines) {
+    if (line.trim().startsWith("#")) {
+      items.push({
+        type: "comment",
+        val: line
+      })
+    } else {
+      const buf = Buffer.from(line)
+      const parsed = dotenv.parse(buf)
+      const key = Object.keys(parsed)
+      if (key.length > 0) {
+        items.push({ key: key[0], val: parsed[key[0]] })
+      }
+    }
+  }
+  /*
+  items := [{
+    type: "comment",
+    val: "###################################",
+  }, {
+    type: "comment",
+    val: "# this is a comment",
+  }, {
+    key: "TMPDIR",
+    val: "/tmp"
+  }]
+  */
+  return items
+}
 const api_path = async (fullpath, kernel) => {
   let api_path = `${kernel.homedir}${path.sep}api`
   let rel_path = path.relative(api_path, fullpath)
@@ -17,6 +74,55 @@ const api_path = async (fullpath, kernel) => {
   let current_api_path = `${api_path}${path.sep}${api_name}`
   return current_api_path
 }
+const escapeStringRegexp = (string) => {
+	if (typeof string !== 'string') {
+		throw new TypeError('Expected a string');
+	}
+
+	// Escape characters with special meaning either inside or outside character sets.
+	// Use a simple backslash escape when it’s always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.
+	return string
+		.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
+		.replace(/-/g, '\\x2d');
+}
+
+const update_env = async (filepath, changes) => {
+  const envString = await fs.promises.readFile(filepath, "utf8")
+  console.log({ filepath, envString, changes })
+	let hasAppended = false;
+  console.log("changes", changes)
+  const newval = Object.keys(changes).reduce((result, varname) => {
+		const value = changes[varname].toString()
+			.replace(breakPattern, breakReplacement)
+			.replace(returnPattern, returnReplacement)
+			.trim();
+		const safeName = escapeStringRegexp(varname);
+		const varPattern = new RegExp(`^(${h}*${safeName}${h}*=${h}*)\\S*(${h}*)$`, "gm");
+		if (varPattern.test(result)) {
+			const safeValue = value.replace(groupPattern, groupReplacement);
+			return result.replace(varPattern, `$1${safeValue}$2`);
+		} else if (result === "") {
+			hasAppended = true;
+			return `${varname}=${value}${EOL}`;
+		} else if (!result.endsWith(EOL) && !hasAppended) {
+			hasAppended = true;
+			// Add an extra break between previously defined and newly appended variable
+			return `${result}${EOL}${EOL}${varname}=${value}`;
+		} else if (!result.endsWith(EOL)) {
+			// Add break for appended variable
+			return `${result}${EOL}${varname}=${value}`;
+		} else if (result.endsWith(EOL) && !hasAppended) {
+			hasAppended = true;
+			// Add an extra break between previously defined and newly appended variable
+			return `${result}${EOL}${varname}=${value}${EOL}`;
+		} else /*if (result.endsWith(EOL))*/ {
+			// Add break for appended variable
+			return `${result}${varname}=${value}${EOL}`;
+		}
+	}, normalizeEOL(envString));
+  console.log("updated ENVIRONMENT", newval)
+  await fs.promises.writeFile(filepath, newval)
+};
 module.exports = {
-  parse_env, api_path
+  parse_env, api_path, update_env, parse_env_detail
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "1.3.55",
+  "version": "1.3.61",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -21,6 +21,7 @@
     "decompress": "^4.2.1",
     "dotenv": "^16.4.5",
     "ejs": "^3.1.9",
+    "eol": "^0.9.1",
     "express": "^4.18.2",
     "express-http-proxy-cp": "^2.0.3",
     "express-session": "^1.17.3",

package/server/index.js

@@ -36,6 +36,7 @@ const Kernel = require("../kernel")
 const packagejson = require("../package.json")
 const Environment = require("../kernel/environment")
 const Cloudflare = require("../kernel/api/cloudflare")
+const Util = require("../kernel/util")
 class Server {
   constructor(config) {
     this.tabs = {}
@@ -238,9 +239,15 @@ class Server {
       await fs.promises.writeFile(current, content)
     }
 
+    let mode = "run"
+    console.log("req.query", req.query)
+    if (req.query && req.query.mode) {
+      mode = req.query.mode
+    }
 
     //res.render("browser", {
     res.render("browser-experimental", {
+      mode,
       port: this.port,
       mem,
       type,
@@ -1272,9 +1279,22 @@ class Server {
     if (config.menu) {
 
       config.menu = [{
+        base: "/",
         text: "Configure",
-        href: "ENVIRONMENT?mode=source",
+        href: `env/api/${name}/ENVIRONMENT`,
         icon: "fa-solid fa-gear"
+//      }, {
+//        base: "/",
+//        text: "Public Share",
+//        action: {
+//          method: "env.set",
+//          params: {
+//            "PINOKIO_SHARE_CLOUDFLARE": true,
+//            "PINOKIO_SHARE_LOCAL": true
+//          }
+//        },
+//        href: `env/api/${name}/ENVIRONMENT`,
+//        icon: "fa-solid fa-gear"
       }].concat(config.menu)
 
       for(let i=0; i<config.menu.length; i++) {
@@ -1285,14 +1305,18 @@ class Server {
           menuitem.menu = m.menu
         }
 
-        if (menuitem.href && !menuitem.href.startsWith("http")) {
-
-          // href resolution
-          let absolute = path.resolve(__dirname, ...pathComponents, menuitem.href)
-          let seed = path.resolve(__dirname)
-          let p = absolute.replace(seed, "")
-          let link = p.split(/[\/\\]/).filter((x) => { return x }).join("/")
-          config.menu[i].href = "/api/" + name + "/" + link
+        if (menuitem.base === "/") {
+          config.menu[i].href = menuitem.base + menuitem.href
+        } else {
+          if (menuitem.href && !menuitem.href.startsWith("http")) {
+
+            // href resolution
+            let absolute = path.resolve(__dirname, ...pathComponents, menuitem.href)
+            let seed = path.resolve(__dirname)
+            let p = absolute.replace(seed, "")
+            let link = p.split(/[\/\\]/).filter((x) => { return x }).join("/")
+            config.menu[i].href = "/api/" + name + "/" + link
+          }
         }
 
         if (menuitem.href && menuitem.params) {
@@ -2118,6 +2142,47 @@ class Server {
         res.json({ error: "type must be 'local' or 'cloudflare'" })
       }
     })
+    this.app.post("/env", async (req, res) => {
+      console.log("req.body", req.body)
+      let fullpath = path.resolve(this.kernel.homedir, req.body.filepath)
+      let updated = req.body.vals
+      await Util.update_env(fullpath, updated)
+      res.json({})
+    })
+    this.app.get("/env/*", async (req, res) => {
+      let pathComponents = req.params[0].split("/")
+      let filepath = path.resolve(this.kernel.homedir, req.params[0])
+      const items = await Util.parse_env_detail(filepath)
+      res.render("env_editor", {
+        items,
+        theme: this.theme,
+        filepath,
+        agent: this.agent,
+      })
+    })
+    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",
+      ]
+      for(let key of keys) {
+        if (!config[key]) {
+          config[key] = ""
+        }
+      }
+      res.render("share_editor", {
+        keys,
+        config,
+        theme: this.theme,
+        filepath,
+        agent: this.agent,
+      })
+    })
     this.app.get("/edit/*", async (req, res) => {
       let pathComponents = req.params[0].split("/")
       let filepath = path.resolve(this.kernel.homedir, req.params[0])
@@ -2292,8 +2357,13 @@ class Server {
     this.app.get("/pinokio/launch/:name", async (req, res) => {
       this.chrome(req, res, "launch")
     })
+    this.app.get("/pinokio/browser/:name/browse", async (req, res) => {
+      console.log("browse mode")
+      this.chrome(req, res, "browse")
+    })
     this.app.get("/pinokio/browser/:name", async (req, res) => {
-      this.chrome(req, res, "browser")
+      console.log("run mode")
+      this.chrome(req, res, "run")
     })
     this.app.post("/pinokio/delete", async (req, res) => {
       try {

package/server/public/style.css

@@ -21,7 +21,10 @@
   --light-thin: rgba(0,0,0,0.1);
   --dark-thin: rgba(255,255,255,0.03);
 
+/*
   --dark-color: rgba(255,255,255,0.8);
+  */
+  --dark-color: white;
   --light-color: rgba(0,0,0,0.9);
 
   --dark-fade: rgba(255,255,255,0.6);
@@ -894,13 +897,11 @@ body.dark .readme a {
 body.dark .line {
   border-bottom: 1px solid var(--dark-thin);
 }
-body.dark .line.selected {
+body.dark .line.selected, body.dark .line:hover {
 /*
   border-left: 6px solid white;
   */
   background: rgba(80, 100, 70, 0.1);
-  border-top: 1px solid rgba(80, 100, 70, 0.1);
-  border-bottom: 1px solid rgba(80, 100, 70, 0.1);
 }
 /*
 body.dark .line:hover {
@@ -910,13 +911,11 @@ body.dark .line:hover {
   border-left: 6px solid black;
 }
 */
-.line.selected {
+.line.selected, .line:hover {
 /*
   border-left: 6px solid black;
   */
   background: rgba(70, 200, 250, 0.1);
-  border-top: 1px solid rgba(70, 200, 250, 0.3);
-  border-bottom: 1px solid rgba(70, 200, 250, 0.3);
 }
 .line {
   text-decoration: none;
@@ -1554,7 +1553,7 @@ nav.error-message {
   color: #8fd400;
 }
 */
-.running-apps .spinner {
+.running-apps .spinner, .not-running-apps .spinner {
   width: 50px;
   text-align: center;
   font-size: 20px;

package/server/views/browser-experimental.ejs

@@ -263,6 +263,12 @@ body.dark .frame-link.selected {
   padding: 5px;
   */
 }
+.loader .btn:hover {
+  color: royalblue;
+}
+.loader .btn {
+  padding: 4px 8px;
+}
 .frame-link .tab {
   flex-grow: 1;
   /*
@@ -536,6 +542,9 @@ 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>
     </a>
+    <a target="/share/<%=name%>" href="/share/<%=name%>", class="btn header-item frame-link" data-index="1">
+      <div class='tab'><i class="fa-solid fa-wifi"></i> Share</div>
+    </a>
   </div>
   <div class='m h menu' data-type='h'>
     <% if (config.menu) { %>
@@ -713,7 +722,10 @@ const nav = (type) => {
 const renderSelection = (e, force) => {
   console.log("# 1")
   // if the menu has a default item, or if the url specifies a selection
-  let selection = document.querySelector("[data-default]")
+  let selection = null;
+  <% if (type === "run") { %>
+    selection = document.querySelector("[data-default]")
+  <% } %>
   if (selection || location.hash && location.hash.length > 0) {
     console.log("# 2")
 
@@ -1248,8 +1260,11 @@ document.querySelector("aside").addEventListener("click", async (e) => {
     e.stopPropagation()
     let link = target.closest("[href]")
     let src = new URL(link.href).pathname
+    n.Noty({
+      text: `stopping ${src}`,
+      silent: true
+    })
     console.log("src", src)
-    debugger
 
     let socket = new Socket()
     socket.run({
@@ -1262,7 +1277,7 @@ document.querySelector("aside").addEventListener("click", async (e) => {
       if (packet.type === "result") {
         socket.close()
         n.Noty({
-          text: `stopped ${src}`,
+          text: `stopped`,
           silent: true
         })
         refresh(true)

package/server/views/env_editor.ejs

@@ -0,0 +1,183 @@
+<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>
+body.frozen {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+#table > table {
+  border-left: 2px solid black;
+  padding-left: 5px;
+  margin: 10px 0;
+}
+.highlight {
+  background: yellow;
+  width: 100px;
+}
+th {
+  background: rgba(0,0,0,0.1);
+  padding: 10px;
+  font-size: 12px;
+}
+td {
+  font-size: 12px;
+  padding: 10px;
+}
+td.val {
+  background: rgba(0,0,0,0.06);
+}
+td.key {
+  background: rgba(0,0,0,0.1);
+}
+.button {
+  cursor: pointer; 
+  background: rgba(0,0,0,0.8);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+}
+.button:hover {
+  
+}
+#editor {
+  box-sizing: border-box;
+  max-width: 800px;
+  padding: 20px;
+}
+header .runner {
+  padding: 10px 0 0;
+}
+.disabled {
+  opacity: 0.7;
+}
+body.dark .env-item input[type=text] {
+  background: white;
+}
+.env-item input[type=text] {
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  border: none;
+  background: rgba(0,0,100, 0.1);
+}
+body.dark .env-item label {
+  color: cornflowerblue;
+}
+.env-item label {
+  color: royalblue;
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+  font-size: 18px;
+}
+.env-item {
+  padding-top: 10px;
+  padding-bottom: 30px;
+}
+body.dark .comment {
+  border-left: 2px solid white;
+}
+.comment {
+  opacity: 0.8;
+  border-left: 2px solid black;
+  padding-left: 10px;
+}
+#save {
+  background: royalblue;
+}
+</style>
+<script>
+document.addEventListener("DOMContentLoaded", async () => {
+  const n = new N()
+  document.querySelector("#save").addEventListener("click", async (e) => {
+    // save
+    const vals = {}
+    const els = document.querySelectorAll(".env-item")
+    for(let el of els) {
+      let input = el.querySelector("input[type=text]")
+      vals[input.id] = input.value
+    }
+    console.log("vals", vals)
+    let res = await fetch("/env", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        filepath: location.pathname.slice(5),
+        vals
+      })
+    }).then((res) => {
+      return res.json()
+    })
+    console.log("res" ,res)
+    n.Noty({
+      text: `Updated!`
+    })
+  })
+})
+</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>
+    <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%>">
+            </div>
+          <% } %>
+        <% }) %>
+      </div>
+    </main>
+</body>
+</html>

package/server/views/general_editor.ejs

@@ -146,9 +146,9 @@ document.addEventListener("DOMContentLoaded", async () => {
         this.socket.close()
         this.socket.run({
           method: "fs.write",
-          cwd: "{{kernel.homedir}}",
+          //cwd: "{{kernel.homedir}}",
           params: {
-            path: filepath,
+            path: `{{path.resolve(kernel.homedir, "${filepath}")}}`,
             text: str,
           }
         }, (packet) => {

package/server/views/help.ejs

@@ -146,6 +146,10 @@ body.dark .item select {
   padding: 10px 20px;
   text-align: center;
 }
+body.dark .btn {
+  color: white;
+  border: 1px solid rgba(255,255,255,0.3) !important;
+}
 body.light {
 /*
   background: var(--light-nav-bg);

package/server/views/index.ejs

@@ -112,13 +112,7 @@ a.badge {
 }
 body.dark .btn {
   color: white;
-  /*
-  color: cornflowerblue;
-  */
   border: 1px solid rgba(255,255,255,0.3);
-  /*
-  border: 1px solid rgba(100, 149, 237, 0.3);
-  */
 }
 body.dark .badge {
   background: rgba(255,255,255,0.1);
@@ -288,16 +282,19 @@ body.dark .browser-options-row {
               <div class='uri'><i class="fa-regular fa-folder"></i><%=item.url%></div>
               <div class='title'><%=item.name%></div>
               <div class='description'><%=item.description%></div>
-              <% if (item.running_scripts) { %>
-                <% item.running_scripts.forEach((s) => { %>
-                  <div>
-                    <button class='btn shutdown' data-src="<%=s.path%>">
-                      <i class="fa-solid fa-stop"></i> Stop <%=s.name%>&nbsp;
-                      <i class='fa-solid fa-spin fa-circle-notch'></i>
-                    </button>
-                  </div>
-                <% }) %>
-              <% } %>
+              <div>
+                <button class='btn browse' data-src="<%=item.browser_url%>/browse">
+                  <i class="fa-regular fa-folder-open"></i>
+                </button>
+                <% if (item.running_scripts) { %>
+                  <% item.running_scripts.forEach((s) => { %>
+                      <button class='btn shutdown' data-src="<%=s.path%>">
+                        <i class="fa-solid fa-stop"></i> Stop <%=s.name%>&nbsp;
+                        <i class='fa-solid fa-spin fa-circle-notch'></i>
+                      </button>
+                  <% }) %>
+                <% } %>
+              </div>
               <% if (item.shortcuts && item.shortcuts.length > 0) { %>
                 <div class='btns'>
                   <% item.shortcuts.forEach((btn) => { %>
@@ -336,6 +333,9 @@ body.dark .browser-options-row {
               <div class='uri'><i class="fa-regular fa-folder"></i><%=item.url%></div>
               <div class='title'><%=item.name%></div>
               <div class='description'><%=item.description%></div>
+              <button class='btn browse' data-src="<%=item.browser_url%>/browse">
+                <i class="fa-regular fa-folder-open"></i>
+              </button>
               <% if (item.shortcuts && item.shortcuts.length > 0) { %>
                 <div class='btns'>
                   <% item.shortcuts.forEach((btn) => { %>
@@ -346,6 +346,9 @@ body.dark .browser-options-row {
                 </div>
               <% } %>
             </div>
+            <div class='spinner'>
+              <i class="fa-solid fa-chevron-right"></i>
+            </div>
           </h3>
         </a>
       <% }) %>
@@ -729,7 +732,6 @@ document.addEventListener("click", (e) => {
     e.stopPropagation()
     let src = target.getAttribute("data-src")
     console.log("src", src)
-    debugger
 
     socket.run({
       method: "kernel.api.stop",
@@ -756,6 +758,21 @@ document.addEventListener("click", (e) => {
   }
 
 
+  debugger
+  if (e.target.classList.contains("browse")) {
+    target = e.target
+  } else {
+    target = e.target.closest(".browse")
+  }
+  if (target) {
+    e.preventDefault()
+    e.stopPropagation()
+    let src = target.getAttribute("data-src")
+    location.href = src
+    return
+  }
+
+
   if (document.querySelector(".container")) {
     document.querySelector(".container").addEventListener("click", async (e) => {
       let el = e.target.closest(".menu-btn")

package/server/views/partials/menu.ejs

@@ -30,7 +30,9 @@
               <i class='fa-solid fa-spin fa-circle-notch'></i>
               <i class="fa-solid fa-chevron-right"></i>
               -->
-              <i class="fa-solid fa-xmark"></i>
+              <button class='btn'>
+              <i class="fa-solid fa-square"></i> Stop
+              </button>
             </div>
           <% } %>
         </a>

package/server/views/settings.ejs

@@ -145,6 +145,10 @@ body.dark .item select {
   padding: 10px 20px;
   text-align: center;
 }
+body.dark .btn {
+  color: white;
+  border: 1px solid rgba(255,255,255,0.3) !important;
+}
 body.light {
 /*
   background: var(--light-nav-bg);
@@ -298,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="/edit/ENVIRONMENT">Edit ENVIRONMENT</a>
+      <a class='btn' href="/env/ENVIRONMENT">Edit ENVIRONMENT</a>
     </div>
     <hr/>
     <div class='troubleshoot'>

package/server/views/share_editor.ejs

@@ -0,0 +1,196 @@
+<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>
+body.frozen {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+#table > table {
+  border-left: 2px solid black;
+  padding-left: 5px;
+  margin: 10px 0;
+}
+.highlight {
+  background: yellow;
+  width: 100px;
+}
+th {
+  background: rgba(0,0,0,0.1);
+  padding: 10px;
+  font-size: 12px;
+}
+td {
+  font-size: 12px;
+  padding: 10px;
+}
+td.val {
+  background: rgba(0,0,0,0.06);
+}
+td.key {
+  background: rgba(0,0,0,0.1);
+}
+.button {
+  cursor: pointer; 
+  background: rgba(0,0,0,0.8);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+}
+.button:hover {
+  
+}
+#editor {
+  box-sizing: border-box;
+  max-width: 800px;
+  padding: 20px;
+}
+header .runner {
+  padding: 10px 0 0;
+}
+.disabled {
+  opacity: 0.7;
+}
+body.dark .env-item input[type=text] {
+  background: white;
+}
+.env-item input[type=text] {
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  border: none;
+  background: rgba(0,0,100, 0.1);
+}
+body.dark .env-item label {
+  color: cornflowerblue;
+}
+.env-item a {
+  color: royalblue;
+  text-decoration: none;
+}
+.env-item div {
+  padding: 5px;
+}
+.env-item label {
+  color: royalblue;
+  display: inline-block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+.env-item {
+  padding-top: 10px;
+  padding-bottom: 30px;
+}
+body.dark .comment {
+  border-left: 2px solid white;
+}
+.comment {
+  opacity: 0.8;
+  border-left: 2px solid black;
+  padding-left: 10px;
+}
+#save {
+  background: royalblue;
+}
+hr {
+  margin: 20px 0;
+  background: rgba(255,255,255,0.1);
+  border: none;
+  height: 1px;
+}
+</style>
+<script>
+document.addEventListener("DOMContentLoaded", async () => {
+  const n = new N()
+  document.querySelector("#save").addEventListener("click", async (e) => {
+    // save
+    const vals = {}
+    const els = document.querySelectorAll(".env-item input[type=checkbox]")
+    for(let el of els) {
+      vals[el.id] = el.checked
+    }
+    let res = await fetch("/env", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        filepath: "api/" + location.pathname.slice(7) + "/ENVIRONMENT",
+        vals
+      })
+    }).then((res) => {
+      return res.json()
+    })
+    n.Noty({
+      text: `Updated! Restart the app to apply the change.`
+    })
+  })
+})
+</script>
+</head>
+<body class='columns <%=theme%>'>
+  <main>
+    <div id='editor'>
+      <h1>Share Apps</h1>
+      <div>You can open up your local Pinokio node to the outside world, or any other device on the same network, instantly.</div>
+      <hr>
+      <div class='env-item'>
+        <% if (config.PINOKIO_SHARE_CLOUDFLARE.toString() === "true") { %>
+          <input type="checkbox" id="PINOKIO_SHARE_CLOUDFLARE" name="cloudflare" checked />
+        <% } else { %>
+          <input type="checkbox" id="PINOKIO_SHARE_CLOUDFLARE" name="cloudflare" />
+        <% } %>
+        <label for="cloudflare">Share Publicly</label>
+        <div>This will set the PINOKIO_SHARE_CLOUDFLARE environment variable to true, and share your local app to the public internet, powered by <a href="https://www.cloudflare.com/products/tunnel/" target="_blank" features="browser">Cloudflare Tunnel</a></div>
+      </div>
+      <div class='env-item'>
+        <% if (config.PINOKIO_SHARE_LOCAL.toString() === "true") { %>
+          <input type="checkbox" id="PINOKIO_SHARE_LOCAL" name="local" checked />
+        <% } else { %>
+          <input type="checkbox" id="PINOKIO_SHARE_LOCAL" name="local" />
+        <% } %>
+        <label for="local">Share with Local Network Devices</label>
+        <div>This will set the PINOKIO_SHARE_LOCAL environment variable to true, and share your local app to any device on the same local network</div>
+      </div>
+      <div class='runner'>
+        <div id='save' class='btn'>
+          <span class='save'><i class="fa-solid fa-check"></i> Save</span>
+        </div>
+      </div>
+    </div>
+  </main>
+</body>
+</html>