pinokiod 3.19.79 → 3.19.80

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "3.19.79",
+  "version": "3.19.80",
   "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() {
@@ -4499,6 +4501,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 +4510,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 +4619,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

@@ -228,10 +228,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 +241,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 +272,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/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>