pinokiod 3.40.0 → 3.42.0

package/server/views/init/index.ejs

@@ -22,12 +22,28 @@
     padding: 0;
     box-sizing: border-box;
 }
-#terminal {
-  margin-top: 50px;
+#terminal-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top:0;
+  right:0;
+  left:0;
+  bottom:0;
+  z-index: 100000000;
+}
+body.dark #terminal2 {
+  border: 4px solid rgba(255,255,255,0.1);
+}
+#terminal2 {
+  width: 80%;
+  height: 80%;
+  border: 4px solid rgba(0,0,0,0.1);
 }
 #create-button {
   width: 100%;
-  background: royalblue;
+  background: royalblue !important;
   font-size: 16px;
   font-weight: bold;
   border: none;
@@ -36,9 +52,9 @@
   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;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
 
 }
 body.dark #bootstrap-form {
@@ -166,6 +182,15 @@ body.dark .progress-bar .step.active {
     display: flex;
 }
 
+/* Section labels (non-clickable) */
+.category-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 700;
+  padding: 10px;
+}
+body.dark .category-label { color: rgba(255,255,255,0.8); }
+
 .tab-nav {
   flex-shrink: 0;
     /*
@@ -182,26 +207,28 @@ body.dark .tab-nav {
 
 */
 .tab-button h5 {
-  font-size: 15px;
+  font-size: 12px;
   width:  100%;
 }
 .tab-button {
+    word-break: break-word;
 /*
     display: block;
     */
     display: flex;
     flex-direction: column;
-    width: 220px !important;
+    width: 250px !important;
     gap: 5px;
-    padding: 15px 20px;
+    padding: 8px 10px;
     background: none;
     border: none;
     cursor: pointer;
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 500;
     color: rgba(0,0,0,0.6);
     transition: all 0.3s ease;
     width: 100%;
+    margin-left: 10px;
     text-align: left;
     /*
 
@@ -234,8 +261,10 @@ body.dark .tab-button:hover {
 .tab-button.active {
     color: #000;
     background: rgba(0,0,100,0.04);
-    border-top-left-radius: 50px;
-    border-bottom-left-radius: 50px;
+    /*
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    */
     /*
     background: rgba(0,0,0,0.02);
     */
@@ -251,8 +280,8 @@ body.dark .tab-button.active {
   align-items: center;
 }
 .row i {
-  font-size: 20px;
-  padding-right: 15px;
+  font-size: 14px;
+  padding-right: 10px;
 }
 
 .tab-content {
@@ -400,11 +429,11 @@ body.dark .conditional-options {
 */
 
 
-body.dark textarea, body.dark input[type="url"],  body.dark input[type="text"] {
+body.dark textarea, body.dark input[type="url"],  body.dark input[type="text"], body.dark input[type="number"] {
   background: rgba(255, 255, 255, 0.1);
   color: white;
 }
-textarea, input[type="url"], input[type="text"] {
+textarea, input[type="url"], input[type="text"], input[type="number"] {
     width: 100%;
     padding: 10px;
     border: 2px solid rgba(0,0,0,0.1);
@@ -417,7 +446,7 @@ textarea {
     min-height: 80px;
 }
 
-textarea:focus, input[type="url"]:focus, input[type="text"]:focus {
+textarea:focus, input[type="url"]:focus, input[type="text"]:focus, input[type="number"]:focus {
     outline: none;
 }
 
@@ -437,6 +466,7 @@ textarea:focus, input[type="url"]:focus, input[type="text"]:focus {
     margin-top: 2rem;
 }
 
+/*
 .btn {
     padding: 0.75rem 1.5rem;
     border: 1px solid #000000;
@@ -444,6 +474,7 @@ textarea:focus, input[type="url"]:focus, input[type="text"]:focus {
     font-weight: 500;
     transition: all 0.3s ease;
 }
+*/
 
 
 .results {
@@ -560,6 +591,7 @@ aside {
 main {
   flex-grow: 1;
   min-height: 0;
+  display: flex;
   /*
   background: rgba(0,0,100,0.04);
   height: 100%;
@@ -727,6 +759,9 @@ body.dark #new-window {
   */
   display: flex;
 }
+body.dark .btn {
+  background: rgba(255,255,255,0.05) !important;
+}
 .app-info .btn {
   width: 100%;
   box-sizing: border-box;
@@ -896,11 +931,13 @@ body.dark .grid-btns .btn2 {
 .label i {
   margin-right: 10px;
 }
+/*
 .tab i {
   margin-right: 10px;
   font-size: 12px;
   width: 12px;
 }
+*/
 .menu-item-image {
   width: 30px !important;
   height: 30px !important;
@@ -1063,6 +1100,7 @@ body.dark #new-tab {
   border-top: 1px solid rgba(255,255,255,0.04);
   */
 }
+/*
 body.dark .submenu {
   border-left: 1px solid rgba(255,255,255,0.3);
 }
@@ -1071,6 +1109,7 @@ body.dark .submenu {
   margin-left: 15px;
   box-sizing: border-box;
 }
+*/
 #menu-mobile {
   display: none;
 }
@@ -1286,6 +1325,30 @@ body.dark .command-fields {
   */
   margin-bottom: 20px;
 }
+.address-section {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+#address-result {
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  font-size: 16px;
+  padding: 10px;
+  padding: 50px 0;
+  background: rgba(0,0,0,0.04);
+  margin-top: 20px;
+}
+#remote-address, #local-address {
+  text-align: center;
+  font-size: 20px;
+  flex-grow: 1;
+  padding: 10px;
+  box-sizing: border-box;
+}
 
 .ace-editor {
   width: 100%;
@@ -1294,10 +1357,127 @@ body.dark .command-fields {
   border-radius: 4px;
   font-family: 'Courier New', monospace;
 }
+aside {
+  width: 200px;
+  display: block;
+  flex-shrink: 0;
+}
+body.dark aside .tab:hover, aside .tab:hover {
+  color: royalblue !important;
+  opacity: 1;
+}
+aside .tab i {
+  width: 20px;
+  text-align: center;
+}
+body.dark aside .tab {
+  color: white;
+}
+aside .tab.hidden {
+  padding: 0;
+}
+aside .tab {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: black;
+  text-decoration: none;
+  padding: 10px;
+  font-size: 12px;
+  opacity: 0.5;
+  border-left: 10px solid transparent;
+}
+body.dark aside .tab.selected {
+
+  color: white;
+  /*
+  border-left: 10px solid white;
+  */
+}
+aside .tab.selected {
+/*
+  border-left: 10px solid black;
+  */
+  font-weight: bold;
+  opacity: 1;
+}
 
 body.dark .ace-editor {
   border: 1px solid rgba(255,255,255,0.1);
 }
+@media only screen and (max-width: 800px) {
+  body {
+    display: flex !important;
+    flex-direction: row !important;
+  }
+}
+@media only screen and (max-width: 600px) {
+  aside {
+    width: unset;
+    flex-shrink: unset;
+  }
+  aside {
+    padding: 0 10px;
+  }
+  aside .tab i {
+    width: 100%;
+  }
+  aside .tab .caption {
+    display: none;
+  }
+  aside .tab {
+    margin: 0;
+    padding: 10px;
+    border-left: none;
+  }
+  aside .btn-tab {
+    flex-direction: column;
+    padding: 10px 0;
+  }
+  aside .btn-tab .btn {
+    display: flex;
+    justify-content: center;
+  }
+  aside .btn-tab .btn .caption {
+    display: none; 
+  }
+  header .flexible {
+    min-width: unset;
+  }
+  .tab-button {
+    width: unset !important;
+    margin: 0;
+  }
+  .tab-button i {
+    display: block;
+    width: 100%;
+    text-align: center;
+    padding: 0;
+  }
+  .category-label {
+    text-align: center;
+  }
+  .tab-nav {
+    flex-shrink: unset;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .tab-nav .row div {
+    display: none;
+  }
+}
+@media only screen and (max-width: 480px) {
+  .btn2 {
+    padding: 5px;
+    font-size: 11px;
+  }
+  .nav-btns {
+    flex-grow: 1;
+    justify-content: center;
+    padding: 0;
+  }
+}
 </style>
 <link href="/app.css" rel="stylesheet"/>
 <link href="/xterm.min.css" rel="stylesheet" />
@@ -1318,6 +1498,8 @@ body.dark .ace-editor {
 <script src="/xterm-theme.js"></script>
 <script src="/xterm-addon-search.js"></script>
 <script src="/xterm-addon-search-bar.js"></script>
+<script src="/popper.min.js"></script>
+<script src="/tippy-bundle.umd.min.js"></script>
 <script src="/filepond-plugin-file-validate-type.min.js"></script>
 <script src="/filepond-plugin-image-exif-orientation.min.js"></script>
 <script src="/filepond-plugin-image-preview.min.js"></script>
@@ -1332,62 +1514,106 @@ body.dark .ace-editor {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
-<button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div><div>Prev</div></button>
-<button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div><div>Next</div></button>
-<button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div><div>Refresh</div></button>
+<button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
+<button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
+<button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
+<button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
 <div class='flexible'></div>
-<a href="/connect" class='btn2'><div><i class="fa-solid fa-circle-user"></i></div><div>Connect</div></a>
-<div class='nav-btns'>
-  <a class='btn2' href="<%=portal%>" target="_blank"><div><i class="fa-solid fa-question"></i></div><div>Help</div></a>
-  <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></button>
-  <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><div><i class="fa-solid fa-download"></i></div><div>Download logs</div></a>
-  <a class='btn2' href="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
-  <button id='new-window' title='open a new window' class='btn2' data-agent="<%=agent%>"><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
+<a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+  <div><i class="fa-solid fa-table-columns"></i></div>
+</a>
+<a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
+  <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
+</a>
+<div class="dropdown btn2">
+  <button class='btn2' id='window-management'>
+    <div><i class="fa-solid fa-plus"></i></div>
+  </button>
+  <div class="dropdown-content" id="dropdown-content">
+    <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+      <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+    </button>
+    <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+      <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+    </button>
+  </div>
+</div>
+<!--
+<div class="dropdown btn2">
+  <button class='btn2' id='window-management'>
+    <div><i class="fa-regular fa-window-restore"></i></div>
+  </button>
+  <div class="dropdown-content" id="dropdown-content">
+    <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+      <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+    </button>
+    <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+      <div><i class="fa-solid fa-table-columns"></i><div>split columns</div></div>
+    </a>
+    <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
+      <div><i class="fa-solid fa-table-columns fa-rotate-270"></i><div>split rows</div></div>
+    </a>
+    <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+      <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+    </button>
+  </div>
 </div>
+-->
+<button class='btn2 hidden' id='close-window' data-tippy-content='close this section'>
+  <div><i class="fa-solid fa-xmark"></i></div>
+</button>
 </h1>
 </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">
+          <div class='category-label'>Create a new project</div>
+          <!-- Create category subtabs -->
           <button type="button" class="tab-button active" data-tab="launcher">
             <div class='row'>
               <i class="fa-solid fa-cloud-arrow-down"></i>
-              <div>
-                <h5>Git Launcher</h5>
-                <div>Launch any git-based open source project</div>
-              </div>
+              <div><h5>1-Click Launcher</h5></div>
             </div>
           </button>
           <button type="button" class="tab-button" data-tab="cli">
             <div class='row'>
               <i class="fa-solid fa-terminal"></i>
-              <div>
-                <h5>CLI App Launcher</h5>
-                <div>Run any Terminal app in the browser.</div>
-              </div>
+              <div><h5>Terminal App Launcher</h5></div>
             </div>
           </button>
           <button type="button" class="tab-button" data-tab="project">
             <div class='row'>
               <i class="fa-regular fa-pen-to-square"></i>
-              <div>
-                <h5>Empty Launcher</h5>
-                <div>Start a new project with a built-in 1-click launcher.</div>
-              </div>
+              <div><h5>Create a New App</h5></div>
+            </div>
+          </button>
+          <div class='category-label'>Import an existing project</div>
+          <!-- Import category subtabs -->
+          <button type="button" class="tab-button" data-tab="import-copy">
+            <div class='row'>
+              <i class="fa-solid fa-clone"></i>
+              <div><h5>Import</h5></div>
+            </div>
+          </button>
+          <button type="button" class="tab-button" data-tab="import-link">
+            <div class='row'>
+              <i class="fa-solid fa-link"></i>
+              <div><h5>Link</h5></div>
             </div>
           </button>
-          <button type="button" class="tab-button" data-tab="quickcreate">
+          <button type="button" class="tab-button" data-tab="import-clone">
             <div class='row'>
-              <i class="fa-solid fa-robot"></i>
-              <div>
-                <h5>AI Engineer</h5>
-                <div>Let AI build a launcher for anything.</div>
-              </div>
+              <i class="fa-solid fa-download"></i>
+              <div><h5>Download</h5></div>
+            </div>
+          </button>
+          <div class='category-label'>Create a web domain</div>
+          <!-- Domain category subtab -->
+          <button type="button" class="tab-button" data-tab="dns">
+            <div class='row'>
+              <i class="fa-solid fa-link"></i>
+              <div><h5>Web Domain</h5></div>
             </div>
           </button>
         </div>
@@ -1398,12 +1624,10 @@ 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 class='bubble'>Create a launcher for any open source project cloned from git.</div>
                 </div>
-                -->
                 <div class="git-url-input">
                     <blockquote>Git URL</blockquote>
                     <div class='explain'>Enter a git repository URL to clone from.</div>
@@ -1488,12 +1712,10 @@ 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 class='bubble'>Run any terminal app in the browser.</div>
                 </div>
-                -->
                 <blockquote>Type</blockquote>
                 <div class='explain'>Single-command apps vs. Installable apps.</div>
                 <div class="project-options">
@@ -1537,32 +1759,66 @@ body.dark .ace-editor {
                     </div>
                 </div>
             </div>
+            <!-- Import: Copy Tab -->
+            <div class="tab-content" id="import-copy-tab">
+                <div class="header-description">
+                  <img class='logo2' src="/pinokio-black.png"/>
+                  <div class='bubble'>Import an external folder into Pinokio</div>
+                </div>
+                <div class="git-url-input">
+                    <blockquote>Folder Path</blockquote>
+                    <input id='importCopy' type="text" name="importPath" placeholder="folder path">
+                </div>
+                <input type="hidden" name="importTypeCopy" value="copy" />
+            </div>
+
+            <!-- Import: Link Tab -->
+            <div class="tab-content" id="import-link-tab">
+                <div class="header-description">
+                  <img class='logo2' src="/pinokio-black.png"/>
+                  <div class='bubble'>Create a symbolic link to an external folder</div>
+                </div>
+                <div class="git-url-input">
+                    <blockquote>Folder Path</blockquote>
+                    <input id='importLink' type="text" name="importPath" placeholder="folder path">
+                </div>
+                <input type="hidden" name="importTypeLink" value="link" />
+            </div>
+
+            <!-- Import: Download (Clone) Tab -->
+            <div class="tab-content" id="import-clone-tab">
+                <div class="header-description">
+                  <img class='logo2' src="/pinokio-black.png"/>
+                  <div class='bubble'>Download a project by cloning its Git repository</div>
+                </div>
+                <div class="git-url-input">
+                    <blockquote>Git URL</blockquote>
+                    <input type="url" id="importDownload" name="importDownload" placeholder="example: https://github.com/username/repository.git">
+                </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 class='bubble'>Set up a new project with a built-in 1-click launcher.</div>
                 </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>
@@ -1584,16 +1840,33 @@ body.dark .ace-editor {
                                 </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>
+                            <span>Node.js starter</span>
                         </label>
                         <label>
                             <input type="radio" name="projectType" value="python">
                             <img class='appicon' src="/asset/prototype/system/python/icon.png"/>
-                            <span>Python</span>
+                            <span>Python starter</span>
                         </label>
+                        <label>
+                            <input type="radio" name="projectType" value="empty">
+                            <img class='appicon' src="/asset/prototype/system/empty/icon.png"/>
+                            <span>Empty starter</span>
+                        </label>
+                        <label>
+                            <input type="radio" name="projectType" value="blank">
+                            <img class='appicon' src="/asset/prototype/system/empty/icon.png"/>
+                            <span>Empty folder</span>
+                        </label>
+                        <label>
+                            <input type="radio" name="projectType" value="ai">
+                            <img class='appicon' src="/asset/prototype/system/cli/icon.png"/>
+                            <span>Initialize using AI</span>
+                        </label>
+
                     </div>
 
 
@@ -1621,50 +1894,54 @@ body.dark .ace-editor {
                     </div>
                 </div>
 
-            </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>
-                    <% }) %>
+                <!-- AI Options under New Project -->
+                <div id="ai-options" class="conditional-options">
+                  <div class="header-description">
+                    <img class='logo2' src="/pinokio-black.png"/>
+                    <div class='bubble'>Use AI prompts to build a 1-click launcher</div>
                   </div>
-                  <div class='ai-container'>
-                    <% ai.forEach((item, i) => { %>
-                      <div data-meta="<%=JSON.stringify(item.data)%>" 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) => { %>
-                          <% if (!key.startsWith(".")) { %>
-                            <input class='ai-input' type='text' placeholder='<%=item.meta[key]%>' name='<%=key%>'>
+                  <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 data-meta="<%=JSON.stringify(item.data)%>" 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) => { %>
+                            <% if (!key.startsWith(".")) { %>
+                              <input class='ai-input' type='text' placeholder='<%=item.meta[key]%>' name='<%=key%>'>
+                            <% } %>
+                          <% }) %>
+                          <% if (item.placeholder) { %>
+                            <textarea placeholder="<%=item.placeholder%>"><%=item.content%></textarea>
+                          <% } else { %>
+                            <textarea placeholder="<%=item.description%>"><%=item.content%></textarea>
                           <% } %>
-                        <% }) %>
-                        <textarea placeholder="<%=item.description%>"><%=item.content%></textarea>
-                        <pre class='hidden'><%=item.content%></pre>
-                      </div>
-                    <% }) %>
-                  </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>
+                          <pre class='hidden'><%=item.content%></pre>
+                        </div>
+                      <% }) %>
                     </div>
-                    -->
+                    <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>
+                </div>
+
+            </div>
+
+            <!-- Instant HTTPS Tab -->
+            <div class="tab-content" id="dns-tab">
+                <div class="header-description">
+                  <img class='logo2' src="/pinokio-black.png"/>
+                  <div class='bubble'>Instantly get domain names for any localhost server running on your machine. Just enter the port number and the domain you want.</div>
+                </div>
+                <div class='address-section'>
+                  <input type='text' placeholder="domain name" id='dns_name'>
+                  <input type='number' placeholder="port number" id='dns_port'>
+                </div>
+                <div id='address-result'>
                 </div>
             </div>
 
@@ -1673,19 +1950,61 @@ body.dark .ace-editor {
             </div>
         </form>
       </div>
-      <div id='terminal'></div>
       <div id='end'></div>
   </div>
+<aside>
+  <div class='btn-tab'>
+    <a href="/init" class='btn'><i class="fa-solid fa-plus"></i><div class='caption'>Create</div></a>
+    <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-globe"></i><div class='caption'>Discover</div></a>
+  </div>
+  <a href="/" class='tab'><i class='fas fa-laptop-code'></i><div class='caption'>This machine</div></a>
+  <a href="/network" class='tab'><i class="fa-solid fa-wifi"></i><div class='caption'>Local network</div></a>
+  <% if (list.length > 0) { %>
+    <% let brands = { win32: "windows", darwin: "apple", linux: "Linux" } %>
+    <% list.forEach(({ host, name, platform, processes }, index) => { %>
+      <a href="/net/<%=name%>" class='submenu tab'><i class="fa-brands fa-<%=brands[platform]%>"></i><div class='caption'><%=name%> (<%=current_host === host ? 'this machine' : host%>)</div></a>
+    <% }) %>
+  <% } %>
+  <a href="/connect" class='tab'><i class="fa-solid fa-plug"></i><div class='caption'>Login</div></a>
+  <a class='tab' href="<%=portal%>" target="_blank"><i class="fa-solid fa-question"></i><div class='caption'>Help</div></a>
+  <a class='tab' id='genlog'><i class="fa-solid fa-laptop-code"></i><div class='caption'>Logs</div></a>
+  <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
+  <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
+  <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
+  <a class='tab' href="/?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
+</aside>
 </main>
+<div id='terminal-container' class='hidden'>
+  <div id='terminal2'></div>
+</div>
 <script>
+let shell_id
+let socket = new Socket()
 const resizeAITextarea = () => {
   let textarea = document.querySelector(".ai-container .ai-tab-content.selected textarea")
   textarea.style.height = "";
   textarea.style.height = textarea.scrollHeight + "px";
 }
+const refreshAddress = () => {
+  let port = document.querySelector("#dns_port").value
+  let name = document.querySelector("#dns_name").value
+  document.querySelector("#address-result").innerHTML = `<div>https://${name || '[NAME]'}.localhost</div><i class="fa-solid fa-arrow-right"></i></div><div>http://localhost:${port || '[PORT]'}</div>`
+  return {
+    dns_name: name,
+    dns_port: port,
+  }
+}
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize tabs
+    // Initialize tabs and categories
     initializeTabs();
+    refreshAddress()
+
+    document.querySelector("#dns_port").addEventListener("input", (e) => {
+      refreshAddress()
+    })
+    document.querySelector("#dns_name").addEventListener("input", (e) => {
+      refreshAddress()
+    })
 
     document.querySelector(".ai-tabs").addEventListener("click", (e) => {
       if (e.target.classList.contains("ai-tab")) {
@@ -1723,8 +2042,7 @@ document.addEventListener('DOMContentLoaded', function() {
       })
     })
 
-    
-    // Show launcher tab by default
+    // Show default subtab
     showTab('launcher');
 
     // Add tab click handlers
@@ -1741,6 +2059,23 @@ document.addEventListener('DOMContentLoaded', function() {
         radio.addEventListener('change', handleProjectTypeChange);
     });
 
+    // File pickers for import tabs
+    document.querySelectorAll('#importCopy, #importLink').forEach((el) => {
+      el.addEventListener('click', (e) => {
+        let socket = new Socket()
+        socket.run({
+          method: "kernel.bin.filepicker",
+          params: { title: "Select a path", type: "folder" }
+        }, async (packet) => {
+          if (packet.type === "result") {
+            if (packet.data.paths.length > 0) {
+              let p = packet.data.paths[0]
+              e.target.value = p
+            }
+          }
+        }).then((res) => { console.log("Ended", res) })
+      })
+    })
 
     const cliTypeRadios = document.querySelectorAll('input[name="cliType"]');
     cliTypeRadios.forEach(radio => {
@@ -1755,26 +2090,7 @@ document.addEventListener('DOMContentLoaded', function() {
     // Form submission
     document.getElementById('bootstrap-form').addEventListener('submit', handleSubmit);
 
-    document.querySelector("#local").addEventListener("click", (e) => {
-      let socket = new Socket()
-      socket.run({
-        method: "kernel.bin.filepicker",
-        params: {
-          cwd: "<%-JSON.stringify(cwd).slice(1, -1)%>",
-          title: "Select a path",
-          type: "folder",
-        }
-      }, async (packet) => {
-        if (packet.type === "result") {
-          if (packet.data.paths.length > 0) {
-            let p = packet.data.paths[0]
-            e.target.value = p
-          }
-        }
-      }).then((res) => {
-        console.log("Ended", res)
-      })
-    })
+// Removed old single import picker; using per-tab pickers above
 
     // Initialize Ace editors
     initializeAceEditors();
@@ -1829,6 +2145,8 @@ function initializeTabs() {
     // Initialize tab functionality
 }
 
+// removed showCategory; all subtabs are always visible under labels
+
 function showTab(tabName) {
     // Hide all tab contents
     document.querySelectorAll('.tab-content').forEach(tab => {
@@ -1878,9 +2196,9 @@ function showTab(tabName) {
         clearCliInputs();
     }
 
-    if (tabName === "quickcreate") {
-        resizeAITextarea()
-    }
+    // Resize AI textarea if AI option visible
+    const aiSelected = document.querySelector('input[name="projectType"][value="ai"]')?.checked
+    if (tabName === 'project' && aiSelected) resizeAITextarea()
 
 }
 
@@ -1891,12 +2209,13 @@ function hideAllConditionalOptions() {
     document.getElementById('installable-cli-options').classList.remove('show');
     document.getElementById('venv-option').classList.remove('show');
     document.getElementById('clone-command-fields').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');
+    const ai = document.getElementById('ai-options');
+    if (ai) ai.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 activeTab = document.querySelector('.tab-content.active').id;
@@ -1933,8 +2252,14 @@ function handleProjectTypeChange(event) {
         } else {
             document.getElementById('python-options').classList.add('show');
         }
+    } else if (projectType === 'ai') {
+        const ai = document.getElementById('ai-options');
+        if (ai) {
+          ai.classList.add('show');
+          setTimeout(resizeAITextarea, 0);
+        }
     } else if (projectType === 'documentation') {
-        document.getElementById('documentation-options').classList.add('show');
+//        document.getElementById('documentation-options').classList.add('show');
     }
 }
 
@@ -2061,8 +2386,8 @@ function handleDocTypeChange(event) {
     const docType = event.target.value;
 
     // Hide all documentation sub-options first
-    document.getElementById('local-doc-options').classList.remove('show');
-    document.getElementById('remote-doc-options').classList.remove('show');
+//    document.getElementById('local-doc-options').classList.remove('show');
+//    document.getElementById('remote-doc-options').classList.remove('show');
 
     // Clear documentation input fields
     document.querySelector('input[name="localDocPath"]').value = '';
@@ -2070,9 +2395,9 @@ function handleDocTypeChange(event) {
 
     // Show appropriate documentation options
     if (docType === 'local') {
-        document.getElementById('local-doc-options').classList.add('show');
+//        document.getElementById('local-doc-options').classList.add('show');
     } else if (docType === 'remote') {
-        document.getElementById('remote-doc-options').classList.add('show');
+//        document.getElementById('remote-doc-options').classList.add('show');
     }
 }
 
@@ -2080,8 +2405,11 @@ function validateForm() {
     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 = document.getElementById('gitUrl').value.trim();
+    const isDNS = activeTab === 'dns-tab';
+    const isImportCopy = activeTab === 'import-copy-tab';
+    const isImportLink = activeTab === 'import-link-tab';
+    const isImportClone = activeTab === 'import-clone-tab';
+    const isImport = isImportCopy || isImportLink || isImportClone;
     
     // Validate Git URL for launcher tab
     if (isLauncher) {
@@ -2126,13 +2454,23 @@ function validateForm() {
         }
     }
     
-    // Validate quick create tab
-    if (isQuickCreate) {
-        // No additional validation needed for quick create
+    if (isImportCopy || isImportLink) {
+        const importPath = (isImportCopy ? document.getElementById('importCopy') : document.getElementById('importLink')).value.trim();
+        if (!importPath) {
+            alert('Please enter a folder to import');
+            return false;
+        }
+    }
+    if (isImportClone) {
+        const gitUrl = document.getElementById('importDownload').value.trim();
+        if (!gitUrl) {
+            alert('Please enter a Git repository URL.');
+            return false;
+        }
     }
     
     // Validate project tab
-    if (!isLauncher && !isCli && !isQuickCreate) {
+    if (!isLauncher && !isCli && !isDNS && !isImport) {
         const projectType = document.querySelector('input[name="projectType"]:checked');
         if (!projectType) {
             alert('Please select a project type.');
@@ -2168,26 +2506,44 @@ function validateForm() {
 
 function handleSubmit(event) {
     event.preventDefault();
+    const activeTab = document.querySelector('.tab-content.active').id;
 
     let aiTab = document.querySelector(".ai-tab-content.selected textarea")
     let aiMeta = null
     if (aiTab && aiTab.value) {
       document.querySelector("#aiPrompt").value = aiTab.value
       let ai_meta_str = aiTab.closest(".ai-tab-content").getAttribute("data-meta")
-      aiMeta = JSON.parse(ai_meta_str)
+      if (ai_meta_str) {
+        aiMeta = JSON.parse(ai_meta_str)
+      }
     }
     console.log({ aiMeta })
 
+    const isDNS = activeTab === 'dns-tab';
+    let name
+    let dnsPort
+    if (isDNS) {
+      let res = refreshAddress()
+      name = res.dns_name
+      dnsPort = res.dns_port
+      if (!name) {
+          return; // User cancelled or entered empty name
+      }
+      if (!dnsPort) {
+          return; // User cancelled or entered empty name
+      }
+    }
 
-    
     if (!validateForm()) {
         return;
     }
 
     // Prompt for folder name
-    let name = prompt('Enter a folder name to create:');
     if (!name) {
-        return; // User cancelled or entered empty name
+      name = prompt('Enter a folder name to create:');
+      if (!name) {
+          return; // User cancelled or entered empty name
+      }
     }
     
     name = name.trim();
@@ -2202,11 +2558,26 @@ function handleSubmit(event) {
     }
 
     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 isImportCopy = activeTab === 'import-copy-tab';
+    const isImportLink = activeTab === 'import-link-tab';
+    const isImportClone = activeTab === 'import-clone-tab';
+    const isImport = isImportCopy || isImportLink || isImportClone;
+    const isProject = activeTab === 'project-tab';
     const gitUrl = isLauncher ? formData.get('gitUrl').trim() : '';
+    let importPath
+    let importType
+    if (isImportCopy) {
+      importType = "copy"
+      importPath = document.getElementById("importCopy").value || ""
+    } else if (isImportLink) {
+      importType = "link"
+      importPath = document.getElementById("importLink").value || ""
+    } else if (isImportClone) {
+      importType = "download"
+      importPath = document.getElementById("importDownload").value || ""
+    }
 
     // Get values from Ace editors and clean them
     const cloneInstallCommandText = aceEditors['cloneInstallCommand'] ? aceEditors['cloneInstallCommand'].getValue().trim() : '';
@@ -2216,20 +2587,27 @@ function handleSubmit(event) {
     
     // 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() : '';
+    const isAI = isProject && formData.get('projectType') === 'ai';
+    const aiPromptText = isAI && document.querySelector("#aiPrompt") ? document.querySelector("#aiPrompt").value.trim() : '';
 
     // Set startType and projectType based on active tab
     let startType, projectType;
+
     if (isLauncher) {
         startType = 'clone';
         projectType = formData.get('projectType');
     } else if (isCli) {
         startType = 'new';
         projectType = 'cli';
-    } else if (isQuickCreate) {
+    } else if (isAI) {
         startType = 'new';
-        //projectType = 'empty';
         projectType = 'ai';
+    } else if (isDNS) {
+        startType = 'new'
+        projectType = 'dns'
+    } else if (isImportCopy || isImportLink || isImportClone) {
+        startType = 'new'
+        projectType = 'import'
     } else {
         startType = 'new';
         projectType = formData.get('projectType');
@@ -2264,24 +2642,22 @@ function handleSubmit(event) {
         remoteDocUrl: formData.get('remoteDocUrl'),
         aiPrompt: aiPromptText,
         aiMeta,
+        dnsPort,
+        importType,
+        importPath,
     };
-
     displayResults(config);
 }
-
-async function displayResults(config) {
-  let shell_id
-  <% if (theme === "dark") { %>
-  let _theme = xtermTheme.FrontEndDelight
-  <% } else { %>
-  let _theme = xtermTheme.Tomorrow
-  <% } %>
+const createTerm = async (_theme) => {
+  //const theme = Object.assign({ }, xtermTheme.Terminal_Basic, {
   const theme = Object.assign({ }, _theme, {
     selectionBackground: "red",
     selectionForeground: "white"
   })
-
-  let term_config = {
+  <% if (theme !== "dark") { %>
+    theme.foreground = "black"
+  <% } %>
+  let config = {
     scrollback: 9999999,
     fontSize: 14,
     theme,
@@ -2290,35 +2666,44 @@ async function displayResults(config) {
     return res.json()
   })
   if (res && res.config) {
-    term_config = res.config
+    config = res.config
   }
-  let socket = new Socket()
-  const term = new Terminal(term_config)
-  term.open(document.querySelector("#terminal"))
-  term.attachCustomKeyEventHandler(event => {
-    console.log({ event })
-    if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
-      const selection = term.getSelection();
-      if (selection) {
-        navigator.clipboard.writeText(selection);
-        return false;
-      }
+  const term = new Terminal(config)
+  term.open(document.querySelector("#terminal2"))
+  document.querySelector("#terminal-container").classList.remove("hidden")
+  /*
+  document.querySelector("#terminal-container").addEventListener("click", (e) => {
+    console.log("e.target", e.target)
+    if (e.target.querySelector("#terminal2")) {
+      console.log("frame")
+      document.querySelector("#terminal-container").classList.add("hidden")
+    } else {
+      console.log("inside terminal")
     }
-    if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
-      navigator.clipboard.readText().then((text) => {
-        console.log({ text })
-        socket.run({
-          //key: "\x1b[200~" + text + "\x1b[201~",
-          key: text,
-          id: shell_id,
-          paste: true
-        })
+  })
+  */
 
-      })
-      return false
+  term.attachCustomKeyEventHandler(event => {
+    if (event.ctrlKey && event.key === 'c' && term.hasSelection()) {
+      return false;
+    }
+    if (event.ctrlKey && event.key === 'v' && this._options.pasteWithCtrlV) {
+      return false;
     }
     return true;
   });
+
+  fitAddon = new FitAddon.FitAddon();
+  term.loadAddon(fitAddon);
+  <% if (agent === "electron") { %>
+    term.loadAddon(new WebLinksAddon.WebLinksAddon((event, uri) => {
+      window.open(uri, "_blank")
+    }))
+  <% } else { %>
+    term.loadAddon(new WebLinksAddon.WebLinksAddon());
+  <% } %>
+  fitAddon.fit();
+
   term.onKey(({ key }) => {
     console.log({ key, shell_id })
     if (socket) {
@@ -2330,16 +2715,14 @@ async function displayResults(config) {
       }
     }
   });
-  const fitAddon = new FitAddon.FitAddon();
-  term.loadAddon(fitAddon);
-  fitAddon.fit();
-  term.focus()
+
   let observer = new ResizeObserver(() => {
     fitAddon.fit()
     console.log(`Resized to ${term.cols}x${term.rows}`);
     // Trigger your custom handler here
     if (socket) {
       if (shell_id) {
+        console.log("RESIZE", { shell_id, cols: term.cols, rows: term.rows })
         socket.run({
           resize: {
             cols: term.cols,
@@ -2351,14 +2734,85 @@ async function displayResults(config) {
     }
   });
   observer.observe(document.body)
+
+  term.focus()
+  console.log(`Resized to ${term.cols}x${term.rows}`);
+  return term
+}
+
+async function displayResults(config) {
+//  <% if (theme === "dark") { %>
+//  let _theme = xtermTheme.FrontEndDelight
+//  <% } else { %>
+//  let _theme = xtermTheme.Tomorrow
+//  <% } %>
+//  const theme = Object.assign({ }, _theme, {
+//    selectionBackground: "red",
+//    selectionForeground: "white"
+//  })
+//
+//  let term_config = {
+//    scrollback: 9999999,
+//    fontSize: 14,
+//    theme,
+//  }
+//  let res = await fetch("/xterm_config").then((res) => {
+//    return res.json()
+//  })
+//  if (res && res.config) {
+//    term_config = res.config
+//  }
+//  const term = new Terminal(term_config)
+
+
+  <% if (theme === "dark") { %>
+  let term = await createTerm(xtermTheme.FrontEndDelight)
+  <% } else { %>
+  let term = await createTerm(xtermTheme.Tomorrow)
+  <% } %>
+
+//  term.open(document.querySelector("#terminal2"))
+//  term.attachCustomKeyEventHandler(event => {
+//    console.log({ event })
+//    if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
+//      const selection = term.getSelection();
+//      if (selection) {
+//        navigator.clipboard.writeText(selection);
+//        return false;
+//      }
+//    }
+//    if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
+//      navigator.clipboard.readText().then((text) => {
+//        console.log({ text })
+//        socket.run({
+//          //key: "\x1b[200~" + text + "\x1b[201~",
+//          key: text,
+//          id: shell_id,
+//          paste: true
+//        })
+//
+//      })
+//      return false
+//    }
+//    return true;
+//  });
+//  const fitAddon = new FitAddon.FitAddon();
+//  term.loadAddon(fitAddon);
+//  fitAddon.fit();
+//  term.focus()
   const write = (text) => {
     if (text !== "\u0007") {
       term.write(text)
     }
   }
   socket.run({
+    id: "kernel.proto.create",
     method: "kernel.proto.create",
     cwd: "<%-JSON.stringify(cwd).slice(1, -1)%>",
+    client: {
+      cols: term.cols,
+      rows: term.rows,
+    },
 //    name: "<%=name%>",
     params: config
   }, async (packet) => {