pinokiod 3.24.0 → 3.25.0

package/server/views/init/index.ejs

@@ -55,8 +55,21 @@ img.appicon {
   margin-bottom: 10px;
   opacity: 0.7;
 }
+.explain .well {
+  margin-top: 20px;
+  background: rgba(0,0,0,0.04);
+  /*
+  border-left: 5px solid rgba(0,0,0,0.1);
+  */
+  padding: 20px;
+}
+.explain ol {
+  padding-inline-start: 15px;
+}
 .container {
+/*
     max-width: 800px;
+    */
     /*
     margin: 0 auto;
     padding: 2rem;
@@ -169,9 +182,19 @@ body.dark .tab-nav {
 }
 
 */
+.tab-button h5 {
+  font-size: 15px;
+  width:  100%;
+}
 .tab-button {
+/*
     display: block;
-    padding: 10px 20px;
+    */
+    display: flex;
+    flex-direction: column;
+    width: 220px !important;
+    gap: 5px;
+    padding: 20px;
     background: none;
     border: none;
     cursor: pointer;
@@ -186,9 +209,17 @@ body.dark .tab-nav {
     border-bottom: 2px solid rgba(0,0,0,0.1);
     */
 }
+.tab-button .col {
+  display: block;
+}
+/*
+.tab-button i {
+  padding: 5px;
+}
+*/
 
 body.dark .tab-button {
-  color: rgba(255,255,255,0.6);
+  color: rgba(255,255,255,0.5);
 }
 
 .tab-button:hover {
@@ -213,6 +244,12 @@ body.dark .tab-button:hover {
 
 body.dark .tab-button.active {
     background: rgba(255,255,255,0.06);
+    color: white;
+}
+
+.row {
+  display: flex;
+  align-items: center;
 }
 
 .tab-content {
@@ -441,9 +478,6 @@ textarea:focus, input[type="url"]:focus, input[type="text"]:focus {
 
 
 
-
-
-
 .online {
   width: 10px;
   height: 10px;
@@ -499,7 +533,7 @@ body.dark .m {
   flex-direction: column;
   flex-grow: 1;
   margin: 0 auto;
-  padding: 50px 0;
+  padding: 20px;
 }
 body aside {
 /*
@@ -1106,6 +1140,61 @@ body.dark .bubble {
 body.dark .bubble:before {
   border-color: transparent rgba(0,0,0,0.4) transparent transparent;
 }
+.ai-prompt-section {
+  display: flex;
+}
+
+.ai-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-bottom: 10px;
+}
+.ai-tab:hover {
+  color: royalblue;
+}
+.ai-tab {
+  cursor: pointer;
+  color: silver;
+  padding: 10px 20px;
+  font-size: 14px;
+  width: 200px;
+}
+.ai-tab.selected {
+  color: white;
+  background: rgba(0,0,0,0.1);
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+  font-weight: bold;
+}
+.ai-tab-content.selected {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: rgba(0,0,0,0.1);
+}
+.ai-tab-content .ai-input {
+  background: white !important;
+  color: black !important;
+}
+.ai-tab-content {
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+  display: none; 
+  padding: 20px;
+}
+.ai-container {
+  flex-grow: 1;
+}
+.ai-container h1 {
+  padding: 0;
+  font-weight: bold;
+  font-size: 25px;
+}
+.md-desc {
+  padding-left: 10px;
+  border-left: 10px solid white;
+}
 
 
 @media only screen and (max-width: 480px) {
@@ -1244,24 +1333,34 @@ body.dark .ace-editor {
       -->
       <div class="tab-container">
         <div class="tab-nav">
-            <!--
-            <button type="button" class="tab-button active" data-tab="launcher">
-               <i class="fa-solid fa-robot" style="margin-right: 5px;"></i>
-                Quick Launcher
-            </button>
-            -->
-            <button type="button" class="tab-button active" data-tab="launcher">
-                <i class="fa-solid fa-cloud-arrow-down" style="margin-right: 5px;"></i>
-                Git Project Launcher
-            </button>
-            <button type="button" class="tab-button" data-tab="cli">
-                <i class="fa-solid fa-terminal" style="margin-right: 5px;"></i>
-                CLI App Launcher
-            </button>
-            <button type="button" class="tab-button" data-tab="project">
-                <i class="fa-regular fa-star" style="margin-right: 5px;"></i>
-                New project
-            </button>
+          <button type="button" class="tab-button active" data-tab="launcher">
+            <div class='row'>
+              <i class="fa-solid fa-cloud-arrow-down" style="margin-right: 5px;"></i>
+              <h5>Git Launcher</h5>
+            </div>
+            <div class='row'>Launch any git-based open source project</div>
+          </button>
+          <button type="button" class="tab-button" data-tab="cli">
+            <div class='row'>
+              <i class="fa-solid fa-terminal" style="margin-right: 5px;"></i>
+              <h5>CLI App Launcher</h5>
+            </div>
+            <div class='row'>Run any Terminal app in the browser.</div>
+          </button>
+          <button type="button" class="tab-button" data-tab="project">
+            <div class='row'>
+              <i class="fa-regular fa-star" style="margin-right: 5px;"></i>
+              <h5>Empty Launcher</h5>
+            </div>
+            <div class='row'>Start a new project with a built-in 1-click launcher.</div>
+          </button>
+          <button type="button" class="tab-button" data-tab="quickcreate">
+            <div class='row'>
+              <i class="fa-solid fa-robot" style="margin-right: 5px;"></i>
+              <h5>AI Engineer</h5>
+            </div>
+            <div class='row'>Let AI build a launcher for anything.</div>
+          </button>
         </div>
 
         <form id="bootstrap-form">
@@ -1270,16 +1369,12 @@ body.dark .ace-editor {
             <!--
                 <h2>Create a 1-Click Launcher</h2>
                 -->
+                <!--
                 <div class="header-description">
                   <img class='logo2' src="/pinokio-black.png"/>
                   <div class='bubble'>Create a launcher for any open source project via git.</div>
                 </div>
-                <div class="git-url-input">
-                    <blockquote>Name</blockquote>
-                    <div class='explain'>Enter a new folder name to create.</div>
-                    <input type="text" name="foldername-launcher" id="foldername-launcher" placeholder="folder name">
-                </div>
-                
+                -->
                 <div class="git-url-input">
                     <blockquote>Git URL</blockquote>
                     <div class='explain'>Enter a git repository URL to clone from.</div>
@@ -1364,15 +1459,12 @@ body.dark .ace-editor {
 
             <!-- CLI Tab -->
             <div class="tab-content" id="cli-tab">
+                <!--
                 <div class="header-description">
                   <img class='logo2' src="/pinokio-black.png"/>
                   <div class='bubble'>Create a launcher for any terminal apps (npx, uvx, etc.)</div>
                 </div>
-                <div class="git-url-input">
-                    <blockquote>Name</blockquote>
-                    <div class='explain'>Enter a new folder name to create.</div>
-                    <input type="text" name="foldername-cli" id="foldername-cli" placeholder="folder name">
-                </div>
+                -->
                 <blockquote>Type</blockquote>
                 <div class='explain'>Single-command apps vs. Installable apps.</div>
                 <div class="project-options">
@@ -1419,15 +1511,12 @@ body.dark .ace-editor {
 
             <!-- Project Tab -->
             <div class="tab-content" id="project-tab">
+              <!--
                 <div class="header-description">
                   <img class='logo2' src="/pinokio-black.png"/>
                   <div class='bubble'>Create a new project with a built-in 1-click launcher</div>
                 </div>
-                <div class="git-url-input">
-                    <blockquote>Name</blockquote>
-                    <div class='explain'>Enter a new folder name to create.</div>
-                    <input type="text" name="foldername-new" id="foldername-new" placeholder="folder name">
-                </div>
+                -->
                 <blockquote>Type</blockquote>
                 <div class='explain'>Set up a new 1-click launcher project.</div>
                 <div class="project-options">
@@ -1505,18 +1594,47 @@ body.dark .ace-editor {
 
             </div>
 
-            <!-- AI Prompt Section (shared across both tabs) -->
-            <div class="ai-prompt-section" style="margin-top: 2rem;">
-            <!--
-                <h2>AI Prompt (Optional)</h2>
-                <p>Enter a prompt to build your app with AI assistance.</p>
-                -->
-                <blockquote>What do you want to build?</blockquote>
-                <div class='explain'>(Optional) Explain what the project should do. Will be saved as README.md, and will be automatically used by AI Coding tools to build the app.</div>
+            <!-- Quick Create Tab -->
+            <div class="tab-content" id="quickcreate-tab">
+                <div class="ai-prompt-section">
+                  <div class='ai-tabs'>
+                    <% ai.forEach((item, i) => { %>
+                      <div data-title="<%=item.title%>" class='ai-tab <%=i===0 ? "selected" : ""%>'><%=item.title%></div>
+                    <% }) %>
+                  </div>
+                  <div class='ai-container'>
+                    <% ai.forEach((item, i) => { %>
+                      <div class='ai-tab-content <%=i===0 ? "selected" : ""%>' data-title="<%=item.title%>">
+                        <h1><%=item.title%></h1>
+                        <div class='md-desc'><%=item.description%></div>
+                        <% Object.keys(item.meta).forEach((key) => { %>
+                          <input class='ai-input' type='text' placeholder='<%=item.meta[key]%>' name='<%=key%>'>
+                        <% }) %>
+                        <textarea><%=item.content%></textarea>
+                        <pre class='hidden'><%=item.content%></pre>
+                      </div>
+                    <% }) %>
+                  </div>
                 <!--
-                <blockquote>The prompt will be stored in README.md, and ANY AI coding tool will be automatically instructed about the project (Just say "build the app").</blockquote>
-                -->
-                <div id="aiPrompt" class="ace-editor" data-name="aiPrompt" data-placeholder="Describe what you want to build... (optional)" style="height: 150px;"></div>
+                    <blockquote>What do you want to build?</blockquote>
+                    -->
+                    <textarea class='hidden' id='aiPrompt' data-name="aiPrompt" data-placeholder="Describe what you want to build..." placeholder="What do you want to build?"></textarea>
+                    <!--
+                    <div id="aiPrompt" class="ace-editor" data-name="aiPrompt" data-placeholder="Describe what you want to build..." style="height: 150px;"></div>
+                    -->
+
+                    <!--
+                    <div class='explain'>
+                      <div class='well'>
+                        <ol>
+                          <li>Describe what the project should do, and click "create".</li>
+                          <li>This will be saved inside README.md.</li>
+                          <li>AI coding tools will automatically read the README.md file to figure out what to build. You just need to tell them to "build".</li>
+                        </ol>
+                      </div>
+                    </div>
+                    -->
+                </div>
             </div>
 
             <div class="button-group" style="margin-top: 2rem;">
@@ -1529,9 +1647,48 @@ body.dark .ace-editor {
   </div>
 </main>
 <script>
+const resizeAITextarea = () => {
+  let textarea = document.querySelector(".ai-container .ai-tab-content.selected textarea")
+  textarea.style.height = "";
+  textarea.style.height = textarea.scrollHeight + "px";
+}
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize tabs
     initializeTabs();
+
+    document.querySelector(".ai-tabs").addEventListener("click", (e) => {
+      document.querySelectorAll(".ai-tab").forEach((el) => {
+        el.classList.remove('selected')
+      })
+      e.target.classList.add("selected")
+      document.querySelectorAll(`.ai-tab-content`).forEach((el) => {
+        el.classList.remove("selected")
+      })
+      let title = e.target.getAttribute("data-title")
+      document.querySelector(`.ai-tab-content[data-title="${title}"]`).classList.add('selected')
+      resizeAITextarea()
+    })
+    document.querySelectorAll(".ai-tab-content").forEach((tab) => {
+      tab.addEventListener("input", (e) => {
+        if (e.target.classList.contains("ai-input")) {
+          let name = e.target.name
+          // get all values from all ai-input and replace
+          let els = e.target.closest(".ai-tab-content").querySelectorAll(".ai-input")
+          let vals = {}
+          let pre = e.target.closest(".ai-tab-content").querySelector("pre")
+          let textarea = e.target.closest(".ai-tab-content").querySelector("textarea")
+          resizeAITextarea()
+          let md = pre.textContent
+          for(let el of els) {
+            let pattern = `{{${el.name}}}`
+            md = md.replaceAll(pattern, el.value)
+          }
+          textarea.value = md
+          document.querySelector("#aiPrompt").value = md
+        }
+      })
+    })
+
     
     // Show launcher tab by default
     showTab('launcher');
@@ -1686,6 +1843,11 @@ function showTab(tabName) {
     if (tabName !== 'cli') {
         clearCliInputs();
     }
+
+    if (tabName === "quickcreate") {
+        resizeAITextarea()
+    }
+
 }
 
 function hideAllConditionalOptions() {
@@ -1884,7 +2046,8 @@ function validateForm() {
     const activeTab = document.querySelector('.tab-content.active').id;
     const isLauncher = activeTab === 'launcher-tab';
     const isCli = activeTab === 'cli-tab';
-        const gitUrl = document.getElementById('gitUrl').value.trim();
+    const isQuickCreate = activeTab === 'quickcreate-tab';
+    const gitUrl = document.getElementById('gitUrl').value.trim();
     
     // Validate Git URL for launcher tab
     if (isLauncher) {
@@ -1893,15 +2056,6 @@ function validateForm() {
             alert('Please enter a Git repository URL.');
             return false;
         }
-        const name = document.getElementById('foldername-launcher').value.trim();
-        if (!name) {
-            alert('Please enter a folder name.');
-            return false;
-        }
-        if (name.includes(" ")) {
-            alert('No spaces allowed');
-            return false;
-        }
         
         const projectType = document.querySelector('input[name="projectType"]:checked');
         if (!projectType) {
@@ -1917,16 +2071,6 @@ function validateForm() {
             alert('Please select a CLI type.');
             return false;
         }
-
-        const name = document.getElementById('foldername-cli').value.trim();
-        if (!name) {
-            alert('Please enter a folder name.');
-            return false;
-        }
-        if (name.includes(" ")) {
-            alert('No spaces allowed');
-            return false;
-        }
         
         if (cliType.value === 'instant') {
             const launchCommand = document.querySelector('input[name="launchCommand"]').value.trim();
@@ -1948,23 +2092,18 @@ function validateForm() {
         }
     }
     
+    // Validate quick create tab
+    if (isQuickCreate) {
+        // No additional validation needed for quick create
+    }
+    
     // Validate project tab
-    if (!isLauncher && !isCli) {
+    if (!isLauncher && !isCli && !isQuickCreate) {
         const projectType = document.querySelector('input[name="projectType"]:checked');
         if (!projectType) {
             alert('Please select a project type.');
             return false;
         }
-
-        const name = document.getElementById('foldername-new').value.trim();
-        if (!name) {
-            alert('Please enter a folder name.');
-            return false;
-        }
-        if (name.includes(" ")) {
-            alert('No spaces allowed');
-            return false;
-        }
         
         // Validate Documentation options
         if (projectType.value === 'documentation') {
@@ -2000,10 +2139,28 @@ function handleSubmit(event) {
         return;
     }
 
+    // Prompt for folder name
+    let name = prompt('Enter a folder name to create:');
+    if (!name) {
+        return; // User cancelled or entered empty name
+    }
+    
+    name = name.trim();
+    if (!name) {
+        alert('Please enter a valid folder name.');
+        return;
+    }
+    
+    if (name.includes(' ')) {
+        alert('No spaces allowed in folder names.');
+        return;
+    }
+
     const formData = new FormData(event.target);
     const activeTab = document.querySelector('.tab-content.active').id;
     const isLauncher = activeTab === 'launcher-tab';
     const isCli = activeTab === 'cli-tab';
+    const isQuickCreate = activeTab === 'quickcreate-tab';
     const gitUrl = isLauncher ? formData.get('gitUrl').trim() : '';
 
     // Get values from Ace editors and clean them
@@ -2011,22 +2168,26 @@ function handleSubmit(event) {
     const cloneStartCommandText = aceEditors['cloneStartCommand'] ? aceEditors['cloneStartCommand'].getValue().trim() : '';
     const installCommandText = aceEditors['installCommand'] ? aceEditors['installCommand'].getValue().trim() : '';
     const installableLaunchCommandText = aceEditors['installableLaunchCommand'] ? aceEditors['installableLaunchCommand'].getValue().trim() : '';
-    const aiPromptText = aceEditors['aiPrompt'] ? aceEditors['aiPrompt'].getValue().trim() : '';
+    
+    // Only get AI prompt text if Quick Create tab is active
+//    const aiPromptText = isQuickCreate && aceEditors['aiPrompt'] ? aceEditors['aiPrompt'].getValue().trim() : '';
+    const aiPromptText = isQuickCreate && document.querySelector("#aiPrompt") ? document.querySelector("#aiPrompt").value.trim() : '';
 
     // Set startType and projectType based on active tab
-    let startType, projectType, name;
+    let startType, projectType;
     if (isLauncher) {
         startType = 'clone';
         projectType = formData.get('projectType');
-        name = formData.get("foldername-launcher").trim();
     } else if (isCli) {
         startType = 'new';
         projectType = 'cli';
-        name = formData.get("foldername-cli").trim();
+    } else if (isQuickCreate) {
+        startType = 'new';
+        //projectType = 'empty';
+        projectType = 'ai';
     } else {
         startType = 'new';
         projectType = formData.get('projectType');
-        name = formData.get("foldername-new").trim();
     }
 
     // For CLI category, map the projectType to cliType for backwards compatibility

package/server/views/net.ejs

@@ -449,7 +449,6 @@ body.dark .net {
       <% } %>
     <% }) %>
   <% } %>
-  <div class='tab'><i class="fa-solid fa-code"></i> Dev</div>
 </aside>
 <div class='container'>
     <form class='search'>

package/server/views/network.ejs

@@ -131,8 +131,10 @@ a.badge {
   text-decoration: none;
 }
 body.dark .btn {
-  color: white;
+  background: rgba(255,255,255,0.05) !important;
+  /*
   border: 1px solid rgba(255,255,255,0.3);
+  */
 }
 body.dark .badge {
   background: rgba(255,255,255,0.1);
@@ -588,7 +590,6 @@ input[type=search] {
         <a href="/net/<%=name%>" class='submenu tab'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=current_host === host ? 'this machine' : host%>)</a>
       <% }) %>
     <% } %>
-    <div class='tab'><i class="fa-solid fa-code"></i> Dev</div>
   </aside>
   <div class='container'>
     <div class='config'>

package/server/views/partials/dynamic.ejs

@@ -15,7 +15,7 @@
         <div <%=item.default ? 'data-default' : ''%> data-action="<%=JSON.stringify(item.action)%>" class='btn header-item frame-link <%=item.display || ""%>'>
           <div class='tab'><%-item.btn%></div>
         </div>
-      <% } else if (item.run) { %>
+      <% } else if (item.run && typeof item.run === 'string') { %>
         <div data-run="<%=item.run%>" data-cwd="<%=item.cwd%>" class='btn header-item frame-link <%=item.display || ""%>'>
           <div class='tab'><%-item.btn%></div>
         </div>