pinokiod 3.19.79 → 3.19.81

package/kernel/bin/cli.js

@@ -9,36 +9,31 @@ class CLI {
     }, ondata)
   }
   async installed(req, ondata) {
-    console.log("Check CLI installed")
-
     let exists
-    console.log("platform", this.kernel.platform)
     if (this.kernel.platform === "win32") {
       exists = await Util.exists(this.kernel.path("bin/npm/pterm"))
-      console.log("Exists", exists)
     } else {
       exists = await Util.exists(this.kernel.path("bin/npm/bin/pterm"))
-      console.log("Exists", exists)
     }
-    
     if (exists) {
       let p = this.kernel.which("pterm")
       if (p) {
         let res = await this.kernel.exec({
           message: "pterm version terminal"
         }, ondata)
-        let v = res.stdout.replace("pterm@", "")
-        let coerced = semver.coerce(v)
-        console.log({ v, coerced })
-        if (semver.satisfies(coerced, this.version)) {
-          console.log("Installed")
-          return true
+        let e = /pterm@([0-9.]+)/.exec(res.stdout)
+        if (e && e.length > 0) {
+          let v = e[1]
+          let coerced = semver.coerce(v)
+          if (semver.satisfies(coerced, this.version)) {
+            return true
+          } else {
+            return false
+          }
         } else {
-          console.log("Not Installed")
           return false
         }
       } else {
-        console.log("FALSE")
         return false
       }
     } else {

package/kernel/bin/setup.js

@@ -122,12 +122,15 @@ module.exports = {
       { name: "node", },
       { name: "cli", },
       { name: "uv", },
+      { name: "caddy", },
+      { name: "py", },
     ])
     let conda_requirements = [
       zip_cmd,
       "uv",
       "node",
       "git",
+      "caddy",
     ]
     if (platform === "win32") {
       requirements.push({ name: "registry" })

package/kernel/connect/providers/github/README.md

@@ -1,7 +1,3 @@
----
-
-# Usage
-
 When you log into Github here, the login will be used for the git installed within Pinokio.
 
 Logging into Github lets you do things like:

package/kernel/prototype.js

@@ -36,12 +36,12 @@ class Proto {
           process.stdout.write(e.raw)
         })
       }
-      let exists3 = await this.kernel.exists("prototype/CLI.md")
+      let exists3 = await this.kernel.exists("prototype/PTERM.md")
       if (!exists3) {
         await this.kernel.download({
           uri: "https://raw.githubusercontent.com/pinokiocomputer/pterm/refs/heads/main/README.md",
           path: this.kernel.path("prototype"),
-          filename: "CLI.md"
+          filename: "PTERM.md"
         }, (e) => {
           process.stdout.write(e.raw)
         })
@@ -73,9 +73,9 @@ class Proto {
       let readme_path = this.kernel.path("prototype/PINOKIO.md")
       await fs.promises.cp(readme_path, path.resolve(cwd, name, "PINOKIO.md"))
 
-      // copy cli.md
-      let cli_readme_path = this.kernel.path("prototype/CLI.md")
-      await fs.promises.cp(cli_readme_path, path.resolve(cwd, name, "CLI.md"))
+      // copy pterm.md
+      let cli_readme_path = this.kernel.path("prototype/PTERM.md")
+      await fs.promises.cp(cli_readme_path, path.resolve(cwd, name, "PTERM.md"))
 
 
       return { success: "/p/" + name }

package/package.json

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

package/server/index.js

@@ -367,7 +367,7 @@ class Server {
 
   async chrome(req, res, type) {
     let d = Date.now()
-    console.time("1 chrome " + d)
+//    console.time("1 chrome " + d)
     let { requirements, install_required, requirements_pending, error } = await this.kernel.bin.check({
       bin: this.kernel.bin.preset("dev"),
     })
@@ -375,7 +375,7 @@ class Server {
       res.redirect(`/setup/dev?callback=${req.originalUrl}`)
       return
     }
-    console.timeEnd("1 chrome " + d)
+//    console.timeEnd("1 chrome " + d)
 
     let name = req.params.name
     let config = await this.kernel.api.meta(name)
@@ -490,22 +490,22 @@ class Server {
 //      }
 //    }
 
-    console.time("2 chrome " + d)
+//    console.time("2 chrome " + d)
     await this.init_env("api/" + name)
-    console.timeEnd("2 chrome " + d)
+//    console.timeEnd("2 chrome " + d)
 
-    console.time("3 chrome " + d)
+//    console.time("3 chrome " + d)
     let mode = "run"
     if (req.query && req.query.mode) {
       mode = req.query.mode
     }
     const env = await this.kernel.env("api/" + name)
-    console.timeEnd("3 chrome " + d)
+//    console.timeEnd("3 chrome " + d)
 
     // profile + feed
     const repositoryPath = path.resolve(this.kernel.api.userdir, name)
 
-    console.time("4 chrome " + d)
+//    console.time("4 chrome " + d)
     try {
       await git.resolveRef({ fs, dir: repositoryPath, ref: 'HEAD' });
     } catch (err) {
@@ -514,9 +514,9 @@ class Server {
       await git.init({ fs, dir: repositoryPath });
     }
 
-    console.timeEnd("4 chrome " + d)
+//    console.timeEnd("4 chrome " + d)
 
-    console.time("5 chrome " + d)
+//    console.time("5 chrome " + d)
     let gitRemote = await git.getConfig({ fs, http, dir: repositoryPath, path: 'remote.origin.url' })
     let profile
     let feed
@@ -530,20 +530,24 @@ class Server {
       profile = this.profile(gitRemote)
       feed = this.newsfeed(gitRemote)
     }
-    console.timeEnd("5 chrome " + d)
+//    console.timeEnd("5 chrome " + d)
 
     // git
 
     let c = this.kernel.path("api", name)
 
-    console.time("6 chrome " + d)
+//    console.time("6 chrome " + d)
     await this.kernel.plugin.init()
-    let plugin = await this.getPlugin(name)
-    let plugin_menu = null
-    if (plugin && plugin.menu && Array.isArray(plugin.menu)) {
-      let running_dynamic = this.running_dynamic(name, plugin.menu)
-      plugin_menu = plugin.menu.concat(running_dynamic)
-    }
+//    console.timeEnd("6 chrome " + d)
+//    console.time("7 chrome " + d)
+//    let plugin = await this.getPlugin(name)
+//    console.timeEnd("7 chrome " + d)
+//    console.time("8 chrome " + d)
+//    let plugin_menu = null
+//    if (plugin && plugin.menu && Array.isArray(plugin.menu)) {
+//      let running_dynamic = this.running_dynamic(name, plugin.menu)
+//      plugin_menu = plugin.menu.concat(running_dynamic)
+//    }
 
 
     let current_urls = await this.current_urls(req.originalUrl.slice(1))
@@ -553,7 +557,7 @@ class Server {
       current_urls,
       path: this.kernel.path("api", name),
       log_path: this.kernel.path("api", name, "logs"),
-      plugin_menu,
+      plugin_menu: null,
       portal: this.portal,
       install: this.install,
       error: err,
@@ -567,6 +571,7 @@ class Server {
       memory: this.kernel.memory,
       sidebar: "/pinokio/sidebar/" + name,
       repos: "/pinokio/repos/" + name,
+      ai: "/pinokio/ai/" + name,
       dynamic: "/pinokio/dynamic/" + name,
 //      dynamic: "/pinokio/dynamic/" + name,
       dynamic_content: null,
@@ -585,12 +590,12 @@ class Server {
       execUrl: "/api/" + name,
 //      rawpath,
     }
-    console.timeEnd("6 chrome " + d)
-    console.time("7 chrome " + d)
-    if (!this.kernel.proto.config) {
-      await this.kernel.proto.init()
-    }
-    console.timeEnd("7 chrome " + d)
+//    console.timeEnd("8 chrome " + d)
+//    console.time("9 chrome " + d)
+//    if (!this.kernel.proto.config) {
+//      await this.kernel.proto.init()
+//    }
+//    console.timeEnd("9 chrome " + d)
     res.render("app", result)
   }
   getVariationUrls(req) {
@@ -2443,6 +2448,9 @@ class Server {
     }
   }
   async getPluginGlobal(filepath) {
+    if (!this.kernel.plugin.config) {
+      await this.kernel.plugin.init()
+    }
     if (this.kernel.plugin.config) {
       try {
         let info = new Info(this.kernel)
@@ -2468,17 +2476,16 @@ class Server {
         return plugin
       } catch (e) {
         console.log("getPlugin ERROR", e)
-        return {
-          menu: []
-        }
+        return null
       }
     } else {
-      return {
-        menu: []
-      }
+      return null
     }
   }
   async getPlugin(name) {
+    if (!this.kernel.plugin.config) {
+      await this.kernel.plugin.init()
+    }
     if (this.kernel.plugin.config) {
       try {
         let info = new Info(this.kernel)
@@ -2492,15 +2499,10 @@ class Server {
         return plugin
       } catch (e) {
         console.log("getPlugin ERROR", e)
-        return {
-          menu: []
-        }
+        return null
       }
     } else {
-      return {
-        menu: []
-      }
-      
+      return null
     }
   }
   async check_router_up() {
@@ -4422,6 +4424,22 @@ class Server {
       let dir = this.kernel.path("api", req.params[0])
       let config = await this.kernel.git.config(dir)
 
+      let hosts = ""
+      let hosts_file = this.kernel.path("config/gh/hosts.yml")
+      let e = await this.exists(hosts_file)
+      console.log({ hosts_file, e })
+      if (e) {
+        hosts = await fs.promises.readFile(hosts_file, "utf8")
+        console.log( { hosts: `#${hosts}#` })
+        if (hosts.startsWith("{}")) {
+          hosts = ""
+        }
+      }
+      console.log("hosts", hosts)
+
+      let connected = (hosts.length > 0)
+
+
       let remote = null
       if (config["remote \"origin\""]) {
         remote = config["remote \"origin\""].url
@@ -4489,6 +4507,7 @@ class Server {
       }
 
       res.render("git", {
+        connected,
         changes,
         dir,
         config,
@@ -4499,6 +4518,7 @@ class Server {
       })
     }))
     this.app.get("/dev/*", ex(async (req, res) => {
+      console.log("GET /dev/*", req.params)
       let { requirements, install_required, requirements_pending, error } = await this.kernel.bin.check({
         bin: this.kernel.bin.preset("dev"),
       })
@@ -4507,19 +4527,19 @@ class Server {
         return
       }
       let platform = os.platform()
-      await this.kernel.plugin.init()
+//      await this.kernel.plugin.init()
       let filepath = Util.u2p(req.params[0])
-      let plugin = await this.getPluginGlobal(filepath)
+//      let plugin = await this.getPluginGlobal(filepath)
       let current_urls = await this.current_urls(req.originalUrl.slice(1))
-      let plugin_menu
-      try {
-        plugin_menu = plugin.menu[0].menu
-      } catch (e) {
-        plugin_menu = []
-      }
+//      let plugin_menu
+//      try {
+//        plugin_menu = plugin.menu[0].menu
+//      } catch (e) {
+//        plugin_menu = []
+//      }
       const result = {
         current_urls,
-        plugin_menu,
+        plugin_menu: null,
         portal: this.portal,
         install: this.install,
         port: this.port,
@@ -4616,35 +4636,83 @@ class Server {
     }))
     this.app.get("/pinokio/dynamic_global/*", ex(async (req, res) => {
       let plugin = await this.getPluginGlobal("/" + req.params[0])
-      let html = ""
-      if (plugin && plugin.menu) {
-        let plugin_menu
-        try {
-          plugin_menu = plugin.menu[0].menu
-        } catch (e) {
-          plugin_menu = []
-        }
-        html = await new Promise((resolve, reject) => {
-          ejs.renderFile(path.resolve(__dirname, "views/partials/dynamic.ejs"), { dynamic: plugin_menu }, (err, html) => {
-            resolve(html)
+      if (plugin) {
+        let html = ""
+        if (plugin && plugin.menu) {
+          let plugin_menu
+          try {
+            plugin_menu = plugin.menu[0].menu
+          } catch (e) {
+            plugin_menu = []
+          }
+          html = await new Promise((resolve, reject) => {
+            ejs.renderFile(path.resolve(__dirname, "views/partials/dynamic.ejs"), { dynamic: plugin_menu }, (err, html) => {
+              resolve(html)
+            })
           })
-        })
+        }
+        res.send(html)
+      } else {
+        res.send("")
       }
-      res.send(html)
     }))
     this.app.get("/pinokio/dynamic/:name", ex(async (req, res) => {
   //    await this.kernel.plugin.init()
       let plugin = await this.getPlugin(req.params.name)
-      let html = ""
-      if (plugin && plugin.menu && Array.isArray(plugin.menu)) {
-        let running_dynamic = this.running_dynamic(req.params.name, plugin.menu)
-        plugin.menu = plugin.menu.concat(running_dynamic)
-        html = await new Promise((resolve, reject) => {
-          ejs.renderFile(path.resolve(__dirname, "views/partials/dynamic.ejs"), { dynamic: plugin.menu }, (err, html) => {
-            resolve(html)
+      if (plugin) {
+        let html = ""
+        if (plugin && plugin.menu && Array.isArray(plugin.menu)) {
+          let running_dynamic = this.running_dynamic(req.params.name, plugin.menu)
+          plugin.menu = plugin.menu.concat(running_dynamic)
+          html = await new Promise((resolve, reject) => {
+            ejs.renderFile(path.resolve(__dirname, "views/partials/dynamic.ejs"), { dynamic: plugin.menu }, (err, html) => {
+              resolve(html)
+            })
           })
-        })
+        }
+        res.send(html)
+      } else {
+        res.send("")
+      }
+    }))
+    this.app.get("/pinokio/ai/:name", ex(async (req, res) => {
+      /*
+        link to
+          README.md
+          AGENTS.md
+          CLAUDE.md
+          GEMINI.md
+      */
+      let c = this.kernel.path("api", req.params.name, "README.md")
+      let readme_exists = await this.exists(c)
+      let files
+      if (readme_exists) {
+        files = [
+          "README.md",
+          "AGENTS.md",
+          "CLAUDE.md",
+          "GEMINI.md"
+        ]
+      } else {
+        files = [
+          "AGENTS.md",
+          "CLAUDE.md",
+          "GEMINI.md"
+        ]
       }
+
+
+      let items = files.map((item) => {
+        return {
+          text: item,
+          href: `/_api/${req.params.name}/${item}`
+        }
+      })
+      let html = await new Promise((resolve, reject) => {
+        ejs.renderFile(path.resolve(__dirname, "views/partials/ai.ejs"), { items }, (err, html) => {
+          resolve(html)
+        })
+      })
       res.send(html)
     }))
     this.app.get("/pinokio/repos/:name", ex(async (req, res) => {

package/server/public/style.css

@@ -121,7 +121,7 @@ body.dark *::-webkit-scrollbar-thumb {
 .drawer.vertical-collapsed {
   max-height: 0;
 }
-.git.selected {
+.blue.selected {
   border-left: 10px solid royalblue;
 }
 body.dark .dynamic.selected {

package/server/views/app.ejs

@@ -840,12 +840,6 @@ body.dark .appcanvas {
       </div>
         <div class='disk-usage' data-path="/"></div>
     </a>
-    <a target="<%=logs%>" href="<%=logs%>" class='btn header-item frame-link' data-index="1" data-mode="refresh">
-      <div class='tab'>
-        <i class="fa-solid fa-clock-rotate-left"></i> Logs
-      </div>
-      <div class='disk-usage' data-path="/logs"></div>
-    </a>
     <% if (profile || feed) { %>
       <div class='btn header-item frame-link revealer' data-group='.info-group'>
         <div class='tab'>
@@ -866,13 +860,18 @@ body.dark .appcanvas {
         <% } %>
       </div>
     <% } %>
-    <div class='dynamic'>
-      <% if (plugin_menu) { %>
-      <%- include('./partials/dynamic', { dynamic: plugin_menu, }) %>
+    <div class="dynamic <%=type==='run' ? '' : 'selected'%>">
+      <% if (type !== "run") { %>
+        <div class="nested-menu">
+          <div class="btn header-item frame-link selected">
+            <div class="tab"><i class="fa-solid fa-code"></i> Dev</div>
+            <div class="loader"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
+          </div>
+        </div>
       <% } %>
     </div>
     <% if (type === "browse") { %>
-      <div class='nested-menu selected git'>
+      <div class='nested-menu selected git blue'>
         <div class='btn header-item frame-link reveal'>
           <div class='tab'><i class="fa-solid fa-cloud"></i> Git</div>
           <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
@@ -880,6 +879,22 @@ body.dark .appcanvas {
         <div class='submenu' id='git-repos'>
         </div>
       </div>
+      <div class='nested-menu selected blue'>
+        <a target="<%=logs%>" href="<%=logs%>" class='btn header-item frame-link' data-index="1" data-mode="refresh">
+          <div class='tab'>
+            <i class="fa-solid fa-clock-rotate-left"></i> Logs
+          </div>
+          <div class='disk-usage' data-path="/logs"></div>
+        </a>
+      </div>
+      <div class='nested-menu selected blue'>
+        <div class='btn header-item frame-link reveal'>
+          <div class='tab'><i class="fa-solid fa-robot"></i> AI Recipes</div>
+          <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
+        </div>
+        <div class='submenu hidden' id='ai-prompts'>
+        </div>
+      </div>
     <% } %>
     <div class='btn header-item frame-link revealer' data-group='.config-group'>
       <div class='tab'>
@@ -915,7 +930,9 @@ body.dark .appcanvas {
     <div class='app-info'>
       <% if (type === 'run') { %>
         <div class='mode-section'>
+        <!--
           <h3><i class='fa-solid fa-circle-play'></i> Run mode</h3>
+          -->
           <div class='desc'>Switch to dev mode to make changes to the app.</div>
           <a class='btn' href="<%=home.endsWith("/") ? home : home + "/" %>dev"><i class="fa-solid fa-code"></i> Switch to Dev mode</a>
         </div>
@@ -1491,7 +1508,6 @@ body.dark .appcanvas {
       edit: true,
       redirect: (new_path) => {
         let u = location.href.replace(/(\/pinokio\/browser\/)[^\/]+(?=\/|$)/, `$1${new_path}`)
-        debugger
         return u
       }
     })
@@ -1510,7 +1526,6 @@ body.dark .appcanvas {
       edit: true,
       redirect: (new_path) => {
         let u = location.href.replace(/(\/pinokio\/browser\/)[^\/]+(?=\/|$)/, `$1${new_path}`)
-        debugger
         return u
       }
     })
@@ -1530,7 +1545,6 @@ body.dark .appcanvas {
       edit: true,
       redirect: (new_path) => {
         let u = location.href.replace(/(\/pinokio\/browser\/)[^\/]+(?=\/|$)/, `$1${new_path}`)
-        debugger
         return u
       }
     })
@@ -1671,7 +1685,6 @@ body.dark .appcanvas {
       e.stopPropagation()
       let shell = target.closest("[data-shell]")
       if (shell) {
-        debugger
         let shell_id = shell.getAttribute("data-shell")
         n.Noty({
           text: `stopping shell`,
@@ -1728,7 +1741,6 @@ body.dark .appcanvas {
           })
         } else {
           let link = target.closest("[href]")
-          debugger
           if (link) {
             let src = new URL(link.href).pathname
             target.querySelector("i.fa-square").className = "fa-solid fa-check"
@@ -1835,7 +1847,7 @@ body.dark .appcanvas {
           <% } else { %>
             // dev mode => already dev. reveal the hidden menu
             if (target.closest(".dynamic")) {
-              target.closest(".dynamic").classList.toggle("selected")
+              target.closest(".dynamic").classList.add("selected")
               target.closest(".nested-menu").querySelector(".submenu").classList.toggle("hidden")
               target.querySelector(".loader .fa-angle-down").classList.toggle("hidden")
               target.querySelector(".loader .fa-angle-up").classList.toggle("hidden")
@@ -1910,8 +1922,45 @@ body.dark .appcanvas {
       }
     })
   }
-  const refresh = async (silent, options) => {
 
+  let dynamic_loaded = false
+
+  const try_dynamic = async () => {
+    console.log("Try_dynamic")
+    let rendered
+    const dynamic = await fetch("<%=dynamic%>").then((res) => {
+      return res.text()
+    })
+    if (dynamic && dynamic.length > 0) {
+      console.log({ dynamic })
+      if (document.querySelector(".dynamic")) {
+        document.querySelector(".dynamic").innerHTML = dynamic
+      }
+      rendered = true
+    } else {
+      rendered = false
+    }
+    console.log({ rendered, dynamic_loaded })
+    if (rendered) {
+      if (dynamic_loaded) {
+        // already loaded, don't touch the UI
+      } else {
+        // first time being loaded
+        dynamic_loaded = true
+        if (document.querySelector(".dynamic .reveal")) {
+          console.log("click")
+
+          document.querySelector(".dynamic .reveal").click()
+        }
+      }
+    } else {
+      console.log("Not yet rendered. Try again")
+      setTimeout(() => {
+        try_dynamic()
+      }, 1000)
+    }
+  }
+  const refresh = async (silent, options) => {
 
     if (options && options.nodelay) {
     } else {
@@ -1926,14 +1975,9 @@ body.dark .appcanvas {
     })
     document.querySelector(".menu").innerHTML = html
 
-    const dynamic = await fetch("<%=dynamic%>").then((res) => {
-      return res.text()
-    })
-    console.log({ dynamic })
-    if (document.querySelector(".dynamic")) {
-      document.querySelector(".dynamic").innerHTML = dynamic
-    }
-
+    <% if (type !== 'run') { %>
+    try_dynamic()
+    <% } %>
 
     const repos = await fetch("<%=repos%>").then((res) => {
       return res.text()
@@ -1942,6 +1986,14 @@ body.dark .appcanvas {
       document.querySelector("#git-repos").innerHTML = repos
     }
 
+    const ai = await fetch("<%=ai%>").then((res) => {
+      return res.text()
+    })
+    console.log({ ai })
+    if (document.querySelector("#ai-prompts")) {
+      document.querySelector("#ai-prompts").innerHTML = ai
+    }
+
     location.hash = ""
 
     // render the selected frame only if not silent
@@ -2053,7 +2105,6 @@ body.dark .appcanvas {
   refresh_du()
   refresh_du("logs")
   <% if (type !== 'run') { %>
-    debugger
     fetch("<%=repos%>").then((res) => {
       return res.text()
     }).then((repos) => {
@@ -2061,9 +2112,7 @@ body.dark .appcanvas {
         document.querySelector("#git-repos").innerHTML = repos
       }
     })
-    if (document.querySelector(".dynamic .reveal")) {
-      document.querySelector(".dynamic .reveal").click()
-    }
+    refresh()
   <% } %>
   /*
   document.addEventListener("keydown", (e) => {

package/server/views/editor.ejs

@@ -155,13 +155,17 @@ document.addEventListener("DOMContentLoaded", async () => {
   <% } %>
   <% if (!install_required) { %>
     let editor = ace.edit("editor");
-    editor.setTheme("ace/theme/tomorrow");
     //editor.setTheme("ace/theme/github_light_default");
     //editor.setTheme("ace/theme/ambiance");
-    //editor.setTheme("ace/theme/idle_fingers");
+    <% if (theme === "dark") { %>
+      editor.setTheme("ace/theme/idle_fingers");
+    <% } else { %>
+      editor.setTheme("ace/theme/tomorrow");
+    <% } %>
     //editor.setTheme("ace/theme/nord_dark");
     //editor.setTheme("ace/theme/textmate");
     editor.setOptions({
+      wrap: true,
 //      maxLines: Infinity, // set to a large number
       minLines: 1 // set to a small number
     });
@@ -228,10 +232,12 @@ document.addEventListener("DOMContentLoaded", async () => {
       document.querySelector(".run .starting").classList.add("hidden")
     }
     stop() {
+      let cwd = "<%-JSON.stringify(execUrl).slice(1, -1)%>"
       this.socket.run({
         method: "kernel.api.stop",
         params: {
-          uri: "<%=execUrl%>",
+          //uri: "<%=execUrl%>",
+          uri: cwd,
           //uri: "~" + location.pathname
         }
       }, (stream) => {
@@ -239,7 +245,8 @@ document.addEventListener("DOMContentLoaded", async () => {
     }
     save() {
       return new Promise((resolve, reject) => {
-        let cwd = "<%=execUrl%>"
+        let cwd = "<%-JSON.stringify(execUrl).slice(1, -1)%>"
+        //let cwd = "<%=execUrl%>"
         //let cwd = "~" + location.pathname
         this.socket.close()
         this.socket.run({
@@ -269,7 +276,8 @@ document.addEventListener("DOMContentLoaded", async () => {
         this.socket.run({
           //uri: location.pathname.slice(1).replace("api/", ""),
           //uri: "~" + location.pathname,
-          uri: "<%=execUrl%>",
+          uri: "<%-JSON.stringify(execUrl).slice(1, -1)%>",
+          //uri: "<%=execUrl%>",
           //uri: "~" + location.pathname,
           mode,
           input: query,

package/server/views/git.ejs

@@ -4,7 +4,7 @@
 <link href="/css/solid.min.css" rel="stylesheet">
 <link href="/css/regular.min.css" rel="stylesheet">
 <link href="/css/brands.min.css" rel="stylesheet">
-<link href="/style.css" rel="stylesheet"/>
+<script src="/opener.js"></script>
 <% if (agent === "electron") { %>
   <link href="/electron.css" rel="stylesheet"/>
 <% } %>
@@ -14,10 +14,43 @@
   max-width: 800px;
   box-sizing: border-box;
 }
+body {
+  margin: 0;
+  font-family: Sans-serif;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+aside {
+  min-width: 200px;
+  position: sticky;
+  top: 0;
+}
+aside .item.selected {
+  background: royalblue;
+  color: white;
+}
+aside .item {
+  display: block;
+  text-decoration: none;
+  color: royalblue;
+  padding: 10px;
+  background: rgba(0,0,0,0.1);
+}
+nav {
+  padding: 10px;
+  display: flex;
+}
+/*
 nav {
   position: sticky;
   top: 0;
 }
+*/
+body.dark nav a.btn, nav a.btn {
+  background: royalblue;
+}
 nav a {
   display: block;
   padding: 10px;
@@ -27,12 +60,18 @@ label {
   display: block;
   padding: 10px;
 }
+body.dark nav {
+  background: rgba(0,0,0,0.4);
+}
 nav label {
   display: block;
   padding: 10px;
 }
 main {
-  padding: 20px;
+  display: flex;
+  overflow: auto;
+  scroll-behavior: smooth;
+  flex-grow: 1;
 }
 main iframe {
   width: 100%;
@@ -42,7 +81,16 @@ main img {
   width: 100%;
 }
 main h2 {
-  margin: 0 0 10px;
+  padding: 20px 10px;
+  margin: 0;
+  font-size: 16px;
+}
+body.dark .changes {
+  color: white;
+}
+.changes {
+  height: 100%;
+  flex-grow: 1;
 }
 pre.l {
 /*
@@ -90,61 +138,146 @@ pre.l {
   color: #555;
 }
 .diff-block {
-  max-height: 300px;
   background: rgba(0, 0, 0, 0.04);
-  padding: 0 20px 20px;
   overflow: auto;
 }
+body.dark h2 {
+  color: white;
+}
+body.dark main h3 {
+  color: white;
+}
 main h3 {
   margin: 0;
   background: rgba(0, 0, 0, 0.04);
   padding: 15px;
-  margin-top: 30px;
   font-size: 14px;
 }
+body.dark .chunk {
+  border: 10px solid white;
+}
+.chunk {
+  border: 10px solid silver;
+  margin-bottom: 10px;
+}
+.filler {
+  height: 100%;
+}
+.chunk.selected, body.dark .chunk.selected {
+  border: 10px solid royalblue; 
+}
 
 .add    { background: #e6ffed; color: green; }
 .del    { background: #ffeef0; color: red; }
 .context { background: #f8f8f8; }
 .btn {
   margin-right: 10px;
+  cursor: pointer;
+  border: none;
+  text-decoration: none;
+  padding: 10px;
+  border-radius: 3px;
+  background: black;
+  color: white;
+  font-size: 12px;
+  display: inline-block;
+}
+body.dark .empty {
+  background: rgba(255,255,255,0.1);
+}
+.empty {
+  text-align: center;
+  padding: 200px 40px;
+  opacity: 0.5;
+  background: rgba(0,0,0,0.04);
 }
 </style>
 </head>
 <body class='<%=theme%>' data-platform="<%=platform%>" data-agent="<%=agent%>">
 <nav>
   <% if (remote) { %>
-    <a href="/run/scripts/git/push.json?cwd=<%=encodeURIComponent(dir)%>" class='btn'><i class="fa-brands fa-github"></i> Publish to GitHub</a>
+    <% if (connected) { %>
+      <a href="/run/scripts/git/push.json?cwd=<%=encodeURIComponent(dir)%>" class='btn'><i class="fa-brands fa-github"></i> Publish to GitHub</a>
+    <% } else { %>
+      <a class='btn' href="/github" target="_blank">Publish to GitHub</a>
+    <% } %>
     <a href="/run/scripts/git/commit.json?cwd=<%=encodeURIComponent(dir)%>" class='btn'><i class="fa-solid fa-floppy-disk"></i> Commit (Save the current version)</a>
     <a href="<%=remote%>" target="_blank"><%=remote%></a>
   <% } else { %>
-    <a href="/run/scripts/git/create.json?cwd=<%=encodeURIComponent(dir)%>" class='btn'><i class="fa-brands fa-github"></i> Create on GitHub</a>
+    <% if (connected) { %>
+      <a href="/run/scripts/git/create.json?cwd=<%=encodeURIComponent(dir)%>" class='btn'><i class="fa-brands fa-github"></i> Create on GitHub</a>
+    <% } else { %>
+      <a class='btn' href="/github" target="_blank">Create on GitHub</a>
+    <% } %>
     <a href="/run/scripts/git/commit.json?cwd=<%=encodeURIComponent(dir)%>" class='btn'><i class="fa-solid fa-floppy-disk"></i> Commit (Save the current version)</a>
   <% } %>
 </nav>
 <main>
-<h2>Changed Files</h2>
-<% if (changes && changes.length > 0) { %>
-  <% changes.forEach(({ file, status, binary, diff, webpath }) => { %>
-    <h3>[<%= status %>] <%= file %></h3>
-    <% if (binary) { %>
-      <div class="binary-notice">[Binary file <%= status %>]</div>
-      <iframe src="<%=webpath%>"></iframe>
+  <aside>
+    <h2><i class="fa-solid fa-code-compare"></i> Changes</h2>
+    <% if (changes && changes.length > 0) { %>
+      <% changes.forEach(({ file, status, binary, diff, webpath }) => { %>
+        <a class='item' data-selector="<%=file%>" href="#<%=file%>"><%=file%></a>
+      <% }) %>
+    <% } %>
+  </aside>
+  <div class='changes'>
+    <% if (changes && changes.length > 0) { %>
+      <% changes.forEach(({ file, status, binary, diff, webpath }) => { %>
+        <div id="<%=file%>" class='chunk' data-selection="<%=file%>">
+          <h3>[<%= status %>] <%= file %></h3>
+          <% if (binary) { %>
+            <div class="binary-notice">[Binary file <%= status %>]</div>
+            <iframe src="<%=webpath%>"></iframe>
+          <% } else { %>
+            <div class="diff-block">
+              <% diff.forEach(({ line, lineOld, lineNew, type }) => { %>
+                <div class="diff-line <%= type %>">
+                  <span class="lnum old"><%= lineOld !== '' ? lineOld : '' %></span>
+                  <span class="lnum new"><%= lineNew !== '' ? lineNew : '' %></span>
+                  <span class="code"><%= (type === 'add' ? '+ ' : type === 'del' ? '- ' : '  ') + line %></span>
+                </div>
+              <% }); %>
+            </div>
+          <% } %>
+        </div>
+      <% }); %>
+      <div class='filler'></div>
     <% } else { %>
-      <div class="diff-block">
-        <% diff.forEach(({ line, lineOld, lineNew, type }) => { %>
-          <div class="diff-line <%= type %>">
-            <span class="lnum old"><%= lineOld !== '' ? lineOld : '' %></span>
-            <span class="lnum new"><%= lineNew !== '' ? lineNew : '' %></span>
-            <span class="code"><%= (type === 'add' ? '+ ' : type === 'del' ? '- ' : '  ') + line %></span>
-          </div>
-        <% }); %>
-      </div>
+      <div class='empty'>No changes</div>
     <% } %>
-  <% }); %>
-<% } else { %>
-  <div class='empty'>No changes</div>
-<% } %>
+  </div>
 </main>
+<script>
+document.querySelector("nav").addEventListener("click", (e) => {
+  let redirect = e.target.getAttribute("href")
+  if (redirect) {
+    const c = confirm("Please connect with GitHub first")
+    if (c) {
+      console.log("redirect")
+    } else {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+  }
+})
+document.querySelector("aside").addEventListener("click", (e) => {
+  if (e.target.classList.contains("item")) {
+    document.querySelectorAll(".item").forEach((el) => {
+      el.classList.remove("selected")
+    })
+    e.target.classList.add("selected")
+
+
+
+    let selector = e.target.getAttribute("data-selector")
+    console.log({ selector })
+    document.querySelectorAll(".chunk").forEach((el) => {
+      el.classList.remove("selected")
+    })
+    document.querySelector(`[data-selection='${selector}']`).classList.add("selected")
+  }
+})
+</script>
 </body>
 </html>

package/server/views/github.ejs

@@ -61,8 +61,6 @@ body {
   align-items: center;
 }
 .btn {
-  margin: 5px;
-  width: 100px;
   text-align: center;
   padding: 10px;
   background: black;
@@ -108,7 +106,9 @@ main {
   display: flex;
   justify-content: center;
   margin: 0 auto;
+  /*
   max-width: 800px;
+  */
   width: 100%;
   align-items: center;
 }
@@ -126,20 +126,26 @@ main {
   display: block;
   margin-bottom: 5px;
 }
-.setup-items .gitconfig-footer .btn {
-  margin: 0 0 5px;
+.setup-items .gitconfig-footer {
+  text-align: center;
+}
+.setup-items .btn {
+  width: 100%;
+  margin-bottom: 10px;
 }
 .setup-items .gitconfig {
   flex-grow: 1;
-  padding: 30px;
-  background: rgba(0,0,0,0.04) !important;
   margin-bottom: 20px;
 }
-.setup-items pre {
+body.dark .setup-items pre, body.dark .setup-items .pre {
+  background: rgba(255,255,255,0.04) !important;
+}
+.setup-items pre, .setup-items .pre {
+  box-sizing: border-box;
+  margin: 10px 0 20px;
   width: 100%;
-  padding: 30px;
+  padding: 20px;
   background: rgba(0,0,0,0.04) !important;
-  margin-bottom: 20px;
 }
 .head {
   padding: 30px;
@@ -194,7 +200,28 @@ hr {
 }
 #readme {
   flex-grow: 1;
-  padding: 30px;
+}
+.cols {
+  max-width: 1000px;
+  margin: 0 auto;
+  display: flex; 
+}
+body.dark .column {
+  background: rgba(0,0,0,0.1);
+}
+.column {
+  background: rgba(0,0,0,0.04);
+  margin: 10px;
+  width: 50%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+.column h1 {
+  padding: 5px;
+  letter-spacing: -1px;
+}
+ol {
+  padding-inline-start: 20px;
 }
 </style>
 <script src="/hotkeys.min.js"></script>
@@ -226,38 +253,48 @@ hr {
   <div class='head'>
     <h3><i class="fa-brands fa-github"></i><br><br>Connect with Github</h3>
   </div>
-  <div class='setup-items'>
-    <form class='gitconfig'>
-      <div class='field'>
-        <label>username</label>
-        <input id='username' type='text' value="<%=gitconfig.user && gitconfig.user.name ? gitconfig.user.name : ''%>">
+  <div class='cols'>
+    <div class='column'>
+      <h1>GitHub</h1>
+      <div class='setup-items'>
+        <% if (hosts.length > 0) { %>
+          <pre><%=hosts%></pre>
+        <% } else { %>
+          <pre>not logged in</pre>
+        <% } %>
       </div>
-      <div class='field'>
-        <label>email</label>
-        <input id='email' type='text' value="<%=gitconfig.user && gitconfig.user.email ? gitconfig.user.email : ''%>">
+      <div class='setup-items'>
+        <% items.forEach((item) => { %>
+          <a class='btn' href="<%=item.url%>">
+            <i class="<%=item.icon%>"></i> <%=item.title%>
+          </a>
+        <% }) %>
       </div>
-      <div class='gitconfig-footer'>
-        <button class='btn'>Update</button>
-        <div>gitconfig stored in ~/pinokio/gitconfig file </div>
+      <div class='setup-items'>
+        <div id='readme'><%-readme%></div>
       </div>
-    </form>
-  </div>
-  <div class='setup-items'>
-    <% if (hosts.length > 0) { %>
-      <pre><%=hosts%></pre>
-    <% } else { %>
-      <pre>not logged in</pre>
-    <% } %>
-  </div>
-  <div class='setup-items'>
-    <% items.forEach((item) => { %>
-      <a class='btn' href="<%=item.url%>">
-        <i class="<%=item.icon%>"></i> <%=item.title%>
-      </a>
-    <% }) %>
-  </div>
-  <div class='setup-items'>
-    <div id='readme'><%-readme%></div>
+    </div>
+    <div class='column'>
+      <h1>Git Config</h1>
+      <div class='setup-items'>
+        <form class='gitconfig'>
+          <div class='pre'>
+            <div class='field'>
+              <label>username</label>
+              <input id='username' type='text' value="<%=gitconfig.user && gitconfig.user.name ? gitconfig.user.name : ''%>">
+            </div>
+            <div class='field'>
+              <label>email</label>
+              <input id='email' type='text' value="<%=gitconfig.user && gitconfig.user.email ? gitconfig.user.email : ''%>">
+            </div>
+          </div>
+          <div class='gitconfig-footer'>
+            <button class='btn'><i class="fa-solid fa-check"></i> Update</button>
+            <div>gitconfig stored in ~/pinokio/gitconfig file </div>
+          </div>
+        </form>
+      </div>
+    </div>
   </div>
 </main>
 <script>

package/server/views/mini.ejs

@@ -1454,6 +1454,7 @@ body.dark .appcanvas {
 
   })
   const refresh = async (silent, options) => {
+    debugger
     console.log("REFRESH")
     const dynamic = await fetch("<%=dynamic%>").then((res) => {
       return res.text()
@@ -1537,6 +1538,7 @@ body.dark .appcanvas {
   if (document.querySelector(".dynamic .reveal")) {
     document.querySelector(".dynamic .reveal").click()
   }
+  refresh()
   </script>
 </body>
 </html>

package/server/views/partials/ai.ejs

@@ -0,0 +1,5 @@
+<% items.forEach((item, index) => { %>
+  <a target="<%=item.href%>" href="<%=item.href%>" class='btn header-item frame-link' data-index="<%=index%>" data-mode="refresh">
+    <div class='tab'><i class="fa-regular fa-folder-open"></i> <%=item.text%></div>
+  </a>
+<% }) %>

package/server/views/prototype/init.ejs

@@ -25,7 +25,7 @@
 img.appicon {
   width: 40px;
   height: 40px;
-  margin-right: 10px;
+  margin-right: 5px;
   padding: 5px;
   border-radius: 4px;
   background: white;
@@ -53,7 +53,7 @@ h4 {
 }
 
 h2 {
-  font-size: 25px;
+  font-size: 30px;
 }
 h1 {
   letter-spacing: 0px;
@@ -145,6 +145,11 @@ body.dark .radio-group label {
 }
 
 .radio-group label span {
+    font-size: 16px;
+    /*
+    font-weight: lighter;
+    */
+    margin-left: 5px;
     font-weight: bold;
     flex: 1;
 }
@@ -152,6 +157,10 @@ body.dark .radio-group label {
 .radio-group label .description {
     opacity: 0.7;
     margin-left: 0.5rem;
+    /*
+    width: 350px;
+    text-align: right;
+    */
 }
 
 .checkbox-group {
@@ -184,6 +193,35 @@ body.dark .conditional-options {
     */
     display: none;
 }
+#step-1 .radio-group {
+  display: flex;
+}
+#step-1 .radio-group label:hover {
+  color: royalblue;
+}
+#step-1 .radio-group label .description {
+  margin: 0;
+}
+#step-1 .radio-group label .col {
+  flex-grow: 1;
+}
+#step-1 .radio-group label {
+  display: flex;
+  padding: 30px;
+  text-align: left;
+}
+#step-1 .radio-group label i {
+  padding-right: 15px;
+  display: block;
+  font-size: 40px;
+}
+#step-1 .radio-group input[type=radio] {
+  display: none;
+}
+#step-1 .radio-group label span {
+  margin: 0;
+  font-size: 20px;
+}
 
 /*
 .conditional-options .radio-group label, .conditional-options .checkbox-group label {
@@ -1051,24 +1089,30 @@ body.dark .command-fields {
       <form id="bootstrap-form">
           <!-- Step 1: New vs Clone -->
           <div class="step-content active" id="step-1">
-              <h2>Step 1: Choose Your Starting Point</h2>
+              <h2>What do you want to build?</h2>
               <div class="radio-group">
                   <label>
-                      <input type="radio" name="startType" value="new" required>
-                      <span>New Project</span>
-                      <p class="description">Start with a fresh project</p>
+                      <input type="radio" name="startType" value="clone" required>
+                      <i class="fa-solid fa-rocket"></i>
+                      <div class='col'>
+                        <span>1-Click Launcher</span>
+                        <p class="description">Build a 1-click launcher for an existing app (from git)</p>
+                      </div>
                   </label>
                   <label>
-                      <input type="radio" name="startType" value="clone" required>
-                      <span>Clone Repository</span>
-                      <p class="description">Clone an existing git repository</p>
+                      <input type="radio" name="startType" value="new" required>
+                      <i class="fa-solid fa-code"></i>
+                      <div class='col'>
+                        <span> New Project</span>
+                        <p class="description">Build a new app with a built-in 1-click launcher</p>
+                      </div>
                   </label>
               </div>
           </div>
 
           <!-- Step 2: Project Type -->
           <div class="step-content" id="step-2">
-              <h2>Step 2: Select Project Type</h2>
+              <h2>Select Project Type</h2>
 
               <!-- Clone Project Options -->
               <div id="clone-options" class="project-options">
@@ -1077,19 +1121,19 @@ body.dark .command-fields {
                           <input type="radio" name="projectType" value="nodejs">
                           <img class='appicon' src="/asset/prototype/system/nodejs/icon.png"/>
                           <span>Node.js</span>
-                          <p class="description">A launcher for a typical node.js project</p>
+                          <p class="description">Build a 1-click launcher for a node.js project.</p>
                       </label>
                       <label>
                           <input type="radio" name="projectType" value="python">
                           <img class='appicon' src="/asset/prototype/system/python/icon.png"/>
                           <span>Python</span>
-                          <p class='description'>A launcher for a typical python project)</p>
+                          <p class='description'>Build a 1-click launcher for a python project.</p>
                       </label>
                       <label>
                           <input type="radio" name="projectType" value="empty">
                           <img class='appicon' src="/asset/prototype/system/empty/icon.png"/>
                           <span>Any</span>
-                          <p class='description'>A minimal launcher you can customize on your own</p>
+                          <p class='description'>Build a 1-click launcher for anything else or to customize on your own.</p>
                       </label>
                   </div>