pinokiod 2.15.8 → 2.15.9

package/kernel/api/index.js

@@ -4,7 +4,7 @@ const path = require('path')
 const _ = require('lodash')
 const git = require('isomorphic-git')
 const http = require('isomorphic-git/http/node')
-const Lproxy = require('lproxy')
+const Lproxy = require('../lproxy')
 //const { glob, globSync, globStream, globStreamSync, Glob, } = require('glob')
 const { glob, sync, hasMagic } = require('glob-gitignore')
 const fastq = require('fastq')

package/kernel/index.js

@@ -1,5 +1,5 @@
 const fs = require('fs')
-const {JSONPath} = require('jsonpath-plus');
+//const {JSONPath} = require('jsonpath-plus');
 const os = require("os")
 const jsdom = require("jsdom");
 const path = require('path')

package/kernel/lproxy.js

@@ -0,0 +1,76 @@
+/*
+const proxy = new Minproxy()
+
+// 1. start the proxy for url
+const generated_url = await proxy.start(url)
+
+// 2. stop the proxy for url
+proxy.stop(url)
+
+// 3. get the proxy url for a given url
+const proxy_url = proxy.url(url)
+
+// 4. get all proxies
+const proxies = proxy.all()
+
+*/
+const httpProxy = require('http-proxy');
+const portfinder = require('portfinder-cp');
+const os = require('os')
+class Lproxy {
+  constructor() {
+    this.proxies = {}
+    this.ip = this.local()
+  }
+  async start (url, options) {
+    let port
+    if (options && options.port) {
+      port = options.port
+      console.log("start proxy at port", port)
+      delete options.port
+    }
+    let o = Object.assign({
+      target: url,
+      ws: 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
+      })
+    }
+    proxy.listen(port)
+    proxy.on('close', (res, socket, head) => {
+      console.log('Client disconnected');
+    });
+    proxy.on('error', (e) => {
+      console.log('Proxy Error', e)
+    });
+
+    this.proxies[url] = proxy
+    return `http://${this.ip}:${port}`
+  }
+  async stop (url) {
+    console.log("proxies", this.proxies, url)
+    let p = this.proxies[url]
+    if (p) {
+      p.close()
+    }
+  }
+  local() {
+    const interfaces = Object.values(os.networkInterfaces())
+    let addr
+    for (let iface of interfaces) {
+      for (let alias of iface) {
+        if (alias.family === "IPv4" && alias.address !== "127.0.0.1" && !alias.internal) {
+          return alias.address
+        }
+      }
+    }
+  }
+}
+module.exports = Lproxy

package/kernel/shell.js

@@ -439,7 +439,13 @@ class Shell {
         return params.message
       } else if (Array.isArray(params.message)) {
         // if params.message is empty, filter out
-        let delimiter = " && "
+        //let delimiter = " && "
+        let delimiter
+        if (this.platform === "win32") {
+          delimiter = " & ";
+        } else {
+          delimiter = " ; ";
+        }
         return params.message.filter((m) => {
           return m && !/^\s+$/.test(m)
         }).join(delimiter)

package/kernel/shells.js

@@ -43,11 +43,17 @@ class Shells {
       params.on = []
     }
     // default error
-    params.on.push({
+    const defaultHandlers = [{
       event: "/error:/i",
-      debug: true
-    })
-    let errors = new Set()
+      break: true
+    }, {
+      event: "/errno /i",
+      break: true
+    }, {
+      event: "/error:.*triton/i",
+      break: false
+    }]
+    params.on = params.on.concat(defaultHandlers)
     let response = await sh.start(params, async (stream) => {
       /*
         {
@@ -61,32 +67,6 @@ class Shells {
           }
         }
       */
-//      if (params.error && Array.isArray(params.error)) {
-//        for(let handler of params.error) {
-//          if (handler.event) {
-//            let matches = /^\/(.+)\/([dgimsuy]*)$/gs.exec(handler.event)
-//            if (!/g/.test(matches[2])) {
-//              matches[2] += "g"   // if g option is not included, include it (need it for matchAll)
-//            }
-//            let re = new RegExp(matches[1], matches[2])
-//            let line = stream.cleaned.replaceAll(/[\r\n]/g, "")
-//            //let rendered_event = [...stream.cleaned.matchAll(re)]
-//
-//            let rendered_event = [...line.matchAll(re)]
-//            // 3. if the rendered expression is truthy, run the "run" script
-//            if (rendered_event.length > 0) {
-//
-//              // if error matched, shouldn't move forard
-////              error = rendered_event
-//                console.log({ rendered_event })
-//              for(let e of rendered_event) {
-//                errors.add(e[0])
-//              }
-//
-//            }
-//          }
-//        }
-//      }
       if (params.on && Array.isArray(params.on)) {
         for(let handler of params.on) {
           // regexify
@@ -113,39 +93,104 @@ class Shells {
                 m = rendered_event[0]
                 sh.continue()
               }
-              if (handler.debug) {
-                for(let e of rendered_event) {
-                  errors.add(e[0])
-                }
-              }
             }
-//          } else if (handler.pattern === "url") {
-//            let re = /https?:\/\/[a-zA-Z0-9.:]+/g
-//            let line = stream.cleaned.replaceAll(/[\r\n]/g, "")
-//            let rendered_event = [...line.matchAll(re)]
-//            if (rendered_event.length > 0) {
-//              stream.matches = rendered_event
-//              if (handler.kill) {
-//                m = new URL(rendered_event[0])
-//                console.log("MM", m)
-//                sh.kill()
-//              }
-//              if (handler.done) {
-//                m = new URL(rendered_event[0])
-//                console.log("MM", m)
-//                sh.continue()
-//              }
-//            }
           }
         }
       }
       ondata(stream)
     })
 
+    /*
+      {
+        method: "shell.run",
+        params: {
+          message,
+          on: [{
+            event: <regex>,
+            break: true|false
+          }],
+        }
+      }
+
+      - true: break with matched
+      - false: do not break (default)
+      - TEMPLATE: parse the template 
+    */
+
+    let errors = new Set()
+    if (response) {
+      if (params.on && Array.isArray(params.on)) {
+
+        let line = response.replaceAll(/[\r\n]/g, "")
+        // 1. find all break event handlers
+        let breakPoints = params.on.filter((x) => {
+          return x.event && x.hasOwnProperty("break")
+        })
+
+        // 2. first find the `break: false` handlers and replace the patterns with blank => so they won't be matched in the next step
+        //let line = response.replaceAll(/[\r\n]/g, "")
+        for(let handler of breakPoints) {
+          if (handler.event) {
+            let matches = /^\/(.+)\/([dgimsuy]*)$/gs.exec(handler.event)
+            if (!/g/.test(matches[2])) {
+              matches[2] += "g"   // if g option is not included, include it (need it for matchAll)
+            }
+            let re = new RegExp(matches[1], matches[2])
+
+            // only the "break: false" ones => these need to be ignored
+            if (!handler.break) {
+              line = line.replaceAll(re, "")
+            }
+          }
+        }
+
+        // 3. Now with all the `break: false` (ignored patterns) gone, look for the `break: true` patterns
+        for(let handler of breakPoints) {
+          if (handler.event) {
+            let matches = /^\/(.+)\/([dgimsuy]*)$/gs.exec(handler.event)
+            if (!/g/.test(matches[2])) {
+              matches[2] += "g"   // if g option is not included, include it (need it for matchAll)
+            }
+            let re = new RegExp(matches[1], matches[2])
+
+            // only the "break: true" ones
+            if (handler.break) {
+
+              let match;
+              // Keep executing the regex on the text until no more matches are found
+              while ((match = re.exec(line)) !== null) {
+                errors.add(match[0])
+                // errors.add(match.slice(1));
+              }
+            }
+          }
+        }
+      }
+    }
+
+
     if (errors.size > 0) {
+      // try replacing the shortest pattern from the text one by one and narrow down the errors
+      // so it doesn't accidently contain a very long match
+
+      let errs = Array.from(errors)
+      errs.sort((x, y) => {
+        return x.length - y.length
+      })
+      let line = response.replaceAll(/[\r\n]/g, "")
+      let shortened_errs = []
+      // at this point, errs is sorted in ascending order of length, so the shortest match is the first item
+      for(let err of errs) {
+        // 1. check the err still matches the line => The first time this is run, it will always be included. But from the next time it might not be
+        if (line.includes(err)) {
+          // 2. remove the first pattern
+          shortened_errs.push(err)
+          line = line.replaceAll(err, "")
+        }
+      }
+
       // don't return if there's an error
-      console.log("errors", Array.from(errors))
-      return { id: sh.id, response, stdout: response, event: m, error: Array.from(errors) }
+      return { id: sh.id, response, stdout: response, event: m, error: shortened_errs }
     } else {
       // need to make a request
       return { id: sh.id, response, stdout: response, event: m }

package/kernel/util.js

@@ -1,5 +1,6 @@
 const fs = require('fs')
 const os = require('os')
+const net = require('node:net')
 const path = require('path')
 const dotenv = require('dotenv')
 const child_process = require('node:child_process');
@@ -13,6 +14,31 @@ const h = "[^\\S\\r\\n]";  // simulate `\h`
 const returnPattern = /\r/g;
 const returnReplacement = "\\r";
 
+
+const port_running = async (host, port) => {
+  const timeout = 1000
+  const promise = new Promise((resolve, reject) => {
+    const socket = new net.Socket();
+    const onError = (e) => {
+      socket.destroy();
+      reject();
+    };
+    socket.setTimeout(timeout);
+    socket.once('error', onError);
+    socket.once('timeout', onError);
+    socket.connect(port, host, () => {
+      socket.end();
+      resolve();
+    });
+  });
+  try {
+    await promise;
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
 const parse_env = async (filename) => {
   try {
     const buf = await fs.promises.readFile(filename)
@@ -142,5 +168,5 @@ const update_env = async (filepath, changes) => {
   await fs.promises.writeFile(filepath, newval)
 };
 module.exports = {
-  parse_env, api_path, update_env, parse_env_detail, openfs
+  parse_env, api_path, update_env, parse_env_detail, openfs, port_running
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "2.15.8",
+  "version": "2.15.9",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -31,16 +31,15 @@
     "fs-extra": "^11.1.1",
     "glob": "^10.3.3",
     "glob-gitignore": "^1.0.14",
+    "http-proxy": "^1.18.1",
     "http-proxy-middleware": "^3.0.0",
     "http-terminator": "^3.2.0",
     "isomorphic-git": "^1.23.0",
     "jimini": "^0.0.6",
     "jsdom": "^24.0.0",
-    "jsonpath-plus": "^7.2.0",
     "key-store": "^1.2.0",
     "kleur": "^4.1.5",
     "lodash": "^4.17.21",
-    "lproxy": "^0.0.13",
     "marked": "^5.0.1",
     "mime-types": "^2.1.35",
     "multer": "^1.4.5-lts.1",

package/server/index.js

@@ -71,7 +71,6 @@ class Server {
         process.env[PATH_KEY]
       ].join(path.delimiter)
     }
-
   }
   stop() {
     this.server.close()
@@ -257,11 +256,11 @@ class Server {
 
     await this.init_env("api/" + name)
 
+
     let mode = "run"
     if (req.query && req.query.mode) {
       mode = req.query.mode
     }
-
     const env = await this.kernel.env("api/" + name)
 
     //res.render("browser", {
@@ -1868,7 +1867,11 @@ class Server {
     } else {
       const primary_port = 80
       const secondary_port = 42000
-      const available = await portfinder.isAvailablePromise({ host: "0.0.0.0", port: primary_port })
+      const running1 = await Util.port_running("localhost", primary_port)
+      const running2 = await Util.port_running("127.0.0.1", primary_port)
+      const running = running1 || running2
+      const available = !running
+      //const available = await portfinder.isAvailablePromise({ host: "0.0.0.0", port: primary_port })
       console.log("check available", { primary_port, available })
       if (available) {
         this.port = primary_port
@@ -2105,7 +2108,83 @@ class Server {
       Util.openfs(req.body.path)
       res.json({ success: true })
     }))
+    this.app.get("/proxy", ex(async (req, res) => {
+      let live_proxies = this.kernel.api.proxies["/proxy"]
+      if (!live_proxies) live_proxies = []
+      let proxies = [{
+        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
+      }]
+      for(let i=0; i<proxies.length; i++) {
+        proxies[i].running = false
+        for(let live_proxy of live_proxies) {
+          if (live_proxy.name === proxies[i].name) {
+            proxies[i].running = true 
+            proxies[i].proxy = live_proxy.proxy
+            proxies[i].qr = await QRCode.toDataURL(live_proxy.proxy)
+          }
+        }
+      }
+
+      let pinokio_proxy = this.kernel.api.proxies["/"]
+      let pinokio_cloudflare = this.cloudflare_pub
+
+      let qr = null
+      let qr_cloudflare = null
+      let home_proxy = null
+      if (pinokio_proxy && pinokio_proxy.length > 0) {
+        qr = await QRCode.toDataURL(pinokio_proxy[0].proxy)
+        home_proxy = pinokio_proxy[0]
+      }
 
+      let icon
+      if (this.theme === "dark") {
+        icon = "pinokio-white.png"
+      } else {
+        icon = "pinokio-black.png"
+      }
+
+      res.render("proxy", {
+        agent: this.agent,
+        theme: this.theme,
+        items: proxies,
+        qr,
+        proxy: home_proxy,
+        localhost: `http://localhost:${this.port}`,
+        icon
+      })
+    }))
+    this.app.post("/proxy", ex(async (req, res) => {
+      /*
+        req.body := {
+          action: "start"|"stop",
+          name: <name>,
+          target: <target url>,
+          port: <proxy port>
+        }
+      */
+      if (req.body && req.body.target && req.body.action && req.body.name) {
+        //let port = new URL(req.body.target).port
+        //let port = await this.kernel.port()
+        if (req.body.action === "start") {
+          let port = req.body.port
+          console.log("start proxy")
+          await this.kernel.api.startProxy("/proxy", req.body.target, req.body.name, { port })
+          console.log(this.kernel.api.proxies)
+        } else if (req.body.action === "stop") {
+          await this.kernel.api.stopProxy({
+            uri: req.body.target
+          })
+        }
+      }
+      res.json({ success: true })
+    }))
     this.app.post("/unpublish", ex(async (req, res) => {
       /*
         req.body := {
@@ -2667,8 +2746,8 @@ class Server {
       fs.uri("api", "https://github.com/cocktailpeanut/llamacpp.pinokio.git/icon.png")
       fs.uri("bin", "python/bin")
 
-      1. Git URI: http://localhost:4200/pinokio/fs?drive=api&path=https://github.com/cocktailpeanut/llamacpp.pinokio.git/icon.png
-      2. Local path: http://localhost:4200/pinokio/fs?drive=api&path=test/icon.png
+      1. Git URI: http://localhost/pinokio/fs?drive=api&path=https://github.com/cocktailpeanut/llamacpp.pinokio.git/icon.png
+      2. Local path: http://localhost/pinokio/fs?drive=api&path=test/icon.png
     */
     this.app.get("/pinokio/fs", ex((req, res) => {
       // serve reaw files

package/server/public/style.css

@@ -1601,17 +1601,36 @@ footer.status {
   bottom: 0;
   right: 0;
   z-index: 100000000;
+  display: flex;
+  flex-direction: column;
 }
 #error-screen pre {
   padding: 20px;
   box-sizing: border-box;
   width: 100%;
+  /*
   height: 100%;
+  */
   margin: 0;
   background: royalblue;
   color: white;
   overflow: auto;
+  flex-grow: 1;
+}
+#error-screen-footer {
+  padding: 10px;
+  box-sizing: border-box;
+  text-align: center;
+  background: royalblue;
+}
+#error-screen-close {
+  background: rgba(0, 0, 0, 0.6);
+  font-size: 16px;
+  padding: 10px 20px;
+  font-weight: bold;
+  width: 100%;
 }
+
 mark{
   background: red;
   color: white;

package/server/views/browser-experimental.ejs

@@ -676,9 +676,6 @@ const subUrlOf = (s, f) => {
     if (!fullParsed.searchParams.has(key)) {
       return false
     }
-    console.log("key", key)
-    console.log("f", fullParsed.searchParams.get(key))
-    console.log("s", val)
     if (fullParsed.searchParams.get(key) !== val) {
       return false
     }
@@ -691,7 +688,6 @@ const renderCursor = () => {
     el.classList.remove("cursor")
   })
   const target = document.querySelector(".selectable[data-index='" + cursorIndex + "']")
-  console.log({ cursorIndex, target })
   target.classList.add("cursor")
 }
 const nav = (type) => {
@@ -794,7 +790,6 @@ const renderSelection = (e, force) => {
     //
     //  => select that tab and frame
 
-    console.log("target", target)
     if (target) {
 
       // display the menu button at the top
@@ -809,12 +804,10 @@ const renderSelection = (e, force) => {
     }
 
     if (target) {
-      console.log("# 3")
 
 
       // Instantiate a frame with the selected target's href
       let url = target.href
-      console.log("> url", url)
       document.querySelector("#open-browser").href = url
       document.querySelector("#clone-tab").setAttribute("data-href", url)
       document.querySelector("#location").value = url
@@ -1409,6 +1402,11 @@ const refresh = async (silent) => {
   // render the selected frame only if not silent
   if (silent) {
   } else {
+    await new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve()
+      }, 1000)
+    })
     renderSelection()
   }
 }

package/server/views/editor.ejs

@@ -490,6 +490,11 @@ document.addEventListener("DOMContentLoaded", async () => {
               separateWordSearch: false,
               accuracy: "exactly"
             })
+            /*
+            document.querySelector("#error-screen").addEventListener("click", (e) => {
+              document.querySelector("#error-screen").classList.add("hidden")
+            })
+            */
             console.log("instance", instance)
             console.log("EVENT", packet.event)
             instance.mark(packet.event)
@@ -882,6 +887,9 @@ const reloadMemory = async () => {
   <% } %>
   <div id='error-screen' class='hidden'>
     <pre></pre>
+    <div id='error-screen-footer'>
+      <button id='error-screen-close' class='btn'>Close</button>
+    </div>
   </div>
 </body>
 </html>

package/server/views/fullscreen_editor.ejs

@@ -449,6 +449,11 @@ document.addEventListener("DOMContentLoaded", async () => {
               separateWordSearch: false,
               accuracy: "exactly"
             })
+            /*
+            document.querySelector("#error-screen").addEventListener("click", (e) => {
+              document.querySelector("#error-screen").classList.add("hidden")
+            })
+            */
             console.log("instance", instance)
             console.log("EVENT", packet.event)
             instance.mark(packet.event)
@@ -500,7 +505,7 @@ document.addEventListener("DOMContentLoaded", async () => {
                 document.querySelector(".run .starting").classList.add("hidden")
                 document.querySelector(".run .stop").classList.add("hidden")
               }, 0)
-              this.socket.close()
+              //this.socket.close()
             }
           }
 
@@ -820,6 +825,9 @@ const reloadMemory = async () => {
   <% } %>
   <div id='error-screen' class='hidden'>
     <pre></pre>
+    <div id='error-screen-footer' class='hidden'>
+      <button id='error-screen-close' class='btn'>Close</button>
+    </div>
   </div>
 </body>
 </html>

package/server/views/index.ejs

@@ -182,6 +182,7 @@ 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>
     <% if (agent === "electron") { %>
@@ -235,24 +236,32 @@ body.dark .browser-options-row {
           </div>
         </div>
       <% } %>
+      <!--
       <div class='browser-options-row'>
-        <% if (proxy) { %>
-          <a id='wifi-stop' data-proxy="<%=proxy.proxy%>" class='btn'><div><i class="fa-solid fa-stop"></i> Stop</div></a>
-          <div class='flexible'>
-            <h3><i class="fa-solid fa-wifi"></i> Local Share</h3>
-            <div>Access Pinokio from any device on the same network. By default it's off.</div>
-            <span class='badge'><i class="fa-solid fa-circle-notch fa-spin"></i> Running at <a href="<%=proxy.proxy%>" target="_blank" features="browser"><%=proxy.proxy%></a></span>
-            <a id='wifi-qr' class='badge'><i class="fa-solid fa-qrcode"></i> Scan QR Code</a>
-          </div>
-        <% } else { %>
-          <a id='wifi' class='btn'><div><i class="fa-solid fa-play"></i> Start</div></a>
-          <a id='wifi-starting' class='btn disabled hidden'><div><i class="fa-solid fa-circle-notch fa-spin"></i> Starting</div></a>
-          <div class='flexible'>
-            <h3><i class="fa-solid fa-wifi"></i> Local Share</h3>
-            <div>Access Pinokio from any device on the same network. By default it's off.</div>
-          </div>
+        <a href="/proxy" class='flexible'>
+          <h3><i class="fa-solid fa-wifi"></i> Local Share</h3>
+          <div>Access Pinokio, Ollama, and other 3rd party apps from any device on the same network. By default it's off.</div>
+        </a>
+        <% if (false) { %>
+          <% if (proxy) { %>
+            <a id='wifi-stop' data-proxy="<%=proxy.proxy%>" class='btn'><div><i class="fa-solid fa-stop"></i> Stop</div></a>
+            <div class='flexible'>
+              <h3><i class="fa-solid fa-wifi"></i> Local Share</h3>
+              <div>Access Pinokio from any device on the same network. By default it's off.</div>
+              <span class='badge'><i class="fa-solid fa-circle-notch fa-spin"></i> Running at <a href="<%=proxy.proxy%>" target="_blank" features="browser"><%=proxy.proxy%></a></span>
+              <a id='wifi-qr' class='badge'><i class="fa-solid fa-qrcode"></i> Scan QR Code</a>
+            </div>
+          <% } else { %>
+            <a id='wifi' class='btn'><div><i class="fa-solid fa-play"></i> Start</div></a>
+            <a id='wifi-starting' class='btn disabled hidden'><div><i class="fa-solid fa-circle-notch fa-spin"></i> Starting</div></a>
+            <div class='flexible'>
+              <h3><i class="fa-solid fa-wifi"></i> Local Share</h3>
+              <div>Access Pinokio from any device on the same network. By default it's off.</div>
+            </div>
+          <% } %>
         <% } %>
       </div>
+        -->
       <div class='browser-options-row hidden'>
         <% if (cloudflare_pub) { %>
           <a id='cloudflare-stop' class='btn'><div><i class="fa-solid fa-stop"></i> Stop</div></a>

package/server/views/proxy.ejs

@@ -0,0 +1,357 @@
+<html>
+<head>
+<title>Pinokio</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+<link href="/xterm.min.css" rel="stylesheet" />
+<link href="/css/fontawesome.min.css" rel="stylesheet">
+<link href="/css/solid.min.css" rel="stylesheet">
+<link href="/css/regular.min.css" rel="stylesheet">
+<link href="/css/brands.min.css" rel="stylesheet">
+<link href="/markdown.css" rel="stylesheet"/>
+<link href="/noty.css" rel="stylesheet"/>
+<link href="/style.css" rel="stylesheet"/>
+<script src="/sweetalert2.js"></script>
+<% if (agent === "electron") { %>
+  <link href="/electron.css" rel="stylesheet"/>
+<% } %>
+<style>
+.line2 {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background: rgba(0,0,100,0.04);
+}
+.line2 a {
+  text-decoration: none;
+  color: black;
+}
+.status {
+  padding: 10px;
+  margin: 10px;
+  border-radius: 10px;
+}
+.status.offline {
+  background: silver;
+}
+.status.online {
+  background: yellowgreen;
+}
+.switch {
+  padding: 10px;
+  margin: 10px 0;
+}
+.switch[data-online=true] {
+  color: yellowgreen;
+}
+.button {
+  padding: 10px;
+}
+.on, .off {
+  display: flex;
+  align-items: center;
+}
+header .runner {
+  padding: 10px 0 0;
+}
+.proxy {
+  padding: 0 10px;
+  text-align: right;
+}
+.proxy a {
+  text-decoration: none;
+  display: inline-block;
+  padding: 5px 10px;
+  border-radius: 2px;
+  background: black;
+  color: white;
+}
+.browser-options-btns {
+  display: flex;
+  padding-top: 5px;
+}
+.browser-options-row {
+  border-top: 1px solid rgba(0,0,0,0.1);
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  display: flex;
+  padding: 20px 0;
+  align-items: flex-start;
+}
+.browser-options-row h3 {
+  margin: 0;
+  font-size: 14px;
+  margin-bottom: 3px;
+}
+.browser-options-row .btn.disabled {
+  opacity: 0.7;
+}
+.browser-options-row .btn {
+  font-weight: bold;
+  width: 100px;
+  text-align: center;
+  display: block;
+  margin-right: 10px;
+  flex-shrink: 0;
+  padding: 5px;
+}
+.badge {
+  font-size: 12px;
+  padding: 5px 10px;
+  background: rgba(0,0,100,0.1);
+  border-radius: 5px;
+  display: inline-block;
+  margin-top: 5px;
+}
+a.badge {
+  color: royalblue;
+  text-decoration: none;
+  cursor: pointer;
+}
+.badge a {
+  color: royalblue;
+  text-decoration: none;
+}
+body.dark .btn {
+  color: white;
+  border: 1px solid rgba(255,255,255,0.3);
+}
+body.dark .badge {
+  background: rgba(255,255,255,0.1);
+}
+body.dark .browser-options-row {
+  border-top: 1px solid rgba(255,255,255,0.05);
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+.description a {
+  color: royalblue;
+  text-decoration: none;
+}
+.line.align-top h3 {
+  align-items: flex-start;
+}
+.line a:hover {
+  color: red;
+}
+.btn-container {
+  margin-top: 10px;
+}
+.header-label {
+  font-size: 30px;
+  letter-spacing: -1px;
+  padding: 15px;
+  text-align: center;
+}
+@media only screen and (max-width: 480px) {
+  .btn2 {
+    padding: 5px;
+    font-size: 11px;
+  }
+  .nav-btns {
+    flex-grow: 1;
+    justify-content: center;
+    padding: 0;
+  }
+}
+</style>
+<body class='<%=theme%>'>
+<header class='navheader grabbable'>
+<h1>
+<a class='home' href="/"><i class="fa-solid fa-house"></i></a>
+<button class='btn2' id='back'><i class="fa-solid fa-chevron-left"></i></button>
+<button class='btn2' id='forward'><i class="fa-solid fa-chevron-right"></i></button>
+<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="https://portal.pinokio.computer/" target="_blank"><div><i class="fa-solid fa-face-smile-beam"></i></div><div>Community</div></a>
+  <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Debug</div></button>
+  <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><div><i class="fa-solid fa-download"></i></div><div>Download logs</div></a>
+  <a class='btn2' href="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
+  <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>
+</h1>
+</header>
+<main>
+  <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='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</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="<%=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>
+</main>
+<script>
+document.querySelector(".container").addEventListener("click", async (e) => {
+  let target
+  if (e.target.classList.contains("stop")) {
+    target = e.target
+  } else {
+    target = e.target.closest(".stop")
+  }
+  if (target) {
+    // stop
+    let res = await fetch("/proxy", {
+      method: "post",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        action: "stop",
+        target: target.getAttribute("data-target"),
+        name: target.getAttribute("data-name")
+      })
+    }).then((res) => {
+      return res.json()
+    })
+    location.href = location.href
+    return
+  }
+
+  if (e.target.classList.contains("start")) {
+    target = e.target
+  } else {
+    target = e.target.closest(".start")
+  }
+  if (target) {
+    let res = await fetch("/proxy", {
+      method: "post",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        action: "start",
+        target: target.getAttribute("data-target"),
+        name: target.getAttribute("data-name"),
+        port: target.getAttribute("data-port")
+      })
+    }).then((res) => {
+      return res.json()
+    })
+    location.href = location.href
+  }
+
+  if (e.target.classList.contains("wifi-qr")) {
+    target = e.target
+  } else {
+    target = e.target.closest(".wifi-qr")
+  }
+  if (target) {
+    let url = target.getAttribute("data-url")
+    let qr = target.getAttribute("data-qr")
+    console.log({ url, qr })
+    await Swal.fire({
+      title: "Local Share",
+      customClass: {
+        popup: "min-popup",
+        title: "min-title"
+      },
+      showConfirmButton: false,
+      html: `<div class='min-modal'>
+      <div>Access Pinokio from</div>
+      <div>any local network device</div>
+      <div><img src="${qr}"></div>
+  <a href="${url}" target="_blank">${url}</a>
+  </div>`
+    })
+  }
+
+})
+if (document.querySelector("#back")) {
+  document.querySelector("#back").addEventListener("click", (e) => {
+    history.back()
+  })
+}
+if (document.querySelector("#forward")) {
+  document.querySelector("#forward").addEventListener("click", (e) => {
+    history.forward()
+  })
+}
+<% if (proxy) { %>
+  if (document.querySelector("#wifi-stop")) {
+    document.querySelector("#wifi-stop").addEventListener("click", async (e) => {
+      let res = await fetch("/unpublish", {
+        method: "post",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          type: "local"
+        })
+      }).then((res) => {
+        return res.json()
+      })
+      console.log(res)
+      location.href = location.href
+    })
+  }
+<% } else { %>
+if (document.querySelector("#wifi")) { 
+  document.querySelector("#wifi").addEventListener("click", async (e) => {
+    document.querySelector("#wifi").classList.add("hidden")
+    document.querySelector("#wifi-starting").classList.remove("hidden")
+    let res = await fetch("/publish", {
+      method: "post",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        type: "local"
+      })
+    }).then((res) => {
+      return res.json()
+    })
+    console.log(res)
+    location.href = location.href
+  })
+}
+<% } %>
+</script>
+</body>
+</html>