pinokiod 3.85.0 → 3.87.0

package/server/views/d.ejs

@@ -17,11 +17,14 @@
 <style>
 main {
   box-sizing: border-box;
+  padding: 0;
   /*
   flex-wrap: wrap;
   */
+  /*
   max-width: 800px;
   padding: 30px 45px;
+  */
   /*
   justify-content: center;
   */
@@ -29,72 +32,102 @@ main {
 .tab-content {
   display: flex;
   flex-wrap: wrap;
-  gap: 5px;
   flex-grow: 1;
   width: 100%;
 }
 .submenu.tab {
   margin: 10px 0;
 }
-.tab:hover {
-  color: royalblue;
-}
 .tab {
-/*
-  min-width: 250px;
-  */
   width: 100%;
   text-decoration: none;
   display: flex;
-  /*
-  flex-direction: column;
-  */
   font-size: 14px;
   font-weight: bold;
   color: black;
   overflow: hidden;
   box-sizing: border-box;
-  border-radius: 4px;
   align-items: center;
   gap: 10px;
-  /*
-  width: 120px;
-  */
+  padding: 5px;
+  cursor: pointer;
+  transition: background 0.2s ease;
 
   /*
   margin-bottom: 10px;
   */
   background: rgba(0,0,0,0.05);
 }
+.tab:hover,
+.tab:focus-visible {
+  background: rgba(0, 0, 0, 0.1);
+}
+.tab:focus-visible {
+  outline: 2px solid rgba(127, 91, 243, 0.6);
+  outline-offset: 2px;
+}
 body.dark .tab {
   color: white;
   background: rgba(255,255,255,0.03);
 }
+body.dark .tab:hover,
+body.dark .tab:focus-visible {
+  background: rgba(255, 255, 255, 0.08);
+}
 .tab h2 {
   margin: 0;
-  font-size: 18px;
+  font-weight: normal;
+  font-size: 14px;
 }
 .tab .col {
   flex-grow: 1;
   margin-left: 10px;
 }
 .tab i.img {
-  height: 50px;
-  width: 50px;
+  height: 30px;
+  width: 30px;
   background: white;
   color: black;
   display: flex;
   justify-content: center;
   font-size: 20px;
   align-items: center;
-  border-radius: 3px;
 }
 .tab img {
-  height: 50px;
-  width: 50px;
-  border-radius: 3px;
+  height: 30px;
+  width: 30px;
   background: white;
 }
+.tab .disclosure-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: rgba(0, 0, 0, 0.4);
+  flex-shrink: 0;
+  pointer-events: none;
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+.tab:hover .disclosure-indicator,
+.tab:focus-visible .disclosure-indicator {
+  color: rgba(0, 0, 0, 0.7);
+  transform: translateX(2px);
+}
+.tab.is-starting {
+  cursor: wait;
+  opacity: 0.7;
+}
+.tab.is-starting .disclosure-indicator {
+  opacity: 0.85;
+}
+body.dark .tab .disclosure-indicator {
+  color: rgba(255, 255, 255, 0.4);
+}
+body.dark .tab:hover .disclosure-indicator,
+body.dark .tab:focus-visible .disclosure-indicator {
+  color: rgba(255, 255, 255, 0.9);
+}
 /*
 body.dark .tab i {
   background: rgba(0,0,0,0.1);
@@ -114,12 +147,6 @@ body.dark .tab i {
 }
 */
 .menu-container {
-/*
-  border: 15px solid rgba(0,0,0,0.04);
-  background: white;
-  border-radius: 20px;
-  */
-  margin-bottom: 30px;
   align-items: flex-start;
 }
 /*
@@ -132,9 +159,15 @@ body.dark .menu-container {
   flex-direction: column;
   box-sizing: border-box;
 }
+body.dark .tab-header {
+  background: rgba(255,255,255,0.04);
+}
 .tab-header {
-  margin-bottom: 10px;
   font-weight: bold;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  background: rgba(0,0,0,0.04);
 }
 .container {
   margin: 0;
@@ -164,7 +197,7 @@ body.dark .btn {
   border: none;
 }
 .btn:hover {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 .btn {
   padding: 2px 10px;
@@ -228,13 +261,14 @@ body.dark .btn.run-btn {
   padding: 10px;
   border-radius: 0;
   /*
-  background: royalblue !important;
+  background: rgba(127, 91, 243, 0.9) !important;
   */
 }
 .tab-header h3 {
   margin: 0;
-  font-size: 16px;
-  text-transform: capitalize;
+  font-size: 14px;
+  text-transform: uppercase;
+  opacity: 0.6;
 }
 .tab-header h3 i {
 }
@@ -268,6 +302,9 @@ header h1 {
 h4 {
   margin: 0 0 5px;
 }
+form.search {
+  padding: 10px;
+}
 body.dark .btn.file-open {
   background: rgba(255,255,255,0.1) !important;
 }
@@ -298,6 +335,7 @@ body.dark #update-spec {
 <form class='search'>
   <input type='search' class="flexible" placeholder='Filter tools'>
 </form>
+<!--
 <header>
   <h1>Build</h1>
   <div class='flexible'></div>
@@ -309,20 +347,14 @@ body.dark #update-spec {
     </div>
   </div>
 </header>
+-->
 <div class='spec'>
   <div class='explain'>
     <h3><i class="fa-regular fa-circle-check"></i> TODO</h3>
     <ol>
       <li><strong>Build manually:</strong> Open the project files and start building. <a class='btn file-open' data-filepath="<%=filepath%>"><i class="fa-solid fa-folder-open"></i> open project folder</a></li>
       <li><strong>Build with AI:</strong> Click any of the below AI tools to instantly start building with AI.</li>
-    <!--
-      <li><strong>Build with AI:</strong> Click any of the AI tools below to start building with AI. The AI will automatically build based on the spec:</li>
-      -->
     </ol>
-    <!--
-    <textarea><%=spec%></textarea>
-    <button id='update-spec'>Update</button>
-    -->
   </div>
 </div>
 
@@ -332,13 +364,10 @@ body.dark #update-spec {
       <div class='menu-container'>
         <div class='tab-header'>
           <h3><i class='<%=item.icon%>'></i> <%=item.title%></h3>
-          <% if (item.subtitle) { %>
-          <div class='subtitle'><%=item.subtitle%></div>
-          <% } %>
         </div>
         <div class='tab-content'>
           <% item.menu.forEach((i) => { %>
-            <a href="<%=i.href%>" class='tab' data-index="<%=index++%>" data-target="@<%=i.href.split("?")[0].replace("/run", "")%>">
+            <div class='tab' role="button" tabindex="0" data-index="<%=index++%>" data-target="@<%=i.href%>" data-href="<%=i.href%>">
               <% if (i.image) { %>
                 <img src="<%=i.image%>">
               <% } else if (i.icon) { %>
@@ -348,14 +377,14 @@ body.dark #update-spec {
               <% if (i.subtitle) { %>
                 <div class='subtitle'><%=i.subtitle%></div>
               <% } %>
+              <div class='flexible'></div>
               <% if (i.link) { %>
               <div target="_blank" data-href="<%=i.link%>"><i class="fa-solid fa-circle-info"></i></div>
               <% } %>
-              <div class='flexible'></div>
-              <div class='btn'>
-                <i class="fa-solid fa-angle-right"></i>
+              <div class='disclosure-indicator' aria-hidden="true">
+                <i class="fa-solid fa-chevron-right"></i>
               </div>
-            </a>
+            </div>
           <% }) %>
         </div>
       </div>
@@ -397,6 +426,7 @@ setTimeout(() => {
   location.href = location.href
 }, 2000)
 <% } %>
+/*
 document.querySelector("#git-pull").addEventListener("click", (e) => {
   e.preventDefault()
   e.stopPropagation()
@@ -415,6 +445,7 @@ document.querySelector("#git-pull").addEventListener("click", (e) => {
     }
   })
 })
+*/
 /*
 const resize = (textarea) => {
   textarea.style.height = "";
@@ -501,6 +532,74 @@ const renderSearch = () => {
   }
 }
 renderSearch()
+const generateSession = () => {
+  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+    return crypto.randomUUID()
+  }
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`
+}
+const appendSessionParam = (value, session) => {
+  if (!value) return value
+  if (value.includes('session=')) {
+    return value
+  }
+  const delimiter = value.includes('?') ? '&' : '?'
+  return `${value}${delimiter}session=${session}`
+}
+const START_ICON_HTML = '<i class="fa-solid fa-chevron-right"></i>'
+const STARTING_ICON_HTML = '<i class="fa-solid fa-circle-notch fa-spin"></i>'
+const setTabLaunchState = (tab, state) => {
+  if (!tab) return
+  const indicator = tab.querySelector('.disclosure-indicator')
+  if (indicator) {
+    indicator.innerHTML = state === 'starting' ? STARTING_ICON_HTML : START_ICON_HTML
+  }
+  if (state === 'starting') {
+    tab.classList.add('is-starting')
+  } else {
+    tab.classList.remove('is-starting')
+  }
+}
+const pendingLaunchTabs = new Map()
+const launchTab = (tab) => {
+  if (!tab) {
+    return false
+  }
+
+  if (tab.classList.contains('is-starting')) {
+    return false
+  }
+
+  const baseHref = tab.dataset.href
+  const baseTarget = tab.dataset.target
+
+  if (!baseHref || !baseTarget) {
+    return false
+  }
+
+  const session = generateSession()
+  pendingLaunchTabs.set(session, tab)
+  setTabLaunchState(tab, 'starting')
+
+  const href = appendSessionParam(baseHref, session)
+  const target = appendSessionParam(baseTarget, session)
+
+  window.parent.postMessage({
+    launch: {
+      name: target,
+      href
+    }
+  }, "*")
+
+  return true
+}
+const extractSession = (value) => {
+  if (!value || typeof value !== 'string') {
+    return null
+  }
+  const match = value.match(/session=([^&]+)/)
+  return match ? match[1] : null
+}
 document.querySelector("form input[type=search]").addEventListener("input", (e) => {
   selectedIndex = 0
   selectedBtnIndex = 0
@@ -508,16 +607,87 @@ document.querySelector("form input[type=search]").addEventListener("input", (e)
 })
 document.querySelector("form input[type=search]").focus()
 document.addEventListener("click", (e) => {
-  if (e.target.classList.contains("tab")) {
+  const infoTarget = e.target.closest('[data-href][target="_blank"]')
+  if (infoTarget) {
     e.preventDefault()
     e.stopPropagation()
-    let href = e.target.href
-    window.parent.postMessage({
-      launch: {
-        name: e.target.getAttribute("data-target"),
-        href
-      }
-    }, "*")
+    window.open(infoTarget.getAttribute('data-href'), '_blank')
+    return
+  }
+
+  const tab = e.target.closest('.tab[data-href]')
+  if (!tab) {
+    return
+  }
+
+  if (launchTab(tab)) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+})
+
+document.addEventListener('keydown', (e) => {
+  if (!['Enter', ' ', 'Spacebar'].includes(e.key)) {
+    return
+  }
+
+  const target = e.target
+  if (!(target instanceof HTMLElement)) {
+    return
+  }
+
+  const tab = target.closest('.tab[data-href]')
+  if (!tab || tab !== target) {
+    return
+  }
+
+  const launched = launchTab(tab)
+  if (launched) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+})
+
+window.addEventListener('message', (event) => {
+  const data = event.data
+  if (!data || typeof data !== 'object') {
+    return
+  }
+
+  let session = null
+
+  if (typeof data.session === 'string') {
+    session = data.session
+  }
+
+  if (!session && typeof data.id === 'string') {
+    session = extractSession(data.id)
+  }
+
+  if (!session && data.data && typeof data.data.id === 'string') {
+    session = extractSession(data.data.id)
+  }
+
+  if (!session && data.launch && typeof data.launch.href === 'string') {
+    session = extractSession(data.launch.href)
+  }
+
+  if (!session && typeof data.href === 'string') {
+    session = extractSession(data.href)
+  }
+
+  if (session && pendingLaunchTabs.has(session)) {
+    const tab = pendingLaunchTabs.get(session)
+    pendingLaunchTabs.delete(session)
+    setTabLaunchState(tab, 'idle')
+    return
+  }
+
+  if (data.type === 'start' || data.type === 'result' || data.type === 'error' || data.type === 'disconnect') {
+    pendingLaunchTabs.forEach((tab) => {
+      setTabLaunchState(tab, 'idle')
+    })
+    pendingLaunchTabs.clear()
   }
 })
 </script>

package/server/views/download.ejs

@@ -70,7 +70,7 @@ body.frozen {
 }
 .item .title {
   text-decoration: none;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 .item .col {
   padding: 10px;

package/server/views/editor.ejs

@@ -116,7 +116,7 @@ header .runner {
   padding: 10px 0 0;
 }
 #del-bin {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   cursor: pointer;
   font-weight: bold;
   padding: 0 5px;
@@ -671,7 +671,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         })
         let config = {
           scrollback: 9999999,
-          fontSize: 14,
+          fontSize: 12,
           theme,
         }
         let res = await fetch("/xterm_config").then((res) => {

package/server/views/env_editor.ejs

@@ -117,7 +117,7 @@ body.dark .env-item label {
   color: cornflowerblue;
 }
 .env-item label {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   display: block;
   margin-bottom: 5px;
   font-weight: bold;
@@ -143,7 +143,7 @@ body.dark .comment {
   padding-left: 10px;
 }
 #save {
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
 }
 a#customize {
   text-decoration: underline;
@@ -227,7 +227,7 @@ footer .btn.go-home {
 }
 .warning a {
   text-decoration: none;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 </style>
 <script>

package/server/views/explore.ejs

@@ -58,7 +58,7 @@ body {
   text-decoration: none;
   font-weight: bold;
   font-size: 16px;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 .item .col {
   padding: 0 10px;
@@ -84,7 +84,7 @@ body {
 /*
   border: 3px solid black;
   */
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
 }
 .selectors .selector {
   color: white;

package/server/views/file_explorer.ejs

@@ -106,12 +106,12 @@ header .runner {
   margin-top: 5px;
 }
 a.badge {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   text-decoration: none;
   cursor: pointer;
 }
 .badge a {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   text-decoration: none;
 }
 body.dark .btn {
@@ -196,7 +196,7 @@ body.dark .browser-options-row {
     <% if (dep.downloaded) { %>
       <div class='item'><i class="fa-solid fa-check"></i> <a class='downloaded' href="<%=dep.downloaded%>" target="_blank"><%=dep.uri%></a><div class='flexible'></div></div>
     <% } else { %>
-      <div class='item'><a class='btn' href="/?mode=download&uri=<%=dep.uri%>" target="_blank"><i class="fa-solid fa-download"></i> Download</a> <%=dep.uri%><div class='flexible'></div></div>
+      <div class='item'><a class='btn' href="/home?mode=download&uri=<%=dep.uri%>" target="_blank"><i class="fa-solid fa-download"></i> Download</a> <%=dep.uri%><div class='flexible'></div></div>
     <% } %>
   <% }) %>
   </div>

package/server/views/git.ejs

@@ -33,7 +33,7 @@ body {
 }
 .changes .diffs .btn {
   margin-left: 5px !important;
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
 }
 aside {
   width: 200px;
@@ -76,7 +76,7 @@ aside .item, .log .item {
 .item .switch {
   padding: 5px 10px;
   margin: 10px 0 0px;
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
   display: block;
   text-align: center;
 }
@@ -106,12 +106,12 @@ nav {
   background: rgba(0,0,0,0.04);
 }
 body.dark nav a.btn, nav a.btn {
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
   padding: 5px 10px;
 }
 nav a {
   display: block;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   text-decoration: none;
 }
 label {
@@ -266,7 +266,7 @@ body.dark .chunk {
   height: 100%;
 }
 .chunk.selected, body.dark .chunk.selected {
-  border: 3px solid royalblue; 
+  border: 3px solid rgba(127, 91, 243, 0.9);
 }
 
 .add    { background: #e6ffed; color: green; }
@@ -398,7 +398,7 @@ body.dark .branches .label {
   align-items: center;
 }
 .branches .btn {
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
   padding: 2px 10px;
 }
 .branches .btn i {
@@ -464,7 +464,7 @@ body.dark .change-count {
   box-sizing: border-box;
   width: 100%;
   margin: 0;
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
 }
 
 </style>

package/server/views/github.ejs

@@ -79,7 +79,7 @@ body {
 }
 .item .title {
   text-decoration: none;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 .item .col {
   padding: 10px;
@@ -174,7 +174,7 @@ body.dark .card {
   margin: 20px;
 }
 .card:hover {
-  color: royalblue !important;
+  color: rgba(127, 91, 243, 0.9) !important;
 }
 .card .desc {
   opacity: 0.7;
@@ -187,7 +187,7 @@ body.dark .card {
   font-size: 50px;
 }
 a {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 body.dark hr {
   background: rgba(255,255,255,0.05);

package/server/views/help.ejs

@@ -124,7 +124,7 @@ body.dark .item select {
 }
 .item .title {
   text-decoration: none;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 .item .col {
   padding: 10px;
@@ -201,7 +201,7 @@ hr {
   margin-top: 10px;
 }
 a.link {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 .item .tile h2 {
   margin: 0;