pinokiod 2.15.10 → 2.15.12

package/kernel/api/fs/index.js

@@ -67,6 +67,7 @@ class FS {
   }
 
   async link(req, ondata, kernel) {
+    console.log("FS.link", req)
     let response = await this.share(req, ondata, kernel)
     return response
   }
@@ -275,14 +276,22 @@ class FS {
             parent: site_packages_root,
           }
 
+
+          
+          if (req.params.options) {
+            d.options = req.params.options 
+          } else {
+            d.options = {
+              overwrite: true
+            }
+          }
+
           // if the version is NOT final, overwrite.
           let re = /^\d+(\.\d+)*$/        // regex for testing final versions like 1.2, 1.1.1, 1.2.1.1, etc.
           if (re.test(version)) {
             // final version
           } else {
-            d.options = {
-              overwrite: true
-            }
+            d.options.overwrite = true
           }
 
           for(let relpath of copy) {
@@ -302,6 +311,7 @@ class FS {
           ondata({
             raw: "\r\nLINKING DRIVES:\r\n" + JSON.stringify(d, null, 2).replace(/\n/g, "\r\n")
           })
+          console.log("CREATE", JSON.stringify(d, null, 2))
           await drive.create(d)
           ondata({
             raw: "Done.\r\n"

package/kernel/api/index.js

@@ -25,6 +25,21 @@ class Api {
     this.proxies = {}
     this.lproxy = new Lproxy()
   }
+  get_proxy_url(root, port) {
+    if (this.proxies) {
+      let proxies = this.proxies[root]
+      if (proxies) {
+        let filtered = proxies.filter((p) => {
+          let re = new RegExp(":"+port+"$")
+          return re.test(p.target)
+        })
+        if (filtered.length > 0) {
+          return filtered[0].proxy
+        }
+      }
+    }
+    return `http://localhost:${port}`
+  }
   checkProxy(config) {
     // if config.name exists, throw error
     // if config.uri exists, throw error
@@ -41,12 +56,14 @@ class Api {
     this.checkProxy({ uri, name })
     // if the name exists, throw error
     // if the uri exists, throw error
+    console.log("lproxy start", uri, options)
     let proxy_uri = await this.lproxy.start(uri, options)
     if (this.proxies[scriptPath]) {
       this.proxies[scriptPath].push({ target: uri, proxy: proxy_uri, name})
     } else {
       this.proxies[scriptPath] = [{ target: uri, proxy: proxy_uri, name }]
     }
+    console.log("this.proxies", JSON.stringify(this.proxies, null, 2))
     return {
       target: uri,
       proxy: proxy_uri
@@ -75,6 +92,7 @@ class Api {
         })
       }
     }
+    console.log("this.proxies", JSON.stringify(this.proxies, null, 2))
   }
   async init() {
     if (this.kernel.homedir) {
@@ -501,6 +519,7 @@ class Api {
       mods.push(r)
     }
     let mod = _.zipObjectDeep(paths, mods)
+    console.log("MOD", mod)
     return mod
 
   }
@@ -1184,18 +1203,19 @@ class Api {
       return path.resolve(cwd, x)
     })
 
-    let merge = await this.construct(cwd, includeFiles, { exclude: [filename], is_sub: false })
-
-    // merge them into the original module
-    
-    //exclude "run" attributes
-
-    if (script.run) {
-      if (merge.run) {
-        delete merge.run
-      }
-    }
-    script = Object.assign(script, merge)
+//    let merge = await this.construct(cwd, includeFiles, { exclude: [filename], is_sub: false })
+//
+//    // merge them into the original module
+//    
+//    //exclude "run" attributes
+//
+//    if (script.run) {
+//      if (merge.run) {
+//        delete merge.run
+//      }
+//    }
+//    script = Object.assign(script, merge)
+    console.log("SCRIPT", script)
 
     return { cwd, script }
   }

package/kernel/api/local/index.js

@@ -25,6 +25,7 @@ class Local {
     return res
   }
   async set(req, ondata, kernel) {
+    console.log("SET", req)
     /*
       req := {
         "method": "local.set",
@@ -95,6 +96,7 @@ class Local {
             }
           }
           const p = new Proxy()
+          console.log("> proxy", req)
           await p.start(req, ondata, kernel)
         }
       }

package/kernel/bin/huggingface.js

@@ -0,0 +1,25 @@
+class Huggingface {
+  async install(req, ondata) {
+    await this.kernel.bin.exec({
+      message: "conda install -y -c conda-forge huggingface_hub"
+    }, ondata)
+  }
+  async installed() {
+    return this.kernel.bin.installed.conda.has("huggingface_hub")
+  }
+//  env() {
+//    return {
+//      GIT_CONFIG_GLOBAL: gitconfig_path
+//export CUDA_HOME=/usr/local/cuda
+//export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/cuda/lib64:/usr/local/cuda/extras/CUPTI/lib64
+//export PATH=$PATH:$CUDA_HOME/bin
+//
+//    }
+//  }
+  async uninstall(req, ondata) {
+    await this.kernel.bin.exec({
+      message: "conda remove huggingface_hub",
+    }, ondata)
+  }
+}
+module.exports = Huggingface

package/kernel/bin/playwright.js

@@ -0,0 +1,76 @@
+const fs = require('fs')
+const { rimraf } = require('rimraf')
+class Playwright {
+  async install(req, ondata) {
+    await this.kernel.exec({
+      message: [
+//        "npm init -y",
+        `npm config set prefix ${this.kernel.bin.path("miniconda")}`,
+      ],
+      path: this.kernel.bin.path("playwright"),
+      env: {
+        PLAYWRIGHT_BROWSERS_PATH: this.kernel.bin.path("playwright/browsers")
+      }
+    }, ondata)
+    await this.kernel.exec({
+      message: [
+//        "npm init -y",
+        "npm install -g playwright@1.49.0",
+//        "playwright install chromium",
+      ],
+      //path: this.kernel.bin.path("playwright"),
+      env: {
+        PLAYWRIGHT_BROWSERS_PATH: this.kernel.bin.path("playwright/browsers")
+      }
+    }, ondata)
+    await this.kernel.exec({
+      message: [
+//        "npm init -y",
+        "playwright install firefox",
+      ],
+      //path: this.kernel.bin.path("playwright"),
+      env: {
+        PLAYWRIGHT_BROWSERS_PATH: this.kernel.bin.path("playwright/browsers")
+      }
+    }, ondata)
+//    await this.kernel.exec({
+//      message: [
+//        "npm init -y",
+//        "npm install @playwright/browser-chromium@1.47.0",
+//        "npm install @playwright/browser-firefox@1.47.0",
+//        "npm install @playwright/browser-webkit@1.47.0"
+////        "npx playwright install chromium"
+//      ],
+//      path: this.kernel.bin.path("playwright"),
+//      env: {
+//        PLAYWRIGHT_BROWSERS_PATH: this.kernel.bin.path("playwright/browsers")
+//      }
+//    }, ondata)
+    await this.kernel.exec({
+      message: [
+        "pip install playwright==1.48.0",
+//        "playwright install"
+//        "npm install playwright --ignore-scripts"
+      ],
+      env: {
+        PLAYWRIGHT_BROWSERS_PATH: this.kernel.bin.path("playwright/browsers")
+      }
+    }, ondata)
+
+    let pwpath = this.kernel.bin.path("miniconda/lib/node_modules/playwright")
+    process.env.PLAYWRIGHT_BROWSERS_PATH = this.kernel.bin.path("playwright/browsers")
+    this.kernel.playwright = (await this.kernel.loader.load(pwpath)).resolved
+  }
+  async installed() {
+    let p = this.kernel.bin.path("playwright/browsers")
+    let e = await this.kernel.bin.exists(p)
+    return e
+  }
+  async uninstall(req, ondata) {
+    ondata({ raw: "cleaning up\r\n" })
+    const folder = this.kernel.bin.path("playwright")
+    await rimraf(folder)
+    ondata({ raw: "finished cleaning up\r\n" })
+  }
+}
+module.exports = Playwright

package/kernel/index.js

@@ -35,7 +35,8 @@ const VARS = {
 //const memwatch = require('@airbnb/node-memwatch');
 class Kernel {
   //schema = ">=1.0.0"
-  schema = "<=2.1.0"
+  //schema = "<=2.1.0"
+  schema = "<=2.2.0"
   constructor(store) {
     this.fetch = fetch
     this.store = store
@@ -222,6 +223,26 @@ class Kernel {
     await waitOn(options)
   }
 
+  async synchronize_proxies() {
+    let proxy_registry_path = path.resolve(this.homedir, "proxy_registry")
+    let exists = await this.exists(proxy_registry_path)
+    if (exists) {
+      await this.exec({
+        message: "git pull",
+        path: proxy_registry_path,
+      }, (e) => {
+        process.stdout.write(e.raw)
+      })
+    } else {
+      await this.exec({
+        message: "git clone https://github.com/pinokiocomputer/proxy_registry"
+        path: this.homedir
+      }, (e) => {
+        process.stdout.write(e.raw)
+      })
+    }
+  }
+
   async init(options) {
     let home = this.store.get("home")
 
@@ -337,13 +358,18 @@ class Kernel {
           system,
           platform: this.platform,
           arch: this.arch,
+          proxy: (port) => {
+            return this.api.get_proxy_url("/proxy", port)
+          },
           ...info
         })
         await this.update_sysinfo()
       }
 
 
-
+      let pwpath = this.bin.path("miniconda/lib/node_modules/playwright")
+      process.env.PLAYWRIGHT_BROWSERS_PATH = this.bin.path("playwright/browsers")
+      this.playwright = (await this.loader.load(pwpath)).resolved
 
 //      await this.template.init()
 

package/kernel/lproxy.js

@@ -16,6 +16,7 @@ const proxies = proxy.all()
 */
 const httpProxy = require('http-proxy');
 const portfinder = require('portfinder-cp');
+const cors = require('cors')
 const os = require('os')
 class Lproxy {
   constructor() {
@@ -32,23 +33,47 @@ class Lproxy {
     let o = Object.assign({
       target: url,
       ws: true,
-      localAddress: '0.0.0.0',
+      changeOrigin: true,
+//      localAddress: '0.0.0.0',
     },  options)
     console.log("proxy object", o)
     const proxy = httpProxy.createProxyServer(o)
+
     // get a new port
     if (!port) {
       port = await portfinder.getPortPromise({
         //port: 42420
-        port: 44000
+        port: 50000
+        //port: 44000
       })
     }
     proxy.listen(port)
     proxy.on('close', (res, socket, head) => {
       console.log('Client disconnected');
     });
-    proxy.on('error', (e) => {
-      console.log('Proxy Error', e)
+    proxy.on("error", function (err, req, res) {
+      res.writeHead(500, {
+        'Content-Type': 'text/plain',
+      });
+      res.end(err.stack)
+    });
+    proxy.on('proxyRes', (proxyRes, req, res) => {
+      console.log("proxyRes", { proxyRes, req, res })
+      if (req.headers.origin) {
+        res.setHeader('access-control-allow-origin', req.headers.origin);
+      }
+      res.setHeader('access-control-allow-credentials', 'true');
+      if (req.headers['access-control-request-method']) {
+        res.setHeader('access-control-allow-methods', req.headers['access-control-request-method']);
+      }
+      if (req.headers['access-control-request-headers']) {
+        res.setHeader('access-control-allow-headers', req.headers['access-control-request-headers']);
+      }
+      res.setHeader('access-control-max-age', 60 * 60 * 24 * 30);
+      if (req.method === 'OPTIONS') {
+        res.send(200);
+        res.end();
+      }
     });
 
     this.proxies[url] = proxy

package/package.json

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

package/server/index.js

@@ -449,6 +449,10 @@ class Server {
         name: "py"
       }, {
         name: "cloudflared"
+      }, {
+        name: "playwright"
+      }, {
+        name: "huggingface"
       }])
 
       let requirements_pending = !this.kernel.bin.installed_initialized
@@ -722,6 +726,10 @@ class Server {
           name: "py"
         }, {
           name: "cloudflared"
+        }, {
+          name: "playwright"
+        }, {
+          name: "huggingface"
         }])
 //        if (platform === "linux") {
 //          requirements.push({
@@ -1138,6 +1146,7 @@ class Server {
       if (this.cloudflare_pub) {
         qr_cloudflare = await QRCode.toDataURL(this.cloudflare_pub)
       }
+      console.log("****************", { items })
 
       res.render("index", {
         home_url: `http://localhost:${this.port}`,
@@ -2115,11 +2124,12 @@ class Server {
         icon: "ollama.webp",
         name: "Ollama",
         target: 'http://127.0.0.1:11434',
-        port: 42420
-//      }, {
-//        name: "LMStudio",
-//        target: 'http://127.0.0.1:1234',
-//        port: 42421
+        port: 44002
+      }, {
+        icon: "lmstudio.jpg",
+        name: "LMStudio",
+        target: 'http://127.0.0.1:1234',
+        port: 44003
       }]
       for(let i=0; i<proxies.length; i++) {
         proxies[i].running = false
@@ -2150,6 +2160,30 @@ class Server {
         icon = "pinokio-black.png"
       }
 
+
+      // App sharing
+      let apipath = this.kernel.path("api")
+      let files = await fs.promises.readdir(apipath, { withFileTypes: true })
+      let folders = files.filter((f) => {
+        return f.isDirectory()
+      }).map((x) => {
+        return x.name
+      })
+      let apps = []
+      for(let folder of folders) {
+        let p = path.resolve(apipath, folder, "pinokio.js")
+        let pinokio = (await this.kernel.loader.load(p)).resolved
+        if (pinokio) {
+          apps.push({
+            name: pinokio.title,
+            description: pinokio.description,
+            link: `/pinokio/browser/${folder}/browse#n1`,
+            icon: pinokio.icon ? `/api/${folder}/${pinokio.icon}?raw=true` : null
+          })
+        }
+      }
+      console.log({ apps })
+
       res.render("proxy", {
         agent: this.agent,
         theme: this.theme,
@@ -2157,7 +2191,8 @@ class Server {
         qr,
         proxy: home_proxy,
         localhost: `http://localhost:${this.port}`,
-        icon
+        icon,
+        apps
       })
     }))
     this.app.post("/proxy", ex(async (req, res) => {
@@ -2228,7 +2263,7 @@ class Server {
               await this.kernel.api.startProxy("/", `http://127.0.0.1:${this.port}`, "/")
             }
           } else {
-            await this.kernel.api.startProxy("/", `http://127.0.0.1:${this.port}`, "/")
+            await this.kernel.api.startProxy("/", `http://127.0.0.1:${this.port}`, "/", { port: 44001 })
           }
           console.log("started proxy")
         } else if (req.body.type === "cloudflare") {
@@ -2286,6 +2321,9 @@ class Server {
       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
+
+
+      console.log(">>>>>>>>>>>>>>>>>", { config })
       if (config.icon) {
         config.icon = `/${env_path}/${config.icon}?raw=true`
       }
@@ -2295,6 +2333,35 @@ class Server {
         name = env_path.split("/")[1]
       }
 
+      //if (config.run) {
+      //  let configStr = await fs.promises.readFile(p, "utf8")
+      //  res.render("disposable", {
+      //    home: null,
+      //    config,
+      //    name,
+      //    init: req.query ? req.query.init : null,
+      //    editorpath,
+      //    items,
+      //    theme: this.theme,
+      //    filepath,
+      //    agent: this.agent,
+      //    path: "/api/" + name + "/pinokio.js",
+      //    _path: "/_api/" + name,
+      //    str: configStr
+      //  })
+      //} else {
+      //  res.render("env_editor", {
+      //    home: null,
+      //    config,
+      //    name,
+      //    init: req.query ? req.query.init : null,
+      //    editorpath,
+      //    items,
+      //    theme: this.theme,
+      //    filepath,
+      //    agent: this.agent,
+      //  })
+      //}
       res.render("env_editor", {
         home: null,
         config,
@@ -2306,6 +2373,7 @@ class Server {
         filepath,
         agent: this.agent,
       })
+
     }))
     this.app.get("/pre/api/:name", ex(async (req, res) => {
       let p = path.resolve(this.kernel.homedir, "api", req.params.name, "pinokio.js")

package/server/public/style.css

@@ -1618,9 +1618,10 @@ footer.status {
   flex-grow: 1;
 }
 #error-screen-footer {
+  display: flex;
   padding: 10px;
   box-sizing: border-box;
-  text-align: center;
+  text-align: right;
   background: royalblue;
 }
 #error-screen-close {
@@ -1640,7 +1641,10 @@ footer.status {
   padding: 15px 30px;
   font-weight: bold;
   background: firebrick;
+  /*
   border-radius: 50px;
+  */
+  margin: 5px;
   text-transform: uppercase;
 }
 
@@ -1651,3 +1655,10 @@ mark{
   display: inline-block;
   margin: 5px 0;
 }
+#close-error-screen {
+  border-radius: 50px;
+  background: white !important;
+  padding: 15px !important;
+  color: royalblue !important;
+  cursor: pointer;
+}

package/server/views/browser-experimental.ejs

@@ -590,7 +590,7 @@ body.dark .loader-container {
   </div>
   -->
   <div class='grid-btns'>
-    <a class='btn2' href="https://portal.pinokio.computer/" target="_blank"><div><i class="fa-solid fa-face-smile-beam"></i></div><div>Community</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>
     <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="/"><div><i class="fa-solid fa-house"></i></div><div>Home</div></a>

package/server/views/disposable.ejs

@@ -0,0 +1,313 @@
+<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 {
+  
+}
+<% 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 .btn {
+  font-family: Sans-serif;
+  display: block;
+  margin-left: 10px;
+  font-style: normal;
+  font-size: 12px;
+  font-weight: normal;
+  padding: 5px 10px;
+}
+.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;
+}
+a#customize {
+  text-decoration: none;
+  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;
+  padding-bottom: 20px;
+}
+footer {
+  background: none;
+  padding: 0;
+  text-align: right;
+  display: flex;
+  margin: 10px 0 20px 0;
+}
+footer .btn {
+  margin-left: 10px;
+  display: inline-block;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+
+}
+footer .btn.go-home {
+  margin-left: 0px;
+}
+.btn.home-button {
+  background: none !important;
+  margin: 0 !important;
+  font-size: 16px !important;
+}
+#editor {
+  height: auto;
+}
+</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)
+    <% 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")
+    })
+    let editor = ace.edit("editor");
+    editor.setTheme("ace/theme/nord_dark");
+    editor.setOptions({
+      maxLines: Infinity, // set to a large number
+      minLines: 1 // set to a small number
+    });
+    editor.session.setMode("ace/mode/javascript");
+    editor.clearSelection()
+    */
+  <% } %>
+})
+</script>
+</head>
+<body class='<%=theme%> <%=init ? 'center' : ''%>'>
+  <main>
+    <% if (init) { %>
+      <div>
+        <h1>Run</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>
+          <a href="/" class='btn go-home'><i class='fa-solid fa-home'></i> home</a>
+          <div class='flexible'></div>
+          <a id='customize' class='btn' target="_blank" href='<%=_path%>'><i class='fa-solid fa-code'></i> View Script</a>
+          <!--
+          <button id='customize' class='btn'><i class="fa-solid fa-code"></i> View Script</button>
+          -->
+          <a id='save' href="<%=path%>" class='btn'>
+            <span class='save'><i class="fa-solid fa-check"></i> Run</span>
+          </a>
+        </footer>
+      </div>
+    <% } else { %>
+      <header class='navheader grabbable'>
+        <h1>
+          <% if (home) { %>
+            <a class='home-button home' href="/"><i class='fa-solid fa-home'></i></a>
+          <% } %>
+          <div class='flexible'></div>
+          <div class='nav-btns'>
+            <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 id='save' class='btn'>
+              <span class='save'><i class="fa-solid fa-check"></i> Save</span>
+            </div>
+          </div>
+        </h1>
+      </header>
+    <% } %>
+    <div id='editor' class='<%=init ? "hidden" : ''%>'><%=str%></div>
+  </main>
+</body>
+</html>

package/server/views/editor.ejs

@@ -739,6 +739,9 @@ document.addEventListener("DOMContentLoaded", async () => {
       }
     })
   }
+  document.querySelector("#close-error-screen").addEventListener('click', (e) => {
+    document.querySelector("#error-screen").classList.add("hidden")
+  })
 })
 const reloadMemory = async () => {
   let url = "/pinokio/memory?filepath=" + encodeURI("<%-filepath%>")
@@ -888,8 +891,12 @@ const reloadMemory = async () => {
   <div id='error-screen' class='hidden'>
     <pre></pre>
     <div id='error-screen-footer'>
+      <a class='btn' id='close-error-screen'>
+        <div><i class="fa-solid fa-xmark"></i></div>
+      </a>
+      <div class='flexible'></div>
       <a class='btn' href="https://portal.pinokio.computer" target="_blank">
-        <div><i class="fa-solid fa-face-smile"></i> Ask Community</div>
+        <div><i class="fa-solid fa-question"></i> Ask Community</div>
       </a>
     </div>
   </div>

package/server/views/explore.ejs

@@ -132,7 +132,7 @@ body main iframe {
 <div class='flexible'></div>
 <div class='nav-btns'>
   <a class='btn2' id='explore'><div><i class="fa-solid fa-globe"></i></div><div>Discover</div></a>
-  <a class='btn2' href="/?mode=help"><div><i class="fa-regular fa-face-smile"></i></div><div>Community</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>
   <a class='btn2' href="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
   <button id='new-window' title='open a new window' class='btn2'><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
 </div>

package/server/views/fullscreen_editor.ejs

@@ -703,6 +703,9 @@ document.addEventListener("DOMContentLoaded", async () => {
       }
     })
   }
+  document.querySelector("#close-error-screen").addEventListener('click', (e) => {
+    document.querySelector("#error-screen").classList.add("hidden")
+  })
 })
 const reloadMemory = async () => {
   let url = "/pinokio/memory?filepath=<%=encodedFilePath%>"
@@ -826,8 +829,12 @@ const reloadMemory = async () => {
   <div id='error-screen' class='hidden'>
     <pre></pre>
     <div id='error-screen-footer'>
+      <a class='btn' id='close-error-screen'>
+        <div><i class="fa-solid fa-xmark"></i></div>
+      </a>
+      <div class='flexible'></div>
       <a class='btn' href="https://portal.pinokio.computer" target="_blank">
-        <div><i class="fa-solid fa-face-smile"></i> Ask Community</div>
+        <div><i class="fa-solid fa-question"></i> Ask Community</div>
       </a>
     </div>
   </div>

package/server/views/index.ejs

@@ -182,9 +182,8 @@ body.dark .browser-options-row {
 </form>
 <% if (ishome) { %>
   <div class='nav-btns'>
-    <a class='btn2' href='/proxy'><div><i class="fa-solid fa-wifi"></i></div><div>Share</div></a>
     <a class='btn2' id='explore'><div><i class="fa-solid fa-globe"></i></div><div>Discover</div></a>
-    <a class='btn2' href="https://portal.pinokio.computer/" target="_blank"><div><i class="fa-solid fa-face-smile-beam"></i></div><div>Community</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>
     <% } %>
@@ -236,6 +235,13 @@ body.dark .browser-options-row {
           </div>
         </div>
       <% } %>
+      <div class='browser-options-row'>
+        <a href="/proxy" class='btn'><div><i class="fa-solid fa-gauge"></i> Configure</div></a>
+        <div class='flexible'>
+          <h3><i class="fa-solid fa-wifi"></i> Local Sharing</h3>
+          <div>Serve Pinokio, installed apps, and even external apps (example: Ollama) to any device on the same network.</div>
+        </div>
+      </div>
       <!--
       <div class='browser-options-row'>
         <a href="/proxy" class='flexible'>

package/server/views/proxy.ejs

@@ -127,19 +127,48 @@ body.dark .browser-options-row {
   text-decoration: none;
 }
 .line.align-top h3 {
+/*
   align-items: flex-start;
+  */
+  align-items: center;
 }
 .line a:hover {
   color: red;
 }
+.line img {
+  width: 40px;
+  height: 40px;
+}
 .btn-container {
   margin-top: 10px;
 }
 .header-label {
-  font-size: 30px;
+  font-family: Georgia;
+  font-style: italic;
+  font-size: 50px;
   letter-spacing: -1px;
-  padding: 15px;
+  padding: 50px;
   text-align: center;
+  text-transform: capitalize;
+}
+.header-label-sub {
+  font-size: 25px;
+  letter-spacing: -1px;
+  padding: 15px;
+  font-weight: bold;
+}
+.container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+.dark .container-row {
+  background: rgba(255, 255, 255, 0.04);
+}
+.container-row {
+  margin: 10px;
+  background: rgba(0, 0, 100, 0.04);
+  padding: 20px;
+  box-sizing: border-box;
 }
 @media only screen and (max-width: 480px) {
   .btn2 {
@@ -171,59 +200,72 @@ body.dark .browser-options-row {
 </h1>
 </header>
 <main>
+  <div class='header-label'><i class='fa-solid fa-wifi'></i> Local Sharing</div>
   <div class='container'>
-    <div class='not-running-apps'>
-      <div class='header-label'><i class='fa-solid fa-wifi'></i> Platform Local Sharing</div>
-      <ol>
-        <li><strong>PLATFORM LOCAL SHARING:</strong> Press "Start" to make the app accessible from any device on the same network</li>
-        <li><strong>APP LOCAL SHARING:</strong> This dashboard only lets you locally share the platforms. To do this for apps, look inside each app's Configure tab</li>
-      </ol>
+    <div class='container-row'>
+      <div class='header-label-sub'><i class="fa-solid fa-microchip"></i> System Programs</div>
+      <div class='line align-top'>
+        <h3>
+          <img class='icon' src="<%=icon%>">
+          <div class='col'>
+            <div class='title'>Pinokio</div>
+            <% if (proxy) { %>
+              <div class='description'><a href="<%=proxy.proxy%>" target="_blank"><%=proxy.proxy%></a> → <a href="<%=localhost%>" target="_blank"><%=localhost%></a></div>
+              <a class='wifi-qr badge' data-qr="<%=qr%>" data-url="<%=proxy.proxy%>"><i class="fa-solid fa-qrcode"></i> Scan QR Code</a>
+            <% } else { %>
+              <div class='description'>Share Pinokio <a href="<%=localhost%>" target="_blank"><%=localhost%></a> with other devices on the same network</div>
+            <% } %>
+            <div class='btn-container'>
+              <% if (proxy) { %>
+                <div id='wifi-stop' data-proxy="<%=proxy.proxy%>" class='btn'><div><i class="fa-solid fa-stop"></i> Stop</div></div>
+              <% } else { %>
+                <div id='wifi' class='btn'><div><i class="fa-solid fa-play"></i> Start at port 44001</div></div>
+                <div id='wifi-starting' class='btn disabled hidden'><div><i class="fa-solid fa-circle-notch fa-spin"></i> Starting</div></div>
+              <% } %>
+            </div>
+          </div>
+        </h3>
+      </div>
+      <% items.forEach((item) => { %>
         <div class='line align-top'>
           <h3>
-            <img class='icon' src="<%=icon%>">
+            <img class='icon' src="<%=item.icon%>">
             <div class='col'>
-              <div class='title'>Pinokio</div>
-              <% if (proxy) { %>
-                <div class='description'><a href="<%=proxy.proxy%>" target="_blank"><%=proxy.proxy%></a> → <a href="<%=localhost%>" target="_blank"><%=localhost%></a></div>
-                <a class='wifi-qr badge' data-qr="<%=qr%>" data-url="<%=proxy.proxy%>"><i class="fa-solid fa-qrcode"></i> Scan QR Code</a>
+              <div class='title'><%=item.name%></div>
+              <% if (item.proxy) { %>
+                <div class='description'><a href="<%=item.proxy%>" target="_blank"><%=item.proxy%></a> → <a href="<%=item.target%>" target="_blank"><%=item.target%></a></div>
+                <a class='wifi-qr badge' data-qr="<%=item.qr%>" data-url="<%=item.proxy%>"><i class="fa-solid fa-qrcode"></i> Scan QR Code</a>
               <% } else { %>
-                <div class='description'>Share Pinokio <a href="<%=localhost%>" target="_blank"><%=localhost%></a> with other devices on the same network</div>
+                <div class='description'>Share <%=item.target%> with other devices on the same network</div>
               <% } %>
               <div class='btn-container'>
-                <% if (proxy) { %>
-                  <div id='wifi-stop' data-proxy="<%=proxy.proxy%>" class='btn'><div><i class="fa-solid fa-stop"></i> Stop</div></div>
+                <% if (item.running) { %>
+                  <div data-port="<%=item.port%>" data-name="<%=item.name%>" data-target="<%=item.target%>" class='stop btn'><i class="fa-solid fa-stop"></i> Stop</div>
                 <% } else { %>
-                  <div id='wifi' class='btn'><div><i class="fa-solid fa-play"></i> Start</div></div>
-                  <div id='wifi-starting' class='btn disabled hidden'><div><i class="fa-solid fa-circle-notch fa-spin"></i> Starting</div></div>
+                  <div data-port="<%=item.port%>" data-name="<%=item.name%>" data-target="<%=item.target%>" class='start btn'><i class="fa-solid fa-play"></i> Start at port <%=item.port%></div>
                 <% } %>
               </div>
             </div>
           </h3>
         </div>
-        <% items.forEach((item) => { %>
-          <div class='line align-top'>
-            <h3>
-              <img class='icon' src="<%=item.icon%>">
-              <div class='col'>
-                <div class='title'><%=item.name%></div>
-                <% if (item.proxy) { %>
-                  <div class='description'><a href="<%=item.proxy%>" target="_blank"><%=item.proxy%></a> → <a href="<%=item.target%>" target="_blank"><%=item.target%></a></div>
-                  <a class='wifi-qr badge' data-qr="<%=item.qr%>" data-url="<%=item.proxy%>"><i class="fa-solid fa-qrcode"></i> Scan QR Code</a>
-                <% } else { %>
-                  <div class='description'>Share <%=item.target%> with other devices on the same network</div>
-                <% } %>
-                <div class='btn-container'>
-                  <% if (item.running) { %>
-                    <div data-port="<%=item.port%>" data-name="<%=item.name%>" data-target="<%=item.target%>" class='stop btn'><i class="fa-solid fa-stop"></i> Stop</div>
-                  <% } else { %>
-                    <div data-port="<%=item.port%>" data-name="<%=item.name%>" data-target="<%=item.target%>" class='start btn'><i class="fa-solid fa-play"></i> Start</div>
-                  <% } %>
-                </div>
-              </div>
-            </h3>
-          </div>
-        <% }) %>
-      </div>
+      <% }) %>
+    </div>
+    <div class='container-row'>
+      <div class='header-label-sub'><i class="fa-solid fa-dice-d6"></i> Application Programs</div>
+      <% apps.forEach((item) => { %>
+        <a class='line align-top' href="<%=item.link%>">
+          <h3>
+            <img class='icon' src="<%=item.icon%>">
+            <div class='col'>
+              <div class='title'><%=item.name%></div>
+              <div class='description'><%=item.description%></div>
+            </div>
+            <div class='spinner'>
+              <i class="fa-solid fa-chevron-right"></i>
+            </div>
+          </h3>
+        </a>
+      <% }) %>
     </div>
   </div>
 </main>

package/server/views/settings.ejs

@@ -234,7 +234,7 @@ hr {
 <div class='flexible'></div>
 <div class='nav-btns'>
   <a class='btn2' id='explore'><div><i class="fa-solid fa-globe"></i></div><div>Discover</div></a>
-  <a class='btn2' href="/?mode=help"><div><i class="fa-regular fa-face-smile"></i></div><div>Community</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>
   <a class='btn2' href="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
   <button id='new-window' title='open a new window' class='btn2'><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
 </div>