pinokiod 0.1.32 → 0.1.33

package/kernel/api/index.js

@@ -381,6 +381,8 @@ class Api {
   }
   async step (request, rawrpc, input, i, total) {
 
+    console.log("STEP", { request, rawrpc, input, i, total })
+
     // clear global regular expression object RegExp.lastMatch (memory leak prevention)
     let r = /\s*/g.exec("");
 
@@ -795,6 +797,7 @@ class Api {
       // API Call
 
       request.path = this.resolvePath(this.userdir, request.uri)
+      console.log("#PROCESS", { request, userdir: this.userdir })
       let { cwd, script } = await this.resolveScript(request.path)
       request.cwd = cwd
 
@@ -880,8 +883,10 @@ class Api {
       filename = path.parse(scriptpath).base
     }
 
+
     // get the core script
     let script = (await this.loader.load(scriptpath)).resolved
+    console.log("##### ", { scriptpath, script })
 
     // if the sccript is a function, instantiate first
     if (typeof script === "function") {

package/kernel/api/key/index.js

@@ -0,0 +1,26 @@
+/*
+# 1. key.set => pops up key + password input
+{
+  "method": "key.set"
+}
+
+# 2. key.get => pops up key + password input
+# 2.1. Publick key/val
+{
+  "method": "key.get"
+}
+*/
+const fs = require('fs')
+const { createStore } = require('key-store')
+class Key {
+  async set(req, ondata, kernel) {
+    ondata(req.params, "key.set")
+    let { key, password } = await kernel.api.wait(req.parent.path)
+  }
+  async get(req, ondata, kernel) {
+    ondata(req.params, "key.get")
+    let { key, password } = await kernel.api.wait(req.parent.path)
+    return response
+  }
+}
+module.exports = Key

package/kernel/index.js

@@ -11,6 +11,7 @@ const Bin = require('./bin')
 const Api = require("./api")
 const Template = require('./template')
 const Shells = require("./shells")
+const Key = require("./key")
 const Config = require("./pinokio.json")
 const VARS = {
   pip: {
@@ -26,7 +27,7 @@ class Kernel {
     this.store = store
     this.arch = os.arch()
     this.platform = os.platform()
-
+    this.key = new Key()
   }
   resumeprocess(uri) {
     let proc = this.procs[uri]
@@ -174,6 +175,9 @@ class Kernel {
     }
     console.log("this.vars", this.vars)
 
+//    let keyfile = path.resolve(this.homedir, "keys.json")
+//    await this.key.init(keyfile)
+
 //    let home = this.store.get("home")
 //    if (home) {
 //      this.homedir = home

package/kernel/key.js

@@ -0,0 +1,43 @@
+const { createStore } = require('key-store')
+class Key {
+  async init(filePath) {
+    const saveKeys = (data) => {
+      return fs.promises.writeFile(filePath, JSON.stringify(data, null, 2), 'utf8')
+    }
+    const readKeys = async () => {
+      try {
+        let s = await fs.promises.readFile(filePath, "utf8")
+        return JSON.parse(s)
+      } catch (e) {
+        return {}
+      }
+    }
+    let keys = await readKeys()
+
+    this.store = await createStore(saveKeys, keys)
+  }
+  keys() {
+    return this.store.getKeyIDs()
+  }
+  get(key, password) {
+    if (password) {
+      return this.store.getPrivateKeyData(key, password)
+    } else {
+      return this.store.getPublicKeyData(key)
+    }
+  }
+  set(key, val, password) {
+    if (password) {
+      console.log({ key, val, password})
+      return this.store.saveKey(key, password, String(val))
+    } else {
+      console.log({ key, val})
+      //return this.store.savePublicKeyData(key, String(val))
+      return this.store.saveKey(key, "", "", String(val))
+    }
+  }
+  del(key) {
+    this.store.removeKey(key)
+  }
+}
+module.exports = Key

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -32,6 +32,7 @@
     "http-terminator": "^3.2.0",
     "isomorphic-git": "^1.23.0",
     "jsonpath-plus": "^7.2.0",
+    "key-store": "^1.2.0",
     "localtunnel": "^2.0.2",
     "lodash": "^4.17.21",
     "marked": "^5.0.1",

package/server/index.js

@@ -23,11 +23,13 @@ const multer = require('multer');
 const localtunnel = require('localtunnel');
 
 
+
 const Socket = require('./socket')
 const Kernel = require("../kernel")
 const packagejson = require("../package.json")
 class Server {
   constructor(config) {
+    this.tabs = {}
     this.agent = config.agent
     this.port = config.port
     this.kernel = new Kernel(config.store)
@@ -169,7 +171,8 @@ class Server {
     }
 
     // check if it's a folder or a file
-    let p = "/api"
+    let p = "/api"    // run mode
+    let _p = "/_api"   // edit mode
     let paths = [{
       name: '<i class="fa-solid fa-house"></i>',
       path: "/",
@@ -337,6 +340,7 @@ class Server {
         val: this.theme,
         options: ["light", "dark"]
       }]
+      console.log("agent", this.agent)
       res.render("settings", {
         version: this.version,
         logo: this.logo,
@@ -480,6 +484,11 @@ class Server {
         let template
         template = "fullscreen_editor"
 
+        if (req.query && req.query.mode === "source") {
+          template = "editor"
+        }
+
+
 // Deprecate source view and form view => Everything is full screen by default
 //        if (req.query && req.query.mode === "source") {
 //          if (req.query && req.query.fullscreen) {
@@ -681,6 +690,16 @@ class Server {
 //          })
 //        }
         console.log("mem", mem)
+        console.log("originalUrl", req.originalUrl)
+        let edu = new URL("http://localhost" + req.originalUrl)
+        edu.searchParams.set("mode", "source")
+        let editorUrl = edu.pathname + edu.search
+        console.log("editorUrl", editorUrl)
+        console.log("req.query", req.query)
+
+
+
+
         const result = {
           error,
           memory: mem,
@@ -688,7 +707,8 @@ class Server {
           logo: this.logo,
           theme: this.theme,
           //run: (req.query && req.query.run ? true : false),
-          run: true,    // run mode by default
+          //run: true,    // run mode by default
+          run: (req.query && req.query.mode === "source" ? false : true),
           stop: (req.query && req.query.stop ? true : false),
           pinokioPath,
           runnable,
@@ -709,6 +729,8 @@ class Server {
           install_required,
           //current: encodeURIComponent(req.originalUrl),
           current: req.originalUrl,
+          editorUrl,
+          execUrl: "~" + req.originalUrl.replace(/^\/_api/, "\/api")
         }
         console.log("RESULT", result)
 
@@ -936,6 +958,12 @@ class Server {
       // items
 
 
+      console.log("ITEMS", items)
+
+
+      let U = `${_p}/${pathComponents.join("/")}`
+      console.log("*******", { filepath, pathComponents, U })
+
 
       res.render("index", {
         error: error,
@@ -956,43 +984,45 @@ class Server {
         notRunning,
         readme,
         filepath,
-//        items: items.map((x) => {
-//          //let name = (x.name.startsWith("0x") ? Buffer.from(x.name.slice(2), "hex").toString() : x.name)
-//          let name
-//          let description
-//          let icon
-//          let uri
-//          if (meta) {
-//            let m = meta[x.name]
-//            name = (m && m.title ? m.title : x.name)
-//            description = (m && m.description ? m.description : "")
-//            if (m && m.icon) {
-//              icon = m.icon
-//            } else {
-//              icon = null
-//            }
-//            uri = x.name
-//          } else {
-//            if (x.isDirectory()) {
-//              icon = "fa-solid fa-folder"
-//            } else {
-//              icon = "fa-regular fa-file"
-//            }
-//            name = x.name
-//            description = ""
-//          }
-//          return {
-//            icon,
-//            menu: x.menu,
-//            //icon: (x.isDirectory() ? "fa-solid fa-folder" : "fa-regular fa-file"),
-//            name,
-//            uri,
-//            //description: x.path,
-//            description,
-//            url: p + "/" + x.name,
-//            browser_url: "/pinokio/browser/" + x.name
-//          }
-//        }),
+        items: items.map((x) => {
+          //let name = (x.name.startsWith("0x") ? Buffer.from(x.name.slice(2), "hex").toString() : x.name)
+          let name
+          let description
+          let icon
+          let uri
+          if (meta) {
+            let m = meta[x.name]
+            name = (m && m.title ? m.title : x.name)
+            description = (m && m.description ? m.description : "")
+            if (m && m.icon) {
+              icon = m.icon
+            } else {
+              icon = null
+            }
+            uri = x.name
+          } else {
+            if (x.isDirectory()) {
+              icon = "fa-solid fa-folder"
+            } else {
+              icon = "fa-regular fa-file"
+            }
+            name = x.name
+            description = ""
+          }
+          return {
+            icon,
+            menu: x.menu,
+            //icon: (x.isDirectory() ? "fa-solid fa-folder" : "fa-regular fa-file"),
+            name,
+            uri,
+            //description: x.path,
+            description,
+            //url: p + "/" + x.name,
+//            url: _p + "/" + x.name,
+            url: `${U}/${x.name}`,
+            browser_url: "/pinokio/browser/" + x.name
+          }
+        }),
       })
     }
   }
@@ -1585,6 +1615,15 @@ class Server {
         res.status(404).send(e.message);
       }
     })
+    this.app.get("/_api/*", async (req, res) => {
+      let pathComponents = req.params[0].split("/")
+      req.query.mode = "source"
+      try {
+        await this.render(req, res, pathComponents)
+      } catch (e) {
+        res.status(404).send(e.message)
+      }
+    })
     this.app.get("/api/*", async (req, res) => {
       let pathComponents = req.params[0].split("/")
       try {
@@ -1660,6 +1699,10 @@ class Server {
         res.json({ error: e.message })
       }
     })
+    this.app.post("/pinokio/tabs", async (req, res) => {
+      this.tabs[req.body.name] = req.body.tabs
+      res.json({ success: true })
+    })
     this.app.get("/pinokio/browser/:name", async (req, res) => {
       let name = req.params.name
       let app_path = this.kernel.path("api", name, "pinokio.js")
@@ -1689,12 +1732,14 @@ class Server {
         memory: this.kernel.memory,
         sidebar: "/pinokio/sidebar/" + name,
         name,
+        tabs: (this.tabs[name] || []),
         config,
 //        sidebar_url: "/pinokio/sidebar/" + name,
         home: req.originalUrl,
 //        paths,
         theme: this.theme,
         agent: this.agent,
+        src: "/_api/" + name,
         rawpath
       })
     })

package/server/public/modalinput.js

@@ -4,6 +4,8 @@ const ModalInput = async (params) => {
     title,
     type: "modal" (default) |"notify"
     form: [{
+      type,
+      items,
       key,
       title,
       description,
@@ -21,6 +23,13 @@ const ModalInput = async (params) => {
       let input
       if (type === 'textarea') {
         input = `<textarea oninput="autoExpand(this)" data-id="${field.key}" class="swal2-input" placeholder="${field.placeholder ? field.placeholder : ''}"></textarea>`
+      } else if (type === 'select') {
+        if (field.items && Array.isArray(field.items)) {
+          let items = field.items.map((item) => {
+            return `<option value="${item}">${item}</option>`
+          }).join("")
+          input = `<select>${items}</select>`
+        }
       } else {
         input = `<input type='${type}' data-id="${field.key}" class="swal2-input" placeholder="${field.placeholder ? field.placeholder : ''}">`
       }

package/server/public/style.css

@@ -783,10 +783,10 @@ body.dark .line {
   border-bottom: 1px solid var(--dark-thin);
 }
 body.dark .line.selected {
-/*
   background: rgba(0,0,0, 0.2);
-  */
+/*
   border-left: 6px solid white;
+  */
 }
 body.dark .line:hover {
   background: rgba(0,0,0, 0.2);
@@ -795,9 +795,9 @@ body.dark .line:hover {
   background: rgba(200,0,0, 0.04);
 }
 .line.selected {
-  border-left: 6px solid black;
-  /*
   background: rgba(0,0,100, 0.03);
+  /*
+  border-left: 6px solid black;
   */
 }
 .line {
@@ -966,7 +966,10 @@ button {
   cursor: pointer;
 }
 body.dark .btn {
+/*
   color: var(--dark-btn-color);
+  */
+  color: white;
   background: var(--dark-btn-bg);
 }
 .btn {
@@ -1286,7 +1289,10 @@ b {
   background: royalblue;
 }
 body.dark #new-window {
+/*
   color: var(--dark-btn-color);
+  */
+  color: white;
 }
 #new-window {
   padding: 10px;
@@ -1296,7 +1302,10 @@ body.dark #new-window {
   color: var(--light-color);
 }
 body.dark .btn2 {
+/*
   color: var(--dark-btn-color);
+  */
+  color: white;
 }
 .btn2:hover {
   background: rgba(0,0,0,0.06);
@@ -1378,10 +1387,17 @@ nav.error-message {
 }
 /*
 .running-apps {
+  background: rgba(0,0,100, 0.03);
   background: rgba(255,215, 0, 0.2);
 }
 */
+/*
+body.dark .running-apps {
+  border-left: 6px solid gold;
+}
+*/
 .running-apps {
+  border-left: 10px solid gold;
 /*
   background: rgba(255,215,0,0.03);
   */
@@ -1403,7 +1419,10 @@ nav.error-message {
   */
 }
 body.dark header .home {
+  /*
   color: var(--dark-btn-color);
+  */
+  color: white;
 }
 header .home {
   color: var(--light-color); 

package/server/views/browser.ejs

@@ -75,6 +75,7 @@ main iframe {
   text-decoration: none;
   align-items: center;
   border-radius: 0;
+  cursor: pointer;
 }
 .header-item.selected {
 }
@@ -99,7 +100,10 @@ body.dark .header-item .btn2 {
   border-radius: 30px;
 }
 body.dark .header-item.btn {
+  color: white;
+  /*
   color: var(--dark-color);
+  */
 }
 .header-item.btn {
   padding: 10px;
@@ -114,13 +118,19 @@ body .logo {
   color: var(--light-color);
 }
 body.dark .logo {
+/*
   color: var(--dark-btn-color);
+  */
+  color: white;
 }
 body #new-window {
   color: var(--light-color);
 }
 body.dark #new-window {
+  /*
   color: var(--dark-btn-color);
+  */
+  color: white;
 }
 .app-info {
 /*
@@ -167,17 +177,35 @@ body .footer {
 body.dark .footer {
   border-bottom: 1px solid rgba(255,255,255,0.04);
 }
+body.dark .header-item.cursor {
+  background: rgba(0,0,0, 0.2) !important;
+}
 .header-item.cursor {
+  background: rgba(0,0,100, 0.03) !important;
+/*
   border-left: 5px solid gold;
+  */
 }
 body .frame-link.selected {
+  border-left: 10px solid gold;
+  /*
   background: rgba(0,0,200,0.1) !important;
+  */
 }
+/*
 body.dark .frame-link.selected {
   background: rgba(0,0,0,0.2) !important;
 }
+*/
 .frame-link .tab {
   flex-grow: 1;
+  width: 100%;
+}
+.frame-link .tab .flexible {
+  min-width: 5px;
+}
+.frame-link .tab .display {
+  word-break: break-word;
 }
 body.dark .grid-btns {
   border-top: 1px solid rgba(255,255,255,0.04);
@@ -198,7 +226,10 @@ body.dark .grid-btns {
   cursor: pointer;
 }
 body.dark .grid-btns .btn2 {
+  color: white;
+  /*
   color: var(--dark-btn-color);
+  */
 }
 .footer {
   width: 100%;
@@ -214,6 +245,9 @@ body.dark .grid-btns .btn2 {
 .tab i {
   margin-right: 10px;
 }
+.temp-menu .del i {
+  margin: 0;
+}
 body .footer {
 }
 /*
@@ -250,6 +284,16 @@ nav .logo {
 .header-item.header-top {
   display: block;
 }
+#new-tab:hover {
+  background: rgba(0,0,0,0.07) !important;
+}
+#new-tab {
+  justify-content: center;
+  border-top: 1px solid rgba(0,0,0,0.04);
+}
+body.dark #new-tab {
+  border-top: 1px solid rgba(255,255,255,0.04);
+}
 </style>
 </head>
 <body class='<%=theme%>'>
@@ -260,10 +304,15 @@ nav .logo {
       <div><%=config.title%></div>
     </div>
   </div>
+  <div class='system'>
+    <a data-index="1" target="<%=src%>" href="<%=src%>" class='btn header-item selectable frame-link'>
+      <div class='tab'><i class="fa-regular fa-folder-open"></i> Files</div>
+    </a>
+  </div>
   <div class='menu'>
     <% config.menu.forEach((item, index) => { %>
       <% if (item.btn) { %>
-        <a data-index="<%=index+1%>" target="<%=item.src%>" href="<%=item.href%>" class='btn header-item selectable frame-link'>
+        <a data-index="<%=index+2%>" target="<%=item.src%>" href="<%=item.href%>" class='btn header-item selectable frame-link'>
           <div class='tab'><%-item.btn%></div>
           <% if (item.running) { %>
             <i class='fa-solid fa-spin fa-circle-notch'></i>
@@ -276,6 +325,18 @@ nav .logo {
       <% } %>
     <% }) %>
   </div>
+  <div class='temp-menu'>
+    <%tabs.forEach((tab) => { %>
+      <a target="<%=tab%>" href="<%=tab%>" class="btn header-item frame-link">
+        <div class='tab'>
+          <i class="fa-solid fa-link"></i><div class='display'><%=tab%></div><div class='flexible'></div><button class='btn2 del'><i class="fa-solid fa-xmark"></i></button>
+        </div>
+      </a>
+    <%})%>
+  </div>
+  <div id='new-tab' class='btn header-item'>
+    <i class="fa-solid fa-plus"></i>
+  </div>
   <div class='flexible'></div>
   <div class='grid-btns'>
     <a class='btn2' href="/?mode=explore" id='explore'><div><i class="fa-solid fa-globe"></i></div><div>Discover</div></a>
@@ -362,52 +423,54 @@ const renderSelection = (e, force) => {
       el.classList.remove("selected")
     })
     const target = document.querySelector(`[target='${id}']`)
-    target.classList.add("selected")
+    if (target) {
+      target.classList.add("selected")
 
-    // select the iframe
-    document.querySelectorAll("iframe").forEach((el) => {
-      el.classList.add("hidden")
-    })
-    let targetFrame = document.querySelector(`iframe[name='${target.target}']`)
-    console.log("#4", loaded)
-    console.log("targetFrame", targetFrame)
-    if (targetFrame) {
-      console.log("#5", loaded)
-      console.log({ loaded })
-      targetFrame.classList.remove("hidden")
-
-      // if the iframe already exists, do not 
-      if (loaded[target.target]){
-        if (e) {
-          e.preventDefault()
-          e.stopPropagation()
-        } else {
-          console.log("REFRESH")
-          if (force) {
-            targetFrame.src = target.href
-          }
-        }
-      } else {
-        console.log("load")
-        //targetFrame.contentWindow.addEventListener("load", () => {
-          console.log("#1")
+      // select the iframe
+      document.querySelectorAll("iframe").forEach((el) => {
+        el.classList.add("hidden")
+      })
+      let targetFrame = document.querySelector(`iframe[name='${target.target}']`)
+      console.log("#4", loaded)
+      console.log("targetFrame", targetFrame)
+      if (targetFrame) {
+        console.log("#5", loaded)
+        console.log({ loaded })
+        targetFrame.classList.remove("hidden")
+
+        // if the iframe already exists, do not 
+        if (loaded[target.target]){
           if (e) {
-            // coming from a click => don't need to set the src
+            e.preventDefault()
+            e.stopPropagation()
           } else {
-            // load without click
-            targetFrame.src = target.href
+            console.log("REFRESH")
+            if (force) {
+              targetFrame.src = target.href
+            }
           }
-          loaded[target.target] = true
-        //});
+        } else {
+          console.log("load")
+          //targetFrame.contentWindow.addEventListener("load", () => {
+            console.log("#1")
+            if (e) {
+              // coming from a click => don't need to set the src
+            } else {
+              // load without click
+              targetFrame.src = target.href
+            }
+            loaded[target.target] = true
+          //});
+        }
+      } else {
+        console.log("#6", loaded)
+        let frame = document.createElement("iframe")
+        frame.name = target.target
+        frame.src = target.href
+        document.querySelector("main").appendChild(frame)
+        console.log("#2")
+        loaded[target.target] = true
       }
-    } else {
-      console.log("#6", loaded)
-      let frame = document.createElement("iframe")
-      frame.name = target.target
-      frame.src = target.href
-      document.querySelector("main").appendChild(frame)
-      console.log("#2")
-      loaded[target.target] = true
     }
   } else {
     document.querySelector(".bar").classList.add("hidden")
@@ -427,28 +490,110 @@ document.querySelector("#reload").addEventListener("click", (e) => {
   renderSelection(null, true)
 })
 
-document.querySelector("aside").addEventListener("click", (e) => {
+document.querySelector("#new-tab").addEventListener("click", async (e) => {
+  const url = prompt("url")
+
+  if (url && url.trim().length > 0) {
+    console.log("url", url)
+    await addTab(url)
+  }
+})
+
+const syncTabs = async () => {
+  let tabs = []
+  document.querySelectorAll(".temp-menu .frame-link").forEach((el) => {
+    tabs.push(el.href)
+  })
+
+
+  // persist
+  console.log("sync tabs", tabs)
+
+  await fetch("/pinokio/tabs", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      name: "<%=name%>",
+      tabs
+    })
+  })
+}
+const addTab = async (url) => {
+  let item = document.createElement("a")
+  //let id = "ts" + Date.now()
+  let id = url
+  item.target = id
+  item.href = url
+  item.className = "btn header-item frame-link"
+  item.innerHTML = `<div class='tab'><i class="fa-solid fa-link"></i><div class='display'>${url}</div><div class='flexible'></div><button class='btn2 del'><i class="fa-solid fa-xmark"></i></button></div>`
+
+  document.querySelector(".temp-menu").appendChild(item)
+
+  let frame = document.createElement("iframe")
+  frame.name = id
+  document.querySelector("main").appendChild(frame)
+
+  await syncTabs()
+
+
+
+}
+
+
+document.querySelector("aside").addEventListener("click", async (e) => {
   let target
 
 
-  if (e.target.classList.contains("frame-link")) {
+  // delete
+  if (e.target.classList.contains("del")) {
     target = e.target
   } else {
-    target = e.target.closest(".frame-link")
+    target = e.target.closest(".del")
   }
 
+  if (target) {
+    e.preventDefault()
+    e.stopPropagation()
+    // Delete
+    // delete link
+    let el = target.closest(".frame-link")
+    console.log("target", el.target)
+    let iframe = document.querySelector("iframe[name='" + el.target + "']")
+    console.log("iframe", iframe)
+    if (iframe) {
+      // delete iframe
+      iframe.remove()
+    }
+    el.remove()
+    // update tabs
+    await syncTabs()
 
+  } else {
+    // Select
+    if (e.target.classList.contains("frame-link")) {
+      target = e.target
+    } else {
+      target = e.target.closest(".frame-link")
+    }
 
-  if (target) {
 
-    //location.hash = target.target
-    let id = getTarget(target.getAttribute("href"))
-    console.log("ID", id, target.href)
-    location.hash = id
 
-    renderSelection(e)
+    if (target) {
 
+      //location.hash = target.target
+      let id = getTarget(target.getAttribute("href"))
+      console.log("ID", id, target.href)
+      location.hash = id
+
+      renderSelection(e)
+
+    }
   }
+
+
+
 })
 const refresh = async () => {
   const res = await fetch("<%=sidebar%>").then((res) => {
@@ -473,9 +618,16 @@ const refresh = async () => {
   renderCursor()
 
 }
-window.addEventListener('message', (e) => {
+window.addEventListener('message', (event) => {
   console.log("Message received from the child: ", event.data); // Message received from child
-  refresh()
+  if (event.data && event.data.action) {
+    if (event.data.action.type === "newtab") {
+      console.log("create tab", event.data.action.url) 
+      addTab(event.data.action.url)
+    }
+  } else {
+    refresh()
+  }
 });
 document.addEventListener("keydown", (e) => {
   let size = document.querySelectorAll(".selectable").length

package/server/views/editor.ejs

@@ -73,6 +73,9 @@ td.key {
 #editor {
   background: var(--dark-bg);
 }
+header .runner {
+  padding: 10px 0;
+}
 </style>
 <script>
 document.addEventListener("DOMContentLoaded", async () => {
@@ -80,6 +83,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     document.querySelector(".requirements .content").innerHTML = '<div class="loading"><i class="fa-solid fa-circle-exclamation"></i> <%=error%></div>'
   <% } %>
   <% if (!install_required) { %>
+  /*
     document.querySelector("footer").addEventListener("click", (e) => {
       if (e.target.classList.contains("toggle-expand") || e.target.closest(".toggle-expand")) {
         let el = document.querySelector("footer .toggle-expand i")
@@ -91,6 +95,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         document.querySelector("footer").classList.toggle("expanded")
       }
     })
+    */
   <% } %>
   <% if (requirements_pending) { %>
     await new Promise((resolve, reject) => {
@@ -185,14 +190,16 @@ document.addEventListener("DOMContentLoaded", async () => {
         params: {
           //uri: "<%-uri%>",
           //uri: location.pathname.slice(1).replace("api/", ""),
-          uri: "~" + location.pathname
+          //uri: "~" + location.pathname
+          uri: "<%=execUrl%>",
         }
       }, (stream) => {
       })
     }
     save() {
       return new Promise((resolve, reject) => {
-        let cwd = "~" + location.pathname
+        //let cwd = "~" + location.pathname
+        let cwd = "<%=execUrl%>"
 
         this.socket.close()
         this.socket.run({
@@ -220,7 +227,8 @@ document.addEventListener("DOMContentLoaded", async () => {
 
         this.socket.run({
           //uri: location.pathname.slice(1).replace("api/", ""),
-          uri: "~" + location.pathname,
+          //uri: "~" + location.pathname,
+          uri: "<%=execUrl%>",
           //uri: "<%-uri%>",
           mode,
           input: query,
@@ -231,32 +239,34 @@ document.addEventListener("DOMContentLoaded", async () => {
         }, async (packet) => {
           console.log("packet", packet)
           if (packet.type === 'start') {
+            refreshParent(packet)
+            reloadMemory()
             if (packet.data && packet.data.description) {
               if ('current' in packet.data) {
                 document.querySelector("footer").innerHTML = `<b>
                   <i class="fa-solid fa-circle-notch fa-spin"></i>(${packet.data.current+1}/${packet.data.total}) ${packet.data.title ? packet.data.title : ''}
                 </b>
-                <div class='flexible content'>${packet.data.description}</div>
-                <div class='toggle-expand'>
-                  <i class="fa-solid fa-circle-chevron-up"></i>
-                </div>`
+                <div class='flexible content'>${packet.data.description}</div>`
+//                <div class='toggle-expand'>
+//                  <i class="fa-solid fa-circle-chevron-up"></i>
+//                </div>`
               } else {
                 document.querySelector("footer").innerHTML = `<b>
                   <i class="fa-solid fa-circle-notch fa-spin"></i> ${packet.data.title ? packet.data.title : ''}
                 </b>
-                <div class='flexible content'></div>
-                <div class='toggle-expand'>
-                  <i class="fa-solid fa-circle-chevron-up"></i>
-                </div>`
+                <div class='flexible content'></div>`
+//                <div class='toggle-expand'>
+//                  <i class="fa-solid fa-circle-chevron-up"></i>
+//                </div>`
               }
             } else if (packet.data && packet.data.method) {
               document.querySelector("footer").innerHTML = `<b>
                 <i class="fa-solid fa-circle-notch fa-spin"></i> (${packet.data.current+1}/${packet.data.total}) ${packet.data.method}
               </b>
-              <div class='flexible content'>${packet.data.params ? JSON.stringify(packet.data.params) : ''}</div>
-              <div class='toggle-expand'>
-                <i class="fa-solid fa-circle-chevron-up"></i>
-              </div>`
+              <div class='flexible content'>${packet.data.params ? JSON.stringify(packet.data.params) : ''}</div>`
+//              <div class='toggle-expand'>
+//                <i class="fa-solid fa-circle-chevron-up"></i>
+//              </div>`
             }
           } else if (packet.type === "stream") {
             document.querySelector(".containers").classList.add("running")
@@ -274,10 +284,13 @@ document.addEventListener("DOMContentLoaded", async () => {
             document.querySelector(".run .starting").classList.add("hidden")
             document.querySelector(".run .stop").classList.remove("hidden")
           } else if (packet.type === 'disconnect') {
-            refreshParent()
+            refreshParent(packet)
+            reloadMemory()
             this.term.write("\r\nNot connected...\r\n")
             document.querySelector("footer").innerHTML = "<b>Ready</b>"
             this.socket.close()
+            document.querySelector(".run .play").classList.remove("hidden")
+            document.querySelector(".run .stop").classList.add("hidden")
           } else if (packet.type === 'connect') {
 //            document.querySelector(".terminal-container").classList.remove("hidden")
             const message = "..........Connected!\r\n"
@@ -307,7 +320,7 @@ document.addEventListener("DOMContentLoaded", async () => {
             if (input) {
               this.socket.respond({
                 response: input,
-                uri: "~" + location.pathname,
+                uri: "<%=execUrl%>"
               })
             }
             /*
@@ -331,13 +344,14 @@ document.addEventListener("DOMContentLoaded", async () => {
               }
             }
             */
-            refreshParent()
-            let params = packet.data
-            window.open(
-              params.uri,
-              (params.target || "_self"),
-              params.features
-            )
+///// DEPRECATE browser.open : Pinokio IS the browser. Everything opens in Pinokio. May bring back when necessary
+//            refreshParent()
+//            let params = packet.data
+//            window.open(
+//              params.uri,
+//              (params.target || "_self"),
+//              params.features
+//            )
           } else if (packet.type === "browser.close") {
             let params = packet.data
             if (params && params.target) {
@@ -404,6 +418,8 @@ document.addEventListener("DOMContentLoaded", async () => {
               n.Noty(payload)
             }
           } else if (packet.type === "result") {
+            refreshParent(packet)
+            reloadMemory()
             if (packet.data) {
 //              document.querySelector("#response").innerHTML = he.escape(JSON.stringify(packet.data, null, 2))
             }
@@ -417,10 +433,12 @@ document.addEventListener("DOMContentLoaded", async () => {
 //              type: "error"
 //            })
             this.socket.close()
+            refreshParent(packet)
+            reloadMemory()
             //document.querySelector("footer").innerHTML = `<b><i class="fa-solid fa-triangle-exclamation"></i> ERROR</b><pre>${packet.data}</pre>`
             document.querySelector("footer .content").innerHTML = document.querySelector("footer .content").innerHTML +  `<pre class='error'>${packet.data}</pre>`
-            document.querySelector("footer .toggle-expand i").className = "fa-solid fa-circle-chevron-down"
-            document.querySelector("footer").classList.add("expanded")
+//            document.querySelector("footer .toggle-expand i").className = "fa-solid fa-circle-chevron-down"
+//            document.querySelector("footer").classList.add("expanded")
             document.querySelector("footer i").className = "fa-solid fa-triangle-exclamation"
 
             document.querySelector(".run .play").classList.remove("hidden")
@@ -614,7 +632,63 @@ document.addEventListener("DOMContentLoaded", async () => {
     location.href = "/?mode=explore"
   })
   Reporter()
+  document.querySelector(".memory").addEventListener("click", async (e) => {
+    let target = e.target.classList.contains("tunnel") ? e.target : e.target.closest(".tunnel")
+    let target2 = e.target.classList.contains("tunnel-stop") ? e.target : e.target.closest(".tunnel-stop")
+    if (target) {
+      e.preventDefault()
+      e.stopPropagation()
+      let url = target.getAttribute("data-url")
+      let response = await fetch("/pinokio/tunnel", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ url, action: "start" })
+      }).then((res) => {
+        return res.json()
+      })
+      await reloadMemory()
+    } else if (target2) {
+      console.log("target2", target2)
+      e.preventDefault()
+      e.stopPropagation()
+      let url = target2.getAttribute("data-url")
+      let response = await fetch("/pinokio/tunnel", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ url, action: "stop" })
+      }).then((res) => {
+        return res.json()
+      })
+      await reloadMemory()
+    }
+  })
 })
+const reloadMemory = async () => {
+  let url = "/pinokio/memory?filepath=" + encodeURI("<%-filepath%>")
+  console.log("Url", url)
+  let memory = await fetch(url).then((res) => {
+    return res.json()
+  })
+  console.log("memory", memory)
+  document.querySelector(".memory table").innerHTML = memory.map((m) => {
+    let html = `<tr><td>${m.key}</td><td>${m.val}</td>`
+    if (m.localhost) {
+      if (m.tunnel) {
+        html += `<td>${m.tunnel}</td>
+  <td><a class='btn2' target="_blank" href="${m.tunnel}"><i class="fa-solid fa-arrow-up-right-from-square"></i> Open</a></td>
+  <td><button data-url="${m.val}" class='btn2 tunnel-stop'><i class="fa-solid fa-lock-closed"></i> Make Private</button></td>`
+      } else {
+        html += `<td><button data-url="${m.val}" class='btn2 tunnel'><i class="fa-solid fa-lock-open"></i> Make Public</button></td>`
+      }
+    }
+    html += "</tr>"
+    return html
+  }).join("")
+}
 </script>
 </head>
 <% if (install_required) { %>
@@ -642,15 +716,58 @@ document.addEventListener("DOMContentLoaded", async () => {
   <div class='pinokiourl'><i class="fa-solid fa-link"></i><%=pinokioPath%></div>
   <% } %>
   <% if (!install_required) { %>
+  <!--
+    <div class='runner'>
+      <div class='btn run <%= mod && runnable ? "" : "hidden" %>'>
+        <span class='play'><i class="fa-solid fa-play"></i> Run</span>
+        <span class='starting hidden'><i class="fa-solid fa-circle-notch fa-spin"></i> Starting...</span>
+        <span class='stop hidden'><i class="fa-solid fa-stop"></i> Stop</span>
+      </div>
+      <div id='save' class='btn disabled'>
+        <span class='save'><i class="fa-solid fa-check"></i> Save</span>
+      </div>
+    </div>
+    -->
     <div class='runner'>
       <div class='btn run <%= mod && runnable ? "" : "hidden" %>'>
         <span class='play'><i class="fa-solid fa-play"></i> Run</span>
         <span class='starting hidden'><i class="fa-solid fa-circle-notch fa-spin"></i> Starting...</span>
         <span class='stop hidden'><i class="fa-solid fa-stop"></i> Stop</span>
       </div>
+      <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-eye"></i> View File</button>
+      <!--
+      <button class='btn' id='source' data-editor-url="<%=editorUrl%>">Navigate</button>
+      -->
+      <!--
       <div id='save' class='btn disabled'>
         <span class='save'><i class="fa-solid fa-check"></i> Save</span>
       </div>
+      -->
+      <% if (memory.length > 0) { %>
+        <div class='memory'>
+          <table>
+          <% memory.forEach((m) => { %>
+            <tr>
+              <td><%=m.key%></td>
+              <td><%=m.val%></td>
+              <% if (m.localhost) { %>
+                <% if (m.tunnel) { %>
+                  <td><%=m.tunnel%></td>
+                  <td><a class='btn2' target="_blank" href="<%=m.tunnel%>"><i class="fa-solid fa-arrow-up-right-from-square"></i> Open</a></td>
+                  <td><button data-url="<%=m.val%>" class='btn2 tunnel-stop'><i class="fa-solid fa-lock-closed"></i> Make Private</button></td>
+                <% } else { %>
+                  <td><button data-url="<%=m.val%>" class='btn2 tunnel'><i class="fa-solid fa-lock-open"></i> Make Public</button></td>
+                <% } %>
+              <% } %>
+            </tr>
+          <% }) %>
+          </table>
+        </div>
+      <% } else { %>
+        <div class='memory'>
+          <table></table>
+        </div>
+      <% } %>
     </div>
   <% } %>
   </header>

package/server/views/fullscreen_editor.ejs

@@ -247,6 +247,8 @@ document.addEventListener("DOMContentLoaded", async () => {
             this.term.write("\r\nDisconnected...\r\n")
             document.querySelector("footer").innerHTML = "<b>Ready</b>"
             this.socket.close()
+            document.querySelector(".run .play").classList.remove("hidden")
+            document.querySelector(".run .stop").classList.add("hidden")
           } else if (packet.type === 'connect') {
             const message = "..........Connected!\r\n"
             this.term.write(message)
@@ -263,6 +265,28 @@ document.addEventListener("DOMContentLoaded", async () => {
             document.querySelector(".run .play").classList.add("hidden")
             document.querySelector(".run .starting").classList.add("hidden")
             document.querySelector(".run .stop").classList.remove("hidden")
+//          } else if (packet.type === "key.set") {
+//            let keys = await fetch("/pinokio/keys").then((res) => {
+//              return res.json()
+//            })
+//            let input = await ModalInput({
+//              title: "Key",
+//              description: "select a key",
+//              form: [{
+//                key: "key",
+//                type: "select",
+//                items: keys,
+//              }, {
+//                key: "password",
+//                type: "password",
+//              }]
+//            })
+//            if (input) {
+//              this.socket.respond({
+//                response: input,
+//                uri: "~" + location.pathname,
+//              })
+//            }
           } else if (packet.type === "input") {
             let params = packet.data
             let type = (params.type ? params.type : "modal")
@@ -611,6 +635,7 @@ document.addEventListener("DOMContentLoaded", async () => {
       })
       await reloadMemory()
     } else if (target2) {
+      console.log("target2", target2)
       e.preventDefault()
       e.stopPropagation()
       let url = target2.getAttribute("data-url")
@@ -626,6 +651,17 @@ document.addEventListener("DOMContentLoaded", async () => {
       await reloadMemory()
     }
   })
+  /*
+  document.querySelector("#source").addEventListener("click", (e) => {
+    refreshParent({
+      id: "<%=filepath%>",
+      action: {
+        "type": "newtab",
+        "url": e.target.getAttribute("data-editor-url")
+      }
+    })
+  })
+  */
 })
 const reloadMemory = async () => {
   let url = "/pinokio/memory?filepath=" + encodeURI("<%-filepath%>")
@@ -649,6 +685,7 @@ const reloadMemory = async () => {
     return html
   }).join("")
 }
+
 </script>
 </head>
 <% if (install_required) { %>
@@ -684,7 +721,10 @@ const reloadMemory = async () => {
         <span class='starting hidden'><i class="fa-solid fa-circle-notch fa-spin"></i> Starting...</span>
         <span class='stop hidden'><i class="fa-solid fa-stop"></i> Stop</span>
       </div>
-      <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-regular fa-folder-open"></i> View File</button>
+      <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-eye"></i> View File</button>
+      <!--
+      <button class='btn' id='source' data-editor-url="<%=editorUrl%>">Navigate</button>
+      -->
       <!--
       <div id='save' class='btn disabled'>
         <span class='save'><i class="fa-solid fa-check"></i> Save</span>

package/server/views/index.ejs

@@ -116,6 +116,7 @@
   <div class='pinokiourl'><i class="fa-solid fa-link"></i><%=pinokioPath%></div>
   <% } %>
 <% } %>
+<!--
 <div class='runner'>
   <% if (display.includes("menu")) { %>
     <% config.menu.forEach((item) => { %>
@@ -138,6 +139,7 @@
   <button id='install' class='btn' data-url="<%=config.install%>"><i class="fa-solid fa-plug"></i> Install</button>
   <% } %>
 </div>
+-->
 <% if (display.includes("dependencies")) { %>
 <div class='dependencies'>
   <h2>Prerequisites</h2>
@@ -466,31 +468,31 @@ document.querySelector("form input[type=search]").focus()
 <% } %>
 
 <% if (display.includes("menu")) { %>
-document.querySelector(".runner").addEventListener("click", async (e) => {
-  let el = e.target.closest(".btn")
-  if (!el) {
-    if (el.classList.contains("btn")) {
-      el = e.target
-    }
-  }
-
-  if (el) {
-    let url = el.getAttribute("data-url")
-    if (url) {
-      let target = el.getAttribute("data-target")
-      if (target && target.length > 0) {
-        let agent = el.getAttribute("data-agent")
-        if (agent && agent.length > 0) {
-          window.open(url, target, agent)
-        } else {
-          window.open(url, target)
-        }
-      } else {
-        location.href = url
-      }
-    }
-  }
-})
+//document.querySelector(".runner").addEventListener("click", async (e) => {
+//  let el = e.target.closest(".btn")
+//  if (!el) {
+//    if (el.classList.contains("btn")) {
+//      el = e.target
+//    }
+//  }
+//
+//  if (el) {
+//    let url = el.getAttribute("data-url")
+//    if (url) {
+//      let target = el.getAttribute("data-target")
+//      if (target && target.length > 0) {
+//        let agent = el.getAttribute("data-agent")
+//        if (agent && agent.length > 0) {
+//          window.open(url, target, agent)
+//        } else {
+//          window.open(url, target)
+//        }
+//      } else {
+//        location.href = url
+//      }
+//    }
+//  }
+//})
 <% } %>
 <% if (display.includes("install")) { %>
 document.querySelector("#install").addEventListener("click", async (e) => {
@@ -504,7 +506,7 @@ document.querySelector("#explore").addEventListener("click", async (e) => {
   location.href = "/?mode=explore"
 })
 <% } %>
-Reporter()
+//Reporter()
 /*
 <% if (display.includes("dependencies")) { %>
 document.querySelector(".requirements").addEventListener("click", (e) => {