pinokiod 3.20.2 → 3.20.4

package/server/views/init/index.ejs

@@ -22,18 +22,43 @@
     padding: 0;
     box-sizing: border-box;
 }
+#create-button {
+  width: 100%;
+  background: royalblue;
+  font-size: 16px;
+  font-weight: bold;
+  border: none;
+}
+#bootstrap-form {
+  padding: 20px;
+  flex-grow: 1;
+  background: rgba(0,0,100,0.04);
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+  border-bottom-left-radius: 20px;
+
+}
+body.dark #bootstrap-form {
+  background: rgba(255,255,255,0.06);
+}
 img.appicon {
-  width: 40px;
-  height: 40px;
-  margin-right: 5px;
+  width: 30px;
+  height: 30px;
   padding: 5px;
   border-radius: 4px;
   background: white;
 }
+.explain {
+  margin-bottom: 10px;
+  opacity: 0.7;
+}
 .container {
     max-width: 800px;
+    /*
     margin: 0 auto;
     padding: 2rem;
+    */
+
 }
 img.logo2 {
   height: 50px;
@@ -58,17 +83,23 @@ h2 {
 h1 {
   letter-spacing: 0px;
   font-size:40px;
-  text-align: center;
   text-transform: uppercase;
+  padding-bottom: 20px;
 }
 
 body.dark blockquote {
-    border-left: 10px solid rgba(255,255,255,0.1);
+    border-left: 10px solid white;
 }
 blockquote {
-    padding: 10px;
-    border-left: 10px solid rgba(0, 0, 0, 0.05);
-    margin: 10px 0;
+    text-transform: uppercase;
+    /*
+    */
+
+    padding-left: 5px;
+    border-left: 10px solid black;
+    font-size: 16px;
+    margin-bottom: 5px;
+    font-weight: bold;
 }
 
 .progress-bar {
@@ -112,7 +143,81 @@ body.dark .progress-bar .step.active {
 }
 
 .step-content h2 {
-    margin-bottom: 1.5rem;
+    margin-bottom: 10px;
+}
+
+/* Tab Styles */
+.tab-container {
+    display: flex;
+}
+
+.tab-nav {
+  flex-shrink: 0;
+    /*
+    display: flex;
+    border-bottom: 2px solid rgba(0,0,0,0.1);
+    margin: 0 0 30px 0;
+    */
+}
+
+/*
+body.dark .tab-nav {
+    border-bottom: 2px solid rgba(255,255,255,0.1);
+}
+
+*/
+.tab-button {
+    display: block;
+    padding: 10px 20px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    color: rgba(0,0,0,0.6);
+    transition: all 0.3s ease;
+    width: 100%;
+    text-align: left;
+    /*
+
+    border-bottom: 2px solid rgba(0,0,0,0.1);
+    */
+}
+
+body.dark .tab-button {
+  color: rgba(255,255,255,0.6);
+}
+
+.tab-button:hover {
+    color: rgba(0,0,0,0.8);
+    background: rgba(0,0,0,0.02);
+}
+
+body.dark .tab-button:hover {
+    color: rgba(255,255,255,0.8);
+    background: rgba(255,255,255,0.02);
+}
+
+.tab-button.active {
+    color: #000;
+    background: rgba(0,0,100,0.04);
+    border-top-left-radius: 20px;
+    border-bottom-left-radius: 20px;
+    /*
+    background: rgba(0,0,0,0.02);
+    */
+}
+
+body.dark .tab-button.active {
+    background: rgba(255,255,255,0.06);
+}
+
+.tab-content {
+    display: none;
+}
+
+.tab-content.active {
+    display: block;
 }
 
 /*
@@ -121,14 +226,19 @@ body.dark .progress-bar .step.active {
 }
 */
 
+/*
 body.dark .radio-group label {
     background: rgba(0,0,0,0.3);
 }
+*/
+body.dark .radio-group label {
+    background: rgba(0,0,0,0.2);
+}
 .radio-group label {
-    background: rgba(0,0,0,0.03);
+    border-radius: 2px;
+    background: white;
     display: flex;
     align-items: center;
-    margin-bottom: 5px;
     padding: 10px;
     cursor: pointer;
     transition: all 0.3s ease;
@@ -145,7 +255,7 @@ body.dark .radio-group label {
 }
 
 .radio-group label span {
-    font-size: 16px;
+    font-size: 14px;
     /*
     font-weight: lighter;
     */
@@ -246,15 +356,10 @@ body.dark .conditional-options {
 }
 */
 
-.project-options {
-    display: none;
-}
-
-.project-options.show {
-    display: block;
-}
 
 body.dark textarea, body.dark input[type="url"],  body.dark input[type="text"] {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
 }
 textarea, input[type="url"], input[type="text"] {
     width: 100%;
@@ -390,6 +495,8 @@ body.dark .m {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  margin: 0 auto;
+  padding: 50px 0;
 }
 body aside {
 /*
@@ -414,6 +521,7 @@ main {
   flex-grow: 1;
   min-height: 0;
   /*
+  background: rgba(0,0,100,0.04);
   height: 100%;
   */
 }
@@ -943,7 +1051,6 @@ body.dark .submenu {
   font-size: 16px !important;
 }
 
-
 .custom-label {
   position: absolute;
   top: 0;
@@ -967,6 +1074,36 @@ body.dark .submenu {
 body.dark .appcanvas {
   border-top: 1px solid rgba(255,255,255,0.04);
 }
+.bubble {
+  position: relative;
+  background: rgba(0,0,0,0.1);
+  color: #333;
+  border-radius: 10px;
+  padding: 10px 15px;
+  font-size: 14px;
+  flex-grow: 1;
+  line-height: 1.4;
+  margin: 0 10px;
+  font-weight: bold;
+}
+/* Left-side tail */
+.bubble::before {
+  content: "";
+  position: absolute;
+  top: 10px; /* Vertical alignment of the tail */
+  left: -20px; /* Positioning outside the bubble */
+  border-width: 10px;
+  border-style: solid;
+  border-color: transparent rgba(0,0,0,0.1) transparent transparent;
+}
+body.dark .bubble {
+  background: rgba(0,0,0,0.4);
+  color: white;
+}
+body.dark .bubble:before {
+  border-color: transparent rgba(0,0,0,0.4) transparent transparent;
+}
+
 
 @media only screen and (max-width: 480px) {
   nav .btn2 {
@@ -1027,6 +1164,15 @@ body.dark .appcanvas {
 body.dark .command-fields {
   background: rgba(0,0,0,0.3);
 }
+.header-description {
+  display: flex;
+  align-items: center;
+  /*
+  background: rgba(0,0,0,0.8);
+  color: white;
+  */
+  margin-bottom: 20px;
+}
 
 .ace-editor {
   width: 100%;
@@ -1090,279 +1236,304 @@ body.dark .ace-editor {
 </header>
 <main>
   <div class="container">
+  <!--
+      <h1>Build a Launcher</h1>
       <h1><img class='logo2' src="/pinokio-black.png"/> Project Setup</h1>
+      -->
+      <div class="tab-container">
+        <div class="tab-nav">
+            <button type="button" class="tab-button active" data-tab="launcher">
+                <i class="fa-solid fa-cloud-arrow-down" style="margin-right: 5px;"></i>
+                Git
+            </button>
+            <button type="button" class="tab-button" data-tab="cli">
+                <i class="fa-solid fa-terminal" style="margin-right: 5px;"></i>
+                CLI
+            </button>
+            <button type="button" class="tab-button" data-tab="project">
+                <i class="fa-regular fa-star" style="margin-right: 5px;"></i>
+                New project
+            </button>
+        </div>
+
+        <form id="bootstrap-form">
+            <!-- Launcher Tab -->
+            <div class="tab-content active" id="launcher-tab">
+            <!--
+                <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>
+                    <input type="url" name="gitUrl" id="gitUrl" placeholder="example: https://github.com/username/repository.git">
+                </div>
+
+                <div class="project-options">
+                    <blockquote>Type</blockquote>
+                    <div class='explain'>If you want to decide later, just choose "universal launcher".</div>
+                    <div class="radio-group">
+                        <label>
+                            <input type="radio" name="projectType" value="nodejs">
+                            <img class='appicon' src="/asset/prototype/system/nodejs/icon.png"/>
+                            <span>Node.js Launcher</span>
+                            <p class="description">install and launch 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 Launcher</span>
+                            <p class='description'>install and launch a Python project.</p>
+                        </label>
+                        <label>
+                            <input type="radio" name="projectType" value="empty">
+                            <img class='appicon' src="/asset/prototype/system/empty/icon.png"/>
+                            <span>Universal Launcher</span>
+                            <p class='description'>Build a launcher for any Git repository.</p>
+                        </label>
+                    </div>
 
-      <div class="progress-bar">
-          <div class="step active" data-step="1">1</div>
-          <div class="step" data-step="2">2</div>
-          <div class="step" data-step="3">3</div>
-      </div>
-
-      <form id="bootstrap-form">
-          <!-- Step 1: New vs Clone -->
-          <div class="step-content active" id="step-1">
-              <h2>What do you want to build?</h2>
-              <div class="radio-group">
-                  <label>
-                      <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 class='command-fields conditional-options' id="clone-command-fields">
+                      <!-- Additional Fields for Clone Mode -->
+                      <div class="git-url-input">
+                          <blockquote>Install Command (Leave empty to decide later)</blockquote>
+                          <div id="cloneInstallCommand" class="ace-editor" data-name="cloneInstallCommand" data-placeholder="Install commands (one per line)"></div>
+                          <div class="checkbox-group">
+                              <label>
+                                  <input type="checkbox" name="allowInstallUserInput" value="true">
+                                  <span>Allow user input for install commands</span>
+                              </label>
+                          </div>
                       </div>
-                  </label>
-                  <label>
-                      <input type="radio" name="startType" value="new" required>
-                      <i class="fa-solid fa-code"></i>
-                      <div class='col'>
-                        <span> App</span>
-                        <p class="description">Set up a new project with a built-in 1-click launcher</p>
+
+                      <div class="git-url-input">
+                          <blockquote>Start Command (Leave empty to decide later)</blockquote>
+                          <div id="cloneStartCommand" class="ace-editor" data-name="cloneStartCommand" data-placeholder="Start commands (one per line)"></div>
+                          <div class="checkbox-group">
+                              <label>
+                                  <input type="checkbox" name="allowStartUserInput" value="true">
+                                  <span>Allow user input for start commands</span>
+                              </label>
+                          </div>
                       </div>
-                  </label>
-              </div>
-          </div>
-
-          <!-- Step 2: Project Type -->
-          <div class="step-content" id="step-2">
-              <h2>Select Project Type</h2>
-
-              <!-- Clone Project Options -->
-              <div id="clone-options" class="project-options">
-                  <div class="radio-group">
-                      <label>
-                          <input type="radio" name="projectType" value="nodejs">
-                          <img class='appicon' src="/asset/prototype/system/nodejs/icon.png"/>
-                          <span>Node.js Launcher</span>
-                          <p class="description">install and launch 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 Launcher</span>
-                          <p class='description'>install and launch a Python project.</p>
-                      </label>
-                      <label>
-                          <input type="radio" name="projectType" value="empty">
-                          <img class='appicon' src="/asset/prototype/system/empty/icon.png"/>
-                          <span>Universal Launcher</span>
-                          <p class='description'>Build a launcher for any Git repository.</p>
-                      </label>
-                      <label>
-                          <input type="radio" name="projectType" value="cli">
-                          <img class='appicon' src="/asset/prototype/system/cli/icon.png"/>
-                          <span>CLI App Launcher</span>
-                          <p class="description">Build a 1-click launcher for any terminal app (npx, uvx, etc.).</p>
-                      </label>
-                  </div>
-
-                  <div class='command-fields conditional-options' id="clone-command-fields">
-                    <div class="git-url-input">
-                        <label for="gitUrl">Git Repository URL</label>
-                        <input type="url" name="gitUrl" id="gitUrl" placeholder="https://github.com/username/repository.git">
                     </div>
 
-                    <!-- Additional Fields for Clone Mode -->
-                    <div class="git-url-input">
-                        <label for="cloneInstallCommand">Install Command (Leave empty to decide later)</label>
-                        <div id="cloneInstallCommand" class="ace-editor" data-name="cloneInstallCommand" data-placeholder="Install commands (one per line)"></div>
+                    <!-- Python Options for Clone -->
+                    <div id="python-options-clone" class="conditional-options">
+                        <h3>Python Options</h3>
                         <div class="checkbox-group">
                             <label>
-                                <input type="checkbox" name="allowInstallUserInput" value="true">
-                                <span>Allow user input for install commands</span>
+                                <input type="checkbox" name="pythonOptions" value="torch">
+                                <span>Torch</span>
+                            </label>
+                            <label>
+                                <input type="checkbox" name="pythonOptions" value="xformers">
+                                <span>Xformers</span>
                             </label>
+                            <label>
+                                <input type="checkbox" name="pythonOptions" value="triton">
+                                <span>Triton</span>
+                            </label>
+                            <label>
+                                <input type="checkbox" name="pythonOptions" value="sageattention">
+                                <span>SageAttention</span>
+                            </label>
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <!-- 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">
+                    <div class="radio-group">
+                        <label>
+                            <input type="radio" name="cliType" value="instant">
+                            <img class='appicon' src="/asset/prototype/system/cli/icon.png"/>
+                            <span>Instant Command</span>
+                            <p class="description">npx, uvx, etc.</p>
+                        </label>
+                        <label>
+                            <input type="radio" name="cliType" value="installable">
+                            <img class='appicon' src="/asset/prototype/system/cli/icon.png"/>
+                            <span>Installable CLI App</span>
+                            <p class="description">CLI apps that require installation</p>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Instant CLI Options -->
+                <div id="instant-cli-options" class="conditional-options">
+                    <blockquote>Launch Command</blockquote>
+                    <input type="text" name="launchCommand" placeholder="e.g., npx create-react-app">
+                </div>
+
+                <!-- Installable CLI Options -->
+                <div id="installable-cli-options" class="conditional-options">
+                    <blockquote>Install Command</blockquote>
+                    <div id="installCommand" class="ace-editor" data-name="installCommand" data-placeholder="Install commands (one per line)"></div>
+                    <blockquote>Launch Command</blockquote>
+                    <div id="installableLaunchCommand" class="ace-editor" data-name="installableLaunchCommand" data-placeholder="Launch commands (one per line)"></div>
+                </div>
+
+                <!-- Virtual Environment Option -->
+                <div id="venv-option" class="conditional-options">
+                    <div class="checkbox-group">
+                        <label>
+                            <input type="checkbox" name="useVenv" value="true">
+                            <span>Use virtual environment (venv)</span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 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">
+                    <div class="radio-group">
+                        <label>
+                            <input type="radio" name="projectType" value="empty">
+                            <img class='appicon' src="/asset/prototype/system/empty/icon.png"/>
+                            <span>Empty Project</span>
+                        </label>
+
+                        <label>
+                            <input type="radio" name="projectType" value="documentation">
+                            <img class='appicon' src="/asset/prototype/system/documentation/icon.png"/>
+                            <span>Documentation</span>
+                        </label>
+
+                        <!-- Documentation Options -->
+                        <div id="documentation-options" class="conditional-options">
+                            <div class="radio-group">
+                                <label>
+                                    <input type="radio" name="docType" value="local">
+                                    <span>Documentation from Local Project</span>
+                                </label>
+                                <div id="local-doc-options" class="conditional-options">
+                                    <h4>Local Project Path</h4>
+                                    <input type="text" name="localDocPath" placeholder="e.g., /home/user/my-project" id='local'>
+                                </div>
+
+                                <label>
+                                    <input type="radio" name="docType" value="remote">
+                                    <span>Documentation from Remote Git Repository</span>
+                                </label>
+                                <div id="remote-doc-options" class="conditional-options">
+                                    <h4>Remote Git Repository URL</h4>
+                                    <input type="text" name="remoteDocUrl" placeholder="e.g., https://github.com/user/repo.git">
+                                </div>
+                            </div>
                         </div>
+                        <label>
+                            <input type="radio" name="projectType" value="nodejs">
+                            <img class='appicon' src="/asset/prototype/system/nodejs/icon.png"/>
+                            <span>Node.js</span>
+                        </label>
+                        <label>
+                            <input type="radio" name="projectType" value="python">
+                            <img class='appicon' src="/asset/prototype/system/python/icon.png"/>
+                            <span>Python</span>
+                        </label>
                     </div>
 
-                    <div class="git-url-input">
-                        <label for="cloneStartCommand">Start Command (Leave empty to decide later)</label>
-                        <div id="cloneStartCommand" class="ace-editor" data-name="cloneStartCommand" data-placeholder="Start commands (one per line)"></div>
+
+                    <!-- Python Options -->
+                    <div id="python-options" class="conditional-options">
+                        <h3>Python Options</h3>
                         <div class="checkbox-group">
                             <label>
-                                <input type="checkbox" name="allowStartUserInput" value="true">
-                                <span>Allow user input for start commands</span>
+                                <input type="checkbox" name="pythonOptions" value="torch">
+                                <span>Torch</span>
+                            </label>
+                            <label>
+                                <input type="checkbox" name="pythonOptions" value="xformers">
+                                <span>Xformers</span>
+                            </label>
+                            <label>
+                                <input type="checkbox" name="pythonOptions" value="triton">
+                                <span>Triton</span>
+                            </label>
+                            <label>
+                                <input type="checkbox" name="pythonOptions" value="sageattention">
+                                <span>SageAttention</span>
                             </label>
                         </div>
                     </div>
-                  </div>
-
-                  <!-- Python Options for Clone -->
-                  <div id="python-options-clone" class="conditional-options">
-                      <h3>Python Options</h3>
-                      <div class="checkbox-group">
-                          <label>
-                              <input type="checkbox" name="pythonOptions" value="torch">
-                              <span>Torch</span>
-                          </label>
-                          <label>
-                              <input type="checkbox" name="pythonOptions" value="xformers">
-                              <span>Xformers</span>
-                          </label>
-                          <label>
-                              <input type="checkbox" name="pythonOptions" value="triton">
-                              <span>Triton</span>
-                          </label>
-                          <label>
-                              <input type="checkbox" name="pythonOptions" value="sageattention">
-                              <span>SageAttention</span>
-                          </label>
-                      </div>
-                  </div>
-
-                  <!-- CLI App Launcher Options for Clone -->
-                  <div id="cli-options" class="conditional-options">
-                      <div class="radio-group">
-                          <label>
-                              <input type="radio" name="cliType" value="instant">
-                              <span>Instant Command Launcher</span>
-                              <p class="description">npx, uvx, etc.</p>
-                          </label>
-                          <label>
-                              <input type="radio" name="cliType" value="installable">
-                              <span>Installable CLI App Launcher</span>
-                              <p class="description">CLI apps that require an installation step</p>
-                          </label>
-                      </div>
-
-                      <!-- Instant CLI Options -->
-                      <div id="instant-cli-options" class="conditional-options">
-                          <h4>Launch Command</h4>
-                          <input type="text" name="launchCommand" placeholder="e.g., npx create-react-app">
-                      </div>
-
-                      <!-- Installable CLI Options -->
-                      <div id="installable-cli-options" class="conditional-options">
-                          <h4>Install Command</h4>
-                          <div id="installCommand" class="ace-editor" data-name="installCommand" data-placeholder="Install commands (one per line)"></div>
-                          <h4>Launch Command</h4>
-                          <div id="installableLaunchCommand" class="ace-editor" data-name="installableLaunchCommand" data-placeholder="Launch commands (one per line)"></div>
-                      </div>
-
-                      <!-- Virtual Environment Option -->
-                      <div class="checkbox-group">
-                          <label>
-                              <input type="checkbox" name="useVenv" value="true">
-                              <span>Use virtual environment (venv)</span>
-                          </label>
-                      </div>
-                  </div>
-              </div>
-
-              <!-- New Project Options -->
-              <div id="new-options" class="project-options">
-                  <div class="radio-group">
-                      <label>
-                          <input type="radio" name="projectType" value="empty">
-                          <img class='appicon' src="/asset/prototype/system/empty/icon.png"/>
-                          <span>Empty Project</span>
-                      </label>
-
-                      <label>
-                          <input type="radio" name="projectType" value="documentation">
-                          <img class='appicon' src="/asset/prototype/system/documentation/icon.png"/>
-                          <span>Documentation</span>
-                      </label>
-
-                      <!-- Documentation Options -->
-                      <div id="documentation-options" class="conditional-options">
-                          <div class="radio-group">
-                              <label>
-                                  <input type="radio" name="docType" value="local">
-                                  <span>Documentation from Local Project</span>
-                              </label>
-                              <div id="local-doc-options" class="conditional-options">
-                                  <h4>Local Project Path</h4>
-                                  <input type="text" name="localDocPath" placeholder="e.g., /home/user/my-project" id='local'>
-                              </div>
-
-                              <label>
-                                  <input type="radio" name="docType" value="remote">
-                                  <span>Documentation from Remote Git Repository</span>
-                              </label>
-                              <div id="remote-doc-options" class="conditional-options">
-                                  <h4>Remote Git Repository URL</h4>
-                                  <input type="text" name="remoteDocUrl" placeholder="e.g., https://github.com/user/repo.git">
-                              </div>
-                          </div>
-                      </div>
-                      <label>
-                          <input type="radio" name="projectType" value="nodejs">
-                          <img class='appicon' src="/asset/prototype/system/nodejs/icon.png"/>
-                          <span>Node.js</span>
-                      </label>
-                      <label>
-                          <input type="radio" name="projectType" value="python">
-                          <img class='appicon' src="/asset/prototype/system/python/icon.png"/>
-                          <span>Python</span>
-                      </label>
-                  </div>
-
-
-                  <!-- Python Options -->
-                  <div id="python-options" class="conditional-options">
-                      <h3>Python Options</h3>
-                      <div class="checkbox-group">
-                          <label>
-                              <input type="checkbox" name="pythonOptions" value="torch">
-                              <span>Torch</span>
-                          </label>
-                          <label>
-                              <input type="checkbox" name="pythonOptions" value="xformers">
-                              <span>Xformers</span>
-                          </label>
-                          <label>
-                              <input type="checkbox" name="pythonOptions" value="triton">
-                              <span>Triton</span>
-                          </label>
-                          <label>
-                              <input type="checkbox" name="pythonOptions" value="sageattention">
-                              <span>SageAttention</span>
-                          </label>
-                      </div>
-                  </div>
-              </div>
-
-              <div class="button-group">
-                  <button type="button" class="btn btn-secondary" onclick="prevStep()"><i class="fa-solid fa-chevron-left"></i> Back</button>
-                  <button type="button" class="btn btn-primary" onclick="nextStep()">Next <i class="fa-solid fa-chevron-right"></i></button>
-              </div>
-          </div>
-
-          <!-- Step 3: AI Prompt -->
-          <div class="step-content" id="step-3">
-              <h2>Step 3: AI Prompt (Optional)</h2>
-              <p>Enter a prompt to build your app with AI assistance.</p>
-              <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>
-
-              <div class="button-group">
-                  <button type="button" class="btn btn-secondary" onclick="prevStep()"><i class="fa-solid fa-chevron-left"></i> Back</button>
-                  <button type="submit" class="btn btn-success">Create</button>
-              </div>
-          </div>
-      </form>
+                </div>
+
+            </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>
+                <!--
+                <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>
+            </div>
+
+            <div class="button-group" style="margin-top: 2rem;">
+                <button type="submit" class="btn btn-success" id="create-button">Create Launcher</button>
+            </div>
+        </form>
+      </div>
       <div id='terminal'></div>
       <div id='end'></div>
   </div>
 </main>
 <script>
-let currentStep = 1;
-const totalSteps = 3;
-
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize form
-    showStep(currentStep);
-
-    // Add event listeners for conditional logic
-    const startTypeRadios = document.querySelectorAll('input[name="startType"]');
-    startTypeRadios.forEach(radio => {
-        radio.addEventListener('change', handleStartTypeChange);
-        radio.addEventListener('change', () => {
-            // Automatically move to step 2 when radio button is clicked
-            setTimeout(() => {
-                if (currentStep === 1) {
-                    nextStep();
-                }
-            }, 300); // Small delay for better UX
+    // Initialize tabs
+    initializeTabs();
+    
+    // Show launcher tab by default
+    showTab('launcher');
+
+    // Add tab click handlers
+    const tabButtons = document.querySelectorAll('.tab-button');
+    tabButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const tabName = button.getAttribute('data-tab');
+            showTab(tabName);
         });
     });
 
@@ -1455,178 +1626,81 @@ function initializeAceEditors() {
     });
 }
 
-function showStep(stepNumber) {
-    console.log(stepNumber)
-    if (stepNumber === 1) {
-      document.querySelectorAll("#step-1 input[type=radio]").forEach((el) => {
-        el.checked = false
-      })
-    }
-    // Hide all steps
-    document.querySelectorAll('.step-content').forEach(step => {
-        step.classList.remove('active');
-    });
-
-    // Show current step
-    document.getElementById(`step-${stepNumber}`).classList.add('active');
-
-    // Update progress bar
-    document.querySelectorAll('.progress-bar .step').forEach((step, index) => {
-        step.classList.remove('active', 'completed');
-        if (index + 1 < stepNumber) {
-            step.classList.add('completed');
-        } else if (index + 1 === stepNumber) {
-            step.classList.add('active');
-        }
-    });
-}
-
-function nextStep() {
-    if (validateCurrentStep()) {
-        if (currentStep < totalSteps) {
-            currentStep++;
-            showStep(currentStep);
-        }
-    }
+function initializeTabs() {
+    // Initialize tab functionality
 }
 
-function prevStep() {
-    if (currentStep > 1) {
-        currentStep--;
-        showStep(currentStep);
-    }
-}
-
-function validateCurrentStep() {
-    if (currentStep === 1) {
-        const startType = document.querySelector('input[name="startType"]:checked');
-        if (!startType) {
-            alert('Please select whether to start with a new project or clone a repository.');
-            return false;
-        }
-        return true;
-    }
-
-    if (currentStep === 2) {
-        const startType = document.querySelector('input[name="startType"]:checked');
-        const projectType = document.querySelector('input[name="projectType"]:checked');
-
-        if (!projectType) {
-            alert('Please select a project type.');
-            return false;
-        }
-
-        if (startType.value === 'clone' && projectType.value !== 'cli') {
-            const gitUrl = document.getElementById('gitUrl').value.trim();
-            if (!gitUrl) {
-                alert('Please enter a Git repository URL.');
-                return false;
-            }
-
-//            const cloneInstallCommand = document.getElementById('cloneInstallCommand').value.trim();
-//            const cloneStartCommand = document.getElementById('cloneStartCommand').value.trim();
-//            if (!cloneInstallCommand) {
-//                alert('Please enter at least one install command.');
-//                return false;
-//            }
-//            if (!cloneStartCommand) {
-//                alert('Please enter at least one start command.');
-//                return false;
-//            }
-        }
-
-        // Validate CLI options for the main CLI category
-        if (startType && startType.value === 'cli') {
-            if (projectType.value === 'instant') {
-                const launchCommand = document.querySelector('input[name="launchCommand"]').value.trim();
-                if (!launchCommand) {
-                    alert('Please enter a launch command.');
-                    return false;
-                }
-            } else if (projectType.value === 'installable') {
-                const installCommand = aceEditors['installCommand'] ? aceEditors['installCommand'].getValue().trim() : '';
-                const launchCommand = aceEditors['installableLaunchCommand'] ? aceEditors['installableLaunchCommand'].getValue().trim() : '';
-                if (!installCommand) {
-                    alert('Please enter at least one install command.');
-                    return false;
-                }
-                if (!launchCommand) {
-                    alert('Please enter at least one launch command.');
-                    return false;
-                }
-            }
-        }
-
-        // Validate Documentation options
-        if (projectType.value === 'documentation') {
-            const docType = document.querySelector('input[name="docType"]:checked');
-            if (!docType) {
-                alert('Please select a documentation source.');
-                return false;
-            }
-
-            if (docType.value === 'local') {
-                const localDocPath = document.querySelector('input[name="localDocPath"]').value.trim();
-                if (!localDocPath) {
-                    alert('Please enter a local project path.');
-                    return false;
-                }
-            } else if (docType.value === 'remote') {
-                const remoteDocUrl = document.querySelector('input[name="remoteDocUrl"]').value.trim();
-                if (!remoteDocUrl) {
-                    alert('Please enter a remote Git repository URL.');
-                    return false;
-                }
-            }
-        }
-
-        return true;
+function showTab(tabName) {
+    // Hide all tab contents
+    document.querySelectorAll('.tab-content').forEach(tab => {
+        tab.classList.remove('active');
+    });
+    
+    // Remove active class from all tab buttons
+    document.querySelectorAll('.tab-button').forEach(button => {
+        button.classList.remove('active');
+    });
+    
+    // Show selected tab
+    document.getElementById(`${tabName}-tab`).classList.add('active');
+    document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
+    
+    // Update create button text
+    const createButton = document.getElementById('create-button');
+    createButton.textContent = 'Create'
+    /*
+    if (tabName === 'launcher') {
+        createButton.textContent = 'Create Launcher';
+    } else if (tabName === 'cli') {
+        createButton.textContent = 'Create CLI Launcher';
+    } else {
+        createButton.textContent = 'Create Project';
     }
-
-    return true;
-}
-
-function handleStartTypeChange(event) {
-    const startType = event.target.value;
-    const newOptions = document.getElementById('new-options');
-    const cloneOptions = document.getElementById('clone-options');
-
-    // Clear any existing selections
+    */
+    
+    // Clear form selections when switching tabs
     document.querySelectorAll('input[name="projectType"]').forEach(radio => {
         radio.checked = false;
     });
+    document.querySelectorAll('input[name="cliType"]').forEach(radio => {
+        radio.checked = false;
+    });
+    
+    // Hide all conditional options
+    hideAllConditionalOptions();
+    
+    // Clear Git URL when switching away from launcher tab
+    if (tabName !== 'launcher') {
+        document.getElementById('gitUrl').value = '';
+    }
+    
+    // Clear CLI inputs
+    if (tabName !== 'cli') {
+        clearCliInputs();
+    }
+}
 
-    // Clear Git URL
-    document.getElementById('gitUrl').value = '';
-
-    // Hide python options
+function hideAllConditionalOptions() {
     document.getElementById('python-options').classList.remove('show');
     document.getElementById('python-options-clone').classList.remove('show');
-
-    // Hide clone command fields
+    document.getElementById('instant-cli-options').classList.remove('show');
+    document.getElementById('installable-cli-options').classList.remove('show');
+    document.getElementById('venv-option').classList.remove('show');
     document.getElementById('clone-command-fields').classList.remove('show');
-
-    if (startType === 'clone') {
-        cloneOptions.classList.add('show');
-        newOptions.classList.remove('show');
-    } else {
-        newOptions.classList.add('show');
-        cloneOptions.classList.remove('show');
-    }
+    document.getElementById('documentation-options').classList.remove('show');
+    document.getElementById('local-doc-options').classList.remove('show');
+    document.getElementById('remote-doc-options').classList.remove('show');
 }
 
+
 function handleProjectTypeChange(event) {
     const projectType = event.target.value;
-    const startType = document.querySelector('input[name="startType"]:checked').value;
+    const activeTab = document.querySelector('.tab-content.active').id;
+    const isLauncher = activeTab === 'launcher-tab';
+    const isCli = activeTab === 'cli-tab';
 
     // Hide all conditional options first
-    document.getElementById('python-options').classList.remove('show');
-    document.getElementById('python-options-clone').classList.remove('show');
-    document.getElementById('cli-options').classList.remove('show');
-    document.getElementById('instant-cli-options').classList.remove('show');
-    document.getElementById('installable-cli-options').classList.remove('show');
-    document.getElementById('clone-command-fields').classList.remove('show');
-    document.getElementById('documentation-options').classList.remove('show');
+    hideAllConditionalOptions();
 
     // Clear all checkboxes and radio buttons
     document.querySelectorAll('input[name="pythonOptions"]').forEach(checkbox => {
@@ -1642,22 +1716,43 @@ function handleProjectTypeChange(event) {
     // Clear CLI input fields
     clearCliInputs();
 
-    // Show clone command fields when a project type is selected in clone mode (but not for CLI)
-    if (startType === 'clone' && projectType !== 'cli') {
+    // Show clone command fields when a project type is selected in launcher mode (but not for CLI)
+    if (isLauncher && projectType !== 'cli') {
         document.getElementById('clone-command-fields').classList.add('show');
         updateCloneDefaults(projectType);
     }
 
     // Show appropriate options based on project type
     if (projectType === 'python') {
-        if (startType === 'clone') {
+        if (isLauncher) {
             document.getElementById('python-options-clone').classList.add('show');
         } else {
             document.getElementById('python-options').classList.add('show');
         }
-    } else if (projectType === 'cli') {
-        document.getElementById('cli-options').classList.add('show');
-        // Re-initialize CLI editors that just became visible
+    } else if (projectType === 'documentation') {
+        document.getElementById('documentation-options').classList.add('show');
+    }
+}
+
+// Add CLI type change handler
+function handleCliTypeChange(event) {
+    const cliType = event.target.value;
+
+    // Hide all CLI sub-options first
+    document.getElementById('instant-cli-options').classList.remove('show');
+    document.getElementById('installable-cli-options').classList.remove('show');
+    document.getElementById('venv-option').classList.remove('show');
+
+    // Clear CLI input fields
+    clearCliInputs();
+
+    // Show appropriate CLI options
+    if (cliType === 'instant') {
+        document.getElementById('instant-cli-options').classList.add('show');
+    } else if (cliType === 'installable') {
+        document.getElementById('installable-cli-options').classList.add('show');
+        document.getElementById('venv-option').classList.add('show');
+        // Re-initialize editors that just became visible
         setTimeout(() => {
             if (aceEditors['installCommand']) {
                 aceEditors['installCommand'].session.insert({ row: aceEditors['installCommand'].session.getLength(), column: 0 }, "\n\n");
@@ -1676,8 +1771,6 @@ function handleProjectTypeChange(event) {
                 aceEditors['installableLaunchCommand'].renderer.updateFull();
             }
         }, 50);
-    } else if (projectType === 'documentation') {
-        document.getElementById('documentation-options').classList.add('show');
     }
 }
 
@@ -1737,19 +1830,26 @@ function handleCliTypeChange(event) {
 }
 
 function updateCloneDefaults(projectType) {
-    const installCommandField = document.getElementById('cloneInstallCommand');
-    const startCommandField = document.getElementById('cloneStartCommand');
-
-    if (projectType === 'nodejs') {
-        installCommandField.value = 'npm install';
-        startCommandField.value = 'npm start';
-    } else if (projectType === 'python') {
-        installCommandField.value = 'uv pip install -r requirements.txt';
-        startCommandField.value = 'python app.py';
-    } else if (projectType === 'empty') {
-        // Clear fields for "Use AI" category
-        installCommandField.value = '';
-        startCommandField.value = '';
+    // Use Ace editor setValue() method instead of .value
+    const installCommandEditor = aceEditors['cloneInstallCommand'];
+    const startCommandEditor = aceEditors['cloneStartCommand'];
+
+    if (installCommandEditor && startCommandEditor) {
+        if (projectType === 'nodejs') {
+            installCommandEditor.setValue('npm install');
+            startCommandEditor.setValue('npm start');
+        } else if (projectType === 'python') {
+            installCommandEditor.setValue('uv pip install -r requirements.txt');
+            startCommandEditor.setValue('python app.py');
+        } else if (projectType === 'empty') {
+            // Clear fields for "Use AI" category
+            installCommandEditor.setValue('');
+            startCommandEditor.setValue('');
+        }
+        
+        // Clear selection and move cursor to end for better UX
+        installCommandEditor.clearSelection();
+        startCommandEditor.clearSelection();
     }
 }
 
@@ -1772,10 +1872,131 @@ function handleDocTypeChange(event) {
     }
 }
 
+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();
+    
+    // Validate Git URL for launcher tab
+    if (isLauncher) {
+        const gitUrl = document.getElementById('gitUrl').value.trim();
+        if (!gitUrl) {
+            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) {
+            alert('Please select a project type.');
+            return false;
+        }
+    }
+    
+    // Validate CLI tab
+    if (isCli) {
+        const cliType = document.querySelector('input[name="cliType"]:checked');
+        if (!cliType) {
+            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();
+            if (!launchCommand) {
+                alert('Please enter a launch command.');
+                return false;
+            }
+        } else if (cliType.value === 'installable') {
+            const installCommand = aceEditors['installCommand'] ? aceEditors['installCommand'].getValue().trim() : '';
+            const launchCommand = aceEditors['installableLaunchCommand'] ? aceEditors['installableLaunchCommand'].getValue().trim() : '';
+            if (!installCommand) {
+                alert('Please enter at least one install command.');
+                return false;
+            }
+            if (!launchCommand) {
+                alert('Please enter at least one launch command.');
+                return false;
+            }
+        }
+    }
+    
+    // Validate project tab
+    if (!isLauncher && !isCli) {
+        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') {
+            const docType = document.querySelector('input[name="docType"]:checked');
+            if (!docType) {
+                alert('Please select a documentation source.');
+                return false;
+            }
+            
+            if (docType.value === 'local') {
+                const localDocPath = document.querySelector('input[name="localDocPath"]').value.trim();
+                if (!localDocPath) {
+                    alert('Please enter a local project path.');
+                    return false;
+                }
+            } else if (docType.value === 'remote') {
+                const remoteDocUrl = document.querySelector('input[name="remoteDocUrl"]').value.trim();
+                if (!remoteDocUrl) {
+                    alert('Please enter a remote Git repository URL.');
+                    return false;
+                }
+            }
+        }
+    }
+    
+    return true;
+}
+
 function handleSubmit(event) {
     event.preventDefault();
+    
+    if (!validateForm()) {
+        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 gitUrl = isLauncher ? formData.get('gitUrl').trim() : '';
 
     // Get values from Ace editors and clean them
     const cloneInstallCommandText = aceEditors['cloneInstallCommand'] ? aceEditors['cloneInstallCommand'].getValue().trim() : '';
@@ -1784,23 +2005,36 @@ function handleSubmit(event) {
     const installableLaunchCommandText = aceEditors['installableLaunchCommand'] ? aceEditors['installableLaunchCommand'].getValue().trim() : '';
     const aiPromptText = aceEditors['aiPrompt'] ? aceEditors['aiPrompt'].getValue().trim() : '';
 
-    const startType = formData.get('startType');
-    const projectType = formData.get('projectType');
+    // Set startType and projectType based on active tab
+    let startType, projectType, name;
+    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 {
+        startType = 'new';
+        projectType = formData.get('projectType');
+        name = formData.get("foldername-new").trim();
+    }
 
     // For CLI category, map the projectType to cliType for backwards compatibility
     let mappedProjectType = projectType;
     let cliType = formData.get('cliType');
 
-    if (startType === 'cli') {
-        // When CLI is selected as startType, projectType becomes the cliType
-        cliType = projectType;
+    if (projectType === 'cli') {
+        // When CLI is selected as projectType, cliType determines the actual type
         mappedProjectType = 'cli';
     }
 
     const config = {
+        name,
         startType: startType,
         projectType: mappedProjectType,
-        gitUrl: formData.get('gitUrl'),
+        gitUrl: gitUrl,
         cloneInstallCommand: cloneInstallCommandText ? cloneInstallCommandText.split('\n').filter(line => line.trim() !== '') : [],
         cloneStartCommand: cloneStartCommandText ? cloneStartCommandText.split('\n').filter(line => line.trim() !== '') : [],
         allowInstallUserInput: formData.get('allowInstallUserInput'),
@@ -1910,7 +2144,7 @@ async function displayResults(config) {
   socket.run({
     method: "kernel.proto.create",
     cwd: "<%-JSON.stringify(cwd).slice(1, -1)%>",
-    name: "<%=name%>",
+//    name: "<%=name%>",
     params: config
   }, async (packet) => {
     console.log('packet', packet)
@@ -1923,6 +2157,7 @@ async function displayResults(config) {
         location.href = packet.data.success
       } else if (packet.data.error) {
         alert(packet.data.error)
+        location.href = location.href
       }
     } else if (packet.type === "stream") {
       // set the current shell id