pinokiod 1.0.30 → 1.0.32

package/kernel/shell.js

@@ -31,6 +31,11 @@ class Shell {
     this.platform = os.platform()
     this.logs = {}
     this.shell = this.platform === 'win32' ? 'cmd.exe' : 'bash';
+
+    // Windows: /D => ignore AutoRun Registry Key
+    // Others: --noprofile => ignore .bash_profile, --norc => ignore .bashrc
+    this.args = this.platform === 'win32' ? ["/D"] : ["--noprofile", "--norc"]
+
     //this.vt = new Terminal({ allowProposedApi: true, scrollback: 5, })
     // this.vt = new Terminal({
     //     allowProposedApi: true,
@@ -113,6 +118,9 @@ class Shell {
     this.env.GRADIO_TEMP_DIR = path.resolve(this.kernel.homedir, "cache", "GRADIO_TEMP_DIR")
     this.env.PIP_CONFIG_FILE = path.resolve(this.kernel.homedir, "pipconfig")
 
+    this.env.PS1 = "<<PINOKIO SHELL>> "
+//    this.env.PROMPT_COMMAND = "export PS1=\"<<PINOKIO SHELL>> \""
+
     let PATH_KEY;
     if (this.env.Path) {
       PATH_KEY = "Path"
@@ -182,6 +190,8 @@ class Shell {
     // automatically add self to the shells registry
     this.kernel.shell.add(this)
 
+    console.log("** this.env", this.env)
+
     if (params.sudo) {
       let options = {
         name: "Pinokio",
@@ -352,7 +362,7 @@ class Shell {
       //let re = /([\r\n]+[^\r\n]+)(\1)/gs
       let re = /(.+)(\1)/gs
       console.log("get prompt - pty.spawn", config)
-      let term = pty.spawn(this.shell, [], config)
+      let term = pty.spawn(this.shell, this.args, config)
       console.log("terminal spawned", term)
       let ready
       console.log("create terminal for prompt")
@@ -544,7 +554,7 @@ class Shell {
         if (!this.ptyProcess) {
           // ptyProcess doesn't exist => create
           this.done = false
-          this.ptyProcess = pty.spawn(this.shell, [], config)
+          this.ptyProcess = pty.spawn(this.shell, this.args, config)
           this.ptyProcess.onData((data) => {
             if (!this.done) {
               this.queue.push(data)

package/package.json

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

package/server/index.js

@@ -343,6 +343,7 @@ class Server {
     } else if (pathComponents.length === 0 && req.query.mode === "settings") {
       let configArray = [{
         key: "home",
+        description: "* Do NOT use exFAT drives",
         val: this.kernel.homedir,
         placeholder: "Enter the absolute path to use as your Pinokio home folder (D:\\pinokio, /Users/alice/pinokiofs, etc.)"
       }, {
@@ -351,6 +352,7 @@ class Server {
         options: ["light", "dark"]
       }]
       console.log("agent", this.agent)
+      console.log({ configArray })
       res.render("settings", {
         version: this.version,
         logo: this.logo,
@@ -1168,10 +1170,16 @@ class Server {
             }
           }
         }
+        config.menu[i].target = "@" + (config.menu[i].id || config.menu[i].src)
       }
+
+
       config.menu = config.menu.filter((item) => {
         return item.btn
       })
+
+        
+      
       console.log("config", JSON.stringify(config,null,2))
       return config
     } else {
@@ -1602,6 +1610,7 @@ class Server {
       if (req.query.mode === 'settings') {
         let configArray = [{
           key: "home",
+          description: "* Do NOT use exFAT drives",
           val: this.kernel.homedir ? this.kernel.homedir : path.resolve(os.homedir(), "pinokio"),
           placeholder: "Enter the absolute path to use as your Pinokio home folder (D:\\pinokio, /Users/alice/pinokiofs, etc.)"
         }, {
@@ -1849,9 +1858,25 @@ class Server {
         theme: this.theme,
         agent: this.agent,
         src: "/_api/" + name,
-        rawpath
+        rawpath,
       })
     })
+    this.app.post("/pinokio/delete", async (req, res) => {
+      if (req.body.name) {
+        let folderPath = this.kernel.path("api", req.body.name)
+        console.log("delete", folderPath)
+        await rimraf(folderPath)
+        await new Promise((resolve, reject) => {
+          setTimeout(() => {
+            resolve()
+          }, 5000)
+        })
+        console.log("deleted")
+        res.json({ success: true })
+      } else {
+        res.json({ error: e.stack })
+      }
+    })
 //    this.app.get("/pinokio/shell_state", (req, res) => {
 //      let states = this.kernel.shell.shells.map((s) => {
 //        return {

package/server/public/install.js

@@ -135,7 +135,8 @@ const createTerm = () => {
     //theme: xtermTheme.Piatto_Light,
     //theme: xtermTheme.Github,
     //theme: xtermTheme.Cobalt_Neon,      // top legibility
-    theme: xtermTheme.Duotone_Dark,
+    //theme: xtermTheme.Duotone_Dark,
+    theme: xtermTheme.FrontEndDelight,
     //theme: xtermTheme.Seafoam_Pastel,
     //theme: xtermTheme.IC_Green_PPL,
     //theme: xtermTheme.FunForrest,

package/server/public/style.css

@@ -7,19 +7,21 @@
   */
   /*
   --dark-nav-bg: #161616;
-  */
   --dark-nav-bg: rgb(31, 29, 39);
+  */
+  --dark-nav-bg: rgb(27, 28, 29);
 
+  --dark-bg: rgb(27, 28, 29);
 /*
   --dark-bg: #202020;
-  */
   --dark-bg: rgb(31, 29, 39);
+  */
   --light-bg: rgba(0,0,150,0.05);
 
   --light-thin: rgba(0,0,0,0.1);
   --dark-thin: rgba(255,255,255,0.03);
 
-  --dark-color: rgba(255,255,255,0.9);
+  --dark-color: rgba(255,255,255,0.8);
   --light-color: rgba(0,0,0,0.9);
 
   --dark-fade: rgba(255,255,255,0.6);
@@ -43,7 +45,10 @@
   --light-btn-color: white;
 
   --dark-btn-bg: rgba(0,0,0,0.8);
+  /*
   --dark-btn-color: #b7a1ff;
+  */
+  --dark-btn-color: whitesmoke;
 }
 body.columns footer {
 }
@@ -77,14 +82,19 @@ footer pre {
   background: none !important;
 }
 footer {
+  font-family: verdana;
   overflow: hidden;
+  font-size: 11px;
+  font-weight: normal;
 /*
   overflow: auto;
   */
   box-sizing: border-box;
   color: var(--dark-color);
   background: var(--dark-bg);
+  /*
   border-top: 1px solid rgba(255,255,255,0.05);
+  */
   display: flex;
   align-items: center;
   padding: 10px;
@@ -99,6 +109,8 @@ footer b {
   flex-shrink: 0;
   color: var(--dark-btn-color);
   margin-right: 10px;
+  font-weight: normal;
+  font-size: 11px;
 /*
   background: var(--dark-btn-color);
   color: var(--dark-bg);
@@ -837,9 +849,12 @@ body.dark .line:hover {
   vertical-align: middle;
   font-weight: normal;
 }
+body.dark .line .avatar i {
+  color: var(--dark-btn-color);
+}
 .line .avatar i {
   font-size: 60px;
-  color: var(--dark-btn-color);
+  color: var(--dark-bg);
 }
 .line .description {
   font-size: 13px;

package/server/views/bootstrap.ejs

@@ -132,7 +132,8 @@ document.addEventListener("DOMContentLoaded", () => {
         //theme: xtermTheme.Seafoam_Pastel,
         //theme: xtermTheme.IC_Green_PPL,
         //theme: xtermTheme.FunForrest,
-        theme: xtermTheme.Jackie_Brown,
+        //theme: xtermTheme.Jackie_Brown,
+        theme: xtermTheme.FrontEndDelight,
         //theme: xtermTheme.Ocean,
 
         //theme: xtermTheme.Blazer,

package/server/views/browser.ejs

@@ -30,6 +30,12 @@ body {
 .menu {
   overflow: auto;
 }
+body.dark .m {
+  border-top: 1px solid rgba(255,255,255,0.04);
+}
+.m {
+  border-top: 1px solid rgba(0,0,0,0.04);
+}
 .container {
   display: flex;
   flex-direction: column;
@@ -196,6 +202,9 @@ body.dark .header-item.cursor {
   border-left: 5px solid gold;
   */
 }
+.frame-link {
+  cursor: pointer;
+}
 body .frame-link.selected {
 /*
   border-right: 10px solid gold;
@@ -210,7 +219,10 @@ body .frame-link.selected {
   color: white;
 }
 body.dark .frame-link.selected {
-  background: rgba(0,0,0,0.2) !important;
+  background: rgba(0,0,0,0.7) !important;
+}
+.frame-link .loader {
+  padding: 5px;
 }
 .frame-link .tab {
   flex-grow: 1;
@@ -218,7 +230,9 @@ body.dark .frame-link.selected {
   width: 100%;
   */
   word-break: break-word;
+  /*
   margin-right: 10px;
+  */
 }
 .frame-link .tab .flexible {
   min-width: 5px;
@@ -265,22 +279,31 @@ body.dark .grid-btns .btn2 {
   margin-right: 10px;
 }
 .temp-menu {
+/*
   border-top: 1px solid rgba(0,0,0,0.1);
+  */
 }
 .temp-menu .del i {
   margin: 0;
 }
+#delete {
+  color: brown;
+}
 body .footer {
 }
 body.dark nav {
+/*
   border-bottom: 1px solid rgba(255,255,255,0.04);
+  */
 }
 nav {
   background: white;
   padding: 5px;
   cursor: grab !important;
   -webkit-app-region: drag !important;
+  /*
   border-bottom: 1px solid rgba(0,0,0,0.04);
+  */
   box-sizing: border-box;
 }
 nav .btn2 {
@@ -293,7 +316,8 @@ nav .logo {
 }
 #location {
   padding: 5px;
-  font-size: 14px;
+  font-size: 12px;
+  font-family: verdana;
 }
 .bar {
   -webkit-app-region: no-drag !important;
@@ -333,6 +357,21 @@ body.dark #new-tab {
   padding-left: 15px;
   box-sizing: border-box;
 }
+body.dark .loader-popup {
+  background: rgba(0,0,0,0.2);
+  color: whitesmoke;
+}
+.loader-popup {
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: 1px;
+  padding: 20px;
+  background: rgba(0,0,0,0.2);
+  color: white;
+}
+body.dark .loader-container {
+  background: rgba(255,255,255,0.3);
+}
 </style>
 </head>
 <body class='<%=theme%>'>
@@ -343,9 +382,12 @@ body.dark #new-tab {
       <div><%=config.title%></div>
     </div>
   </div>
-  <div class='m system'>
+  <div class='m n system' data-type="n">
     <!--<a data-index="0" target="<%=src%>" href="<%=src%>" class='btn header-item frame-link'>-->
-    <a target="<%=src%>" href="<%=src%>" class='btn header-item frame-link'>
+    <div id='delete' data-name="<%=name%>" class='btn header-item frame-link'>
+      <div class='tab'><i class="fa-solid fa-trash-can"></i> Delete</div>
+    </div>
+    <a target="<%=src%>" href="<%=src%>" class='btn header-item frame-link' data-index="0">
       <div class='tab'><i class="fa-regular fa-folder-open"></i> Files</div>
     </a>
   </div>
@@ -399,12 +441,14 @@ body.dark #new-tab {
     -->
   </nav>
   <main class='browserview'>
-    <% if (false && config.menu) { %>
-      <% config.menu.forEach((item) => { %>
-        <% if (item.btn && item.src) { %>
-          <iframe name='<%=item.src%>' class='hidden'></iframe>
-        <% } %>
-      <% }) %>
+    <% if (false) { %>
+      <% if (config.menu) { %>
+        <% config.menu.forEach((item) => { %>
+          <% if (item.btn && item.src) { %>
+            <iframe name='<%=item.src%>' class='hidden'></iframe>
+          <% } %>
+        <% }) %>
+      <% } %>
     <% } %>
   </main>
 </div>
@@ -425,6 +469,35 @@ const getTarget = (href) => {
     return u.pathname
   }
 }
+const subUrlOf = (s, f) => {
+  debugger
+
+  let subsetUrl = (s.startsWith("http") ? s : "http://localhost" + s)
+  let fullUrl = (f.startsWith("http") ? f: "http://localhost" + f)
+
+  const subsetParsed = new URL(subsetUrl)
+  const fullParsed = new URL(fullUrl)
+
+  if (subsetParsed.pathname !== fullParsed.pathname) {
+    return false;
+  }
+
+  // Check if all search parameters in the subset URL are present in the full URL
+  for (const [key, val] of subsetParsed.searchParams) {
+
+    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
+    }
+  }
+
+  return true;
+}
 const renderCursor = () => {
   document.querySelectorAll(".selectable").forEach((el) => {
     el.classList.remove("cursor")
@@ -462,10 +535,18 @@ const renderSelection = (e, force) => {
     document.querySelector(".bar").classList.remove("hidden")
     //let id = getTarget(location.hash.slice(1))
     let id = location.hash.slice(1)
-    let type = id[0]
-    let index = id.slice(1)
 
-console.log({ type, index })
+
+    let selector
+    if (id.startsWith("@")) {
+      selector = `aside [target='${id.slice(1)}']`
+    } else {
+      let type = id[0]
+      let index = id.slice(1)
+      console.log({ type, index })
+      selector = `aside .${type} [data-index='${index}']`
+    }
+
 
     // select the selected link
 //    document.querySelectorAll(".frame-link").forEach((el) => {
@@ -475,107 +556,162 @@ console.log({ type, index })
 
 
 //    const target = document.querySelector(`[target='${id}']`)
+
+
     let target
     if (e) {
+      // If the renderSelection is triggered by an event, look for the frame-link that's triggering the event
       if (e.target.classList.contains("frame-link")) {
         target = e.target
       } else {
         target = e.target.closest(".frame-link")
       }
+    } else {
+      // if not triggered by an event, look for the target from the location hash
+      target = document.querySelector(selector)
     }
 
 
-    if (!target) {
-      // find target by id
-      //target = document.querySelector("aside [target='" + id + "']")
-      target = document.querySelector(`aside .${type} [data-index='${index}']`)
-    }
+    // if the target was found either through:
+    // 1. looking for the frame-link that triggered the event
+    // 2. or by looking at the location hash
+    //
+    //  => select that tab and frame
 
     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").innerHTML = url
 
-//      document.querySelector("#location").innerHTML = location.hash.slice(1)
-//
-//      if (location.hash.slice(1).startsWith("/")) {
-//        //document.querySelector("#open-browser").classList.add("hidden")
-//        document.querySelector("#open-browser").classList.remove("hidden")
-//        document.querySelector("#open-browser").href = location.hash.slice(1)
-//      } else {
-//        document.querySelector("#open-browser").classList.remove("hidden")
-//        //document.querySelector("#open-browser").href = id
-//        document.querySelector("#open-browser").href = location.hash.slice(1)
-//      }
-//      document.querySelector("#clone-tab").setAttribute("data-href", location.hash.slice(1))
-
-
 
+      // select the selected target element (tab)
       target.classList.add("selected")
 
-      // select the iframe
+      // hide all frames
       document.querySelectorAll("iframe").forEach((el) => {
         el.classList.add("hidden")
       })
-      let targetFrame = document.querySelector(`iframe[name='${target.target}']`)
-      if (targetFrame) {
-        targetFrame.classList.remove("hidden")
 
-        // if the iframe already exists, do not 
-        if (loaded[target.target]){
 
-          let mode = target.getAttribute("data-mode")
-          if (mode === "refresh") {
-            targetFrame.src = target.href
-            return
+      debugger
+
+      // Look for the frame
+      // 1. if it's hard (".h")
+      //    look for the url that matches
+      // 2. if it's soft (".s")
+      //    find using the name attribute
+      let targetFrame;
+      if (target.closest(".h")) {
+        let hardFrames = document.querySelectorAll(".browserview iframe[name^='@']")
+        let port = new URL(target.href).port
+        for(let frame of hardFrames) {
+          console.log({ src: frame.src, href: target.href, target: target.target })
+          // Types of links in the tab
+          if (String(port) === "42000") {
+            // 1. running from 42000 => find a frame whose base URL matches the tab's base URL
+            // Pinokio links
+            let targetPath = new URL(target.href).pathname
+            let framePath = new URL(frame.src).pathname
+            if (targetPath === framePath) {
+              let beforeName = frame.name
+              frame.name = target.target
+              console.log("SET FRAME", { before: beforeName, after: frame.name, target: target.target })
+              targetFrame = frame
+              break
+            }
+          } else {
+            // 2. rest => find the frame whose src exactly matches the tab's url
+            if (target.href === frame.src) {
+              frame.name = target.target
+              targetFrame = frame
+              break
+            }
           }
+          // find the frame whose path matches 
+        }
+      } else if (target.closest(".s")) {
+        targetFrame = document.querySelector(`iframe[name='${target.target}']`)
+      } else if (target.closest(".n")) {
+        targetFrame = document.querySelector(`iframe[name='${target.target}']`)
+      }
+
+
+      /*
+      // Load the link in the frame
+
+      1. if the frame was found:
+        - if "refresh": true => refresh
+        - otherwise,
+          - if the target frame has been already loaded, don't do anything
+            - frame: start.json?mode=abc, link: start.json?mode=abc => don't touch
+              - link === frame
+            - frame: start.json?mode=abc, link: start.json?mode=def => should load
+              - link !== frame && !frame.includes(link)
+            - frame: start.json?mode=abc, link: start.json => don't touch
+              - link !== frame && frame.includes(link)
 
-          console.log("# 4")
 
+
+            if the link is different
+
+          - if the target frame has not been loaded, refresh
+      2. if the frame was NOT found => create one
+
+      */
+
+      if (targetFrame) {
+        targetFrame.classList.remove("hidden")
+        let mode = target.getAttribute("data-mode")
+        if (mode === "refresh") {
+          targetFrame.src = target.href
+        } else {
           if (e) {
-            console.log("# 5", { src: targetFrame.src, href: target.href, target: target.target })
-            // triggered with a click
-            // do not reload iframe if the href and the src is the same
             if (target.closest(".h")) {
-//              if (targetFrame.src.includes(target.target)) {
-              if (targetFrame.src.includes(target.href)) {
-  //            if (targetFrame.src === target.href) {
-                e.preventDefault()
-                e.stopPropagation()
+              debugger
+              e.preventDefault()
+              e.stopPropagation()
+              let sub = subUrlOf(target.href, targetFrame.src)
+              console.log("issub", sub)
+              if (!sub) {
+                targetFrame.src = target.href
               }
+              //if (target.href === targetFrame.src) {
+              //  // same url. don't do anything 
+              //  e.preventDefault()
+              //  e.stopPropagation()
+              //} else {
+              //  if (targetFrame.src.includes(target.href)) {
+              //    // different url, but the frame's url contains the tab url => don't touch
+              //    e.preventDefault()
+              //    e.stopPropagation()
+              //  } else {
+              //    // different url, and the frame's url does not contain the tab url => change the src of the frame and load
+              //    targetFrame.src = target.href
+              //    e.preventDefault()
+              //    e.stopPropagation()
+              //  }
+              //}
             } else if (target.closest(".s")) {
+              // load unconditionally => .s doesn't change
+              e.preventDefault()
+              e.stopPropagation()
+            } else if (target.closest(".n")) {
+              // load unconditionally => .n doesn't change
               e.preventDefault()
               e.stopPropagation()
             }
           } else {
-            console.log("# 6")
             if (force) {
               console.log("# 7")
-//              if (targetFrame.src !== target.href) {
-                targetFrame.src = target.href
-//              }
+              targetFrame.src = target.href
             }
           }
-        } else {
-          console.log("# 8")
-          //targetFrame.contentWindow.addEventListener("load", () => {
-            if (e) {
-              console.log("# 9")
-              // coming from a click => don't need to set the src
-            } else {
-              console.log("# 10")
-              // load without click
-              if (targetFrame.src !== target.href) {
-                console.log("# 11")
-                targetFrame.src = target.href
-              }
-            }
-            loaded[target.target] = true
-          //});
         }
       } else {
         console.log("# 12")
@@ -589,6 +725,84 @@ console.log({ type, index })
         document.querySelector("main").appendChild(frame)
         loaded[target.target] = true
       }
+
+//      if (targetFrame) {
+//        targetFrame.classList.remove("hidden")
+//
+//        // if the iframe already exists, do not 
+//        if (loaded[target.target]){
+//
+//          // Force refresh option
+//          //
+//          //  menu := [{
+//          //    text,
+//          //    icon,
+//          //    mode: "refresh"     => refresh regardless of any condition
+//          //  }]
+//          let mode = target.getAttribute("data-mode")
+//          if (mode === "refresh") {
+//            targetFrame.src = target.href
+//          } else {
+//            console.log("# 4")
+//            if (e) {
+//              // if triggered by a click event,
+//              // 1. if it's a hard link (".h")
+//              //  - ignore if the pathname is the same
+//              //  - reload if 
+//              console.log("# 5", { src: targetFrame.src, href: target.href, target: target.target })
+//              // triggered with a click
+//              // do not reload iframe if the href and the src is the same
+//              if (target.closest(".h")) {
+//  //              if (targetFrame.src.includes(target.target)) {
+//                if (targetFrame.src.includes(target.href)) {
+//    //            if (targetFrame.src === target.href) {
+//                  e.preventDefault()
+//                  e.stopPropagation()
+//                }
+//              } else if (target.closest(".s")) {
+//                e.preventDefault()
+//                e.stopPropagation()
+//              }
+//            } else {
+//              // if not triggered by event
+//              // refresh ONLY if programmatically forced refresh 
+//              console.log("# 6")
+//              if (force) {
+//                console.log("# 7")
+//                targetFrame.src = target.href
+//              }
+//            }
+//          }
+//
+//        } else {
+//          console.log("# 8")
+//          //targetFrame.contentWindow.addEventListener("load", () => {
+//            if (e) {
+//              console.log("# 9")
+//              // coming from a click => don't need to set the src
+//            } else {
+//              console.log("# 10")
+//              // load without click
+//              if (targetFrame.src !== target.href) {
+//                console.log("# 11")
+//                targetFrame.src = target.href
+//              }
+//            }
+//            loaded[target.target] = true
+//          //});
+//        }
+//      } else {
+//        console.log("# 12")
+//        let frame = document.createElement("iframe")
+//        frame.name = target.target
+//        frame.src = target.href
+//        frame.setAttribute(
+//          "allow", 
+//          "clipboard-read *; clipboard-write *; accelerometer *; ambient-light-sensor *; autoplay *; battery *; camera *; display-capture *; gamepad *; geolocation *; gyroscope *; hid *; identity-credentials-get *; microphone *; midi *; otp-credentials *; serial *;"
+//        )
+//        document.querySelector("main").appendChild(frame)
+//        loaded[target.target] = true
+//      }
     } else {
       console.log("# 13")
       // couldn't find item,
@@ -598,7 +812,7 @@ console.log({ type, index })
     }
   } else {
     console.log("# 14")
-    document.querySelector(".bar").classList.add("hidden")
+//    document.querySelector(".bar").classList.add("hidden")
   }
 }
 console.log("loaded before", loaded)
@@ -673,7 +887,6 @@ const syncTabs = async () => {
   })
 }
 const addTab = async (url) => {
-  debugger
   let item = document.createElement("a")
   //let id = "ts" + Date.now()
   let index = document.querySelectorAll("aside .s .frame-link").length
@@ -717,6 +930,47 @@ document.querySelector(".app-info").addEventListener("click", async (e) => {
   renderSelection()
 
 })
+document.querySelector("#delete").addEventListener("click", async (e) => {
+  e.preventDefault()
+  e.stopPropagation()
+  const confirmed = confirm("Are you sure you wish to delete the app?")
+  if (confirmed) {
+
+
+
+    let name = document.querySelector("#delete").getAttribute("data-name")
+    console.log("delete", name)
+    Swal.fire({
+      html: '<i class="fa-solid fa-circle-notch fa-spin"></i> Deleting',
+      customClass: {
+        container: "loader-container",
+        popup: "loader-popup",
+        htmlContainer: "loader-dialog",
+        footer: "hidden",
+        actions: "hidden"
+      }
+    });
+    let res = await fetch("/pinokio/delete", {
+      method: "post",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ name })
+    }).then((res) => {
+      return res.json()
+    })
+    console.log("res", res)
+    Swal.close()
+    if (res) {
+      if (res.success) {
+        location.href = "/"
+      } else if (res.error) {
+        alert(res.error)
+      }
+    }
+  } else {
+  }
+})
 document.querySelector("aside").addEventListener("click", async (e) => {
   let target
 
@@ -771,9 +1025,19 @@ document.querySelector("aside").addEventListener("click", async (e) => {
 //        location.hash = id
 
         //location.hash = target.getAttribute("href")
-        let index = target.getAttribute("data-index")
-        let type = target.closest(".m").getAttribute("data-type")
-        location.hash = type + index
+
+        if (target.closest(".h")) {
+          location.hash = target.target
+        } else {
+          let index = target.getAttribute("data-index")
+          let type = target.closest(".m").getAttribute("data-type")
+
+          console.log({ type, index })
+
+          debugger
+
+          location.hash = type + index
+        }
 
         document.querySelectorAll(".frame-link").forEach((el) => {
           el.classList.remove("selected")
@@ -812,6 +1076,29 @@ const refresh = async () => {
   console.log("refresh", html)
   */
   document.querySelector(".menu").innerHTML = html
+
+
+  // update the frames so the name matches the tab links
+
+  // 1. iterate through all the "h" menu items
+  // 2. for each tab that starts with "h" (hard), iterate through all iframes
+  // 3. to find a frame whose src.includes(item.href)
+  // 4. update the frame's name to the target attribute
+
+//  let hardFrames = document.querySelectorAll(".browserview iframe[name^=h]")
+//  for(let frame of hardFrames) {
+//    frame.removeAttribute("name")
+//    location.hash = ""
+//  }
+
+
+  location.hash = ""
+
+
+
+
+  // 
+
   renderSelection()
 //  cursorIndex = 0
   //renderCursor()
@@ -819,13 +1106,21 @@ const refresh = async () => {
 }
 window.addEventListener('message', (event) => {
   console.log("Message received from the child: ", event.data); // Message received from child
-  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)
+  if (event.data) {
+    if (event.data.action) {
+      if (event.data.action.type === "newtab") {
+        console.log("create tab", event.data.action.url) 
+        addTab(event.data.action.url)
+      }
+    } else if (event.data.type) {
+      if (event.data.type === 'disconnect') {
+//        location.hash = ""
+        refresh()
+      } else {
+        refresh()
+      }
     }
   } else {
-    console.log("data", event.data)
     refresh()
   }
 });

package/server/views/editor.ejs

@@ -517,7 +517,8 @@ document.addEventListener("DOMContentLoaded", async () => {
           //theme: xtermTheme.Github,
 
           //theme: xtermTheme.Cobalt_Neon,      // top legibility
-          theme: xtermTheme.Duotone_Dark,
+          //theme: xtermTheme.Duotone_Dark,
+          theme: xtermTheme.FrontEndDelight,
           //theme: xtermTheme.Seafoam_Pastel,
           //theme: xtermTheme.IC_Green_PPL,
           //theme: xtermTheme.FunForrest,

package/server/views/fullscreen_editor.ejs

@@ -508,7 +508,10 @@ document.addEventListener("DOMContentLoaded", async () => {
           //theme: xtermTheme.Github,
 
           //theme: xtermTheme.Cobalt_Neon,      // top legibility
-          theme: xtermTheme.Duotone_Dark,
+          //theme: xtermTheme.Duotone_Dark,
+          //theme: xtermTheme.Batman,
+          //theme: xtermTheme.Brogrammer,
+          theme: xtermTheme.FrontEndDelight,
           //theme: xtermTheme.Seafoam_Pastel,
           //theme: xtermTheme.IC_Green_PPL,
           //theme: xtermTheme.FunForrest,

package/server/views/install.ejs

@@ -128,7 +128,8 @@ const createTerm = () => {
     //theme: xtermTheme.Github,
 
     //theme: xtermTheme.Cobalt_Neon,      // top legibility
-    theme: xtermTheme.Duotone_Dark,
+    //theme: xtermTheme.Duotone_Dark,
+    theme: xtermTheme.FrontEndDelight,
     //theme: xtermTheme.Seafoam_Pastel,
     //theme: xtermTheme.IC_Green_PPL,
     //theme: xtermTheme.FunForrest,

package/server/views/partials/menu.ejs

@@ -10,7 +10,10 @@
     </div>
   <% } else { %>
     <% if (item.btn) { %>
+      <!--
       <a data-index="<%=index%>" target="h<%=index%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link'>
+      -->
+      <a data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link'>
         <div class='tab'><%-item.btn%></div>
         <% if (item.running) { %>
           <div class='loader'>

package/server/views/settings.ejs

@@ -63,18 +63,28 @@
   border-top: 1px solid rgba(255,255,255,0.1);
   border-bottom: 1px solid rgba(255,255,255,0.1);
   */
-  padding: 15px 0;
+  padding: 20px 0;
+}
+.titleview h1 {
+  font-size: 40px;
+  text-transform: uppercase;
+  letter-spacing: 0;
 }
 .item button {
   padding: 10px 20px;
 }
 .item label {
   display: block;
-  font-weight: bold;
-  text-transform: capitalize;
-  font-size: 14px;
+  text-transform: uppercase;
+  font-size: 30px;
   padding-bottom: 5px;
 }
+.item .explanation {
+  padding-top: 5px;
+  color: brown;
+  font-size: 14px;
+  font-weight: bold;
+}
 body.dark .item input[type=text] {
   background: rgba(255,255,255,0.1);
   color: white;
@@ -87,9 +97,7 @@ body.dark .item select {
   padding: 10px;
   flex-grow: 1;
   border: none;
-  /*
   background: rgba(0,0,0,0.05);
-  */
   width: 100%;
 }
 .item select {
@@ -230,6 +238,9 @@ header .home {
             <input class='homepath' name="<%=c.key%>" type='text' placeholder="<%=c.placeholder ? c.placeholder : ''%>">
           <% } %>
         <% } %>
+        <% if (c.description) { %>
+        <div class='explanation'><%=c.description%></div>
+        <% } %>
       </div>
     <% }) %>
     <br>