pinokiod 3.85.0 → 3.86.0

package/server/public/urldropdown.js

@@ -24,6 +24,9 @@ function initUrlDropdown(config = {}) {
   let isDropdownVisible = false;
   let allProcesses = []; // Store all processes for filtering
   let filteredProcesses = []; // Store currently filtered processes
+  let createLauncherModal = null;
+  let pendingCreateDetail = null;
+  const EMPTY_STATE_DESCRIPTION = 'enter a prompt to create a launcher';
 
   // Initialize input field state based on clear behavior
   initializeInputValue();
@@ -272,11 +275,7 @@ function initUrlDropdown(config = {}) {
 
   function populateDropdown(processes) {
     if (processes.length === 0) {
-      const query = urlInput.value.toLowerCase().trim();
-      const message = query 
-        ? `No processes match "${query}"` 
-        : 'No running processes found';
-      dropdown.innerHTML = `<div class="url-dropdown-empty">${message}</div>`;
+      showEmptyState(dropdown, urlInput);
       return;
     }
 
@@ -514,9 +513,7 @@ function initUrlDropdown(config = {}) {
     const modalInput = modalDropdown.parentElement.querySelector('.url-modal-input');
     
     if (processes.length === 0) {
-      const query = modalInput.value.toLowerCase().trim();
-      const message = query ? `No processes match "${query}"` : 'No running processes found';
-      modalDropdown.innerHTML = `<div class="url-dropdown-empty">${message}</div>`;
+      showEmptyState(modalDropdown, modalInput);
       return;
     }
 
@@ -633,6 +630,203 @@ function initUrlDropdown(config = {}) {
       filteredProcesses = [];
     }
   };
+  function showEmptyState(container, inputElement) {
+    container.innerHTML = createEmptyStateHtml(getEmptyStateMessage(inputElement));
+    attachCreateButtonHandler(container, inputElement);
+  }
+
+  function getEmptyStateMessage(inputElement) {
+    const rawValue = inputElement.value.trim();
+    return rawValue ? `No processes match "${rawValue}"` : 'No running processes found';
+  }
+
+  function createEmptyStateHtml(message) {
+    return `
+      <div class="url-dropdown-empty">
+        <div class="url-dropdown-empty-message">${escapeHtml(message)}</div>
+        <div class="url-dropdown-empty-actions">
+          <button type="button" class="url-dropdown-create-button">Create</button>
+          <div class="url-dropdown-empty-description">${escapeHtml(EMPTY_STATE_DESCRIPTION)}</div>
+        </div>
+      </div>
+    `;
+  }
+
+  function attachCreateButtonHandler(container, inputElement) {
+    const createButton = container.querySelector('.url-dropdown-create-button');
+    if (!createButton) return;
+
+    createButton.addEventListener('click', function(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      const prompt = inputElement.value.trim();
+      const detail = {
+        query: prompt,
+        prompt,
+        input: inputElement,
+        dropdown: container,
+        context: inputElement === urlInput ? 'dropdown' : 'modal'
+      };
+
+      if (detail.context === 'dropdown') {
+        hideDropdown();
+      } else {
+        closeMobileModal();
+      }
+
+      showCreateLauncherModal(detail);
+
+      if (typeof options.onCreate === 'function') {
+        options.onCreate(detail);
+      }
+
+      if (typeof CustomEvent === 'function') {
+        container.dispatchEvent(new CustomEvent('urlDropdownCreate', { detail }));
+      }
+    });
+  }
+
+  function showCreateLauncherModal(detail) {
+    const modal = getCreateLauncherModal();
+    pendingCreateDetail = detail;
+
+    modal.error.textContent = '';
+    modal.overlay.style.display = 'flex';
+
+//    const defaultName = generateFolderName(detail.prompt);
+    modal.input.value = "";
+    modal.description.textContent = detail.prompt
+      ? `Prompt: ${detail.prompt}`
+      : 'Enter a prompt in the search bar to describe your launcher.';
+    modal.input.focus();
+    modal.input.select();
+    document.addEventListener('keydown', handleCreateModalEscape, true);
+  }
+
+  function hideCreateLauncherModal() {
+    const modal = createLauncherModal;
+    if (!modal) return;
+    modal.overlay.style.display = 'none';
+    pendingCreateDetail = null;
+    document.removeEventListener('keydown', handleCreateModalEscape, true);
+  }
+
+  function confirmCreateLauncherModal() {
+    if (!createLauncherModal || !pendingCreateDetail) return;
+    const folderName = createLauncherModal.input.value.trim();
+    if (!folderName) {
+      createLauncherModal.error.textContent = 'Please enter a folder name.';
+      createLauncherModal.input.focus();
+      return;
+    }
+
+    const prompt = pendingCreateDetail.prompt || '';
+    const redirectUrl = `/pro?name=${encodeURIComponent(folderName)}&message=${encodeURIComponent(prompt)}`;
+    hideCreateLauncherModal();
+    window.location.href = redirectUrl;
+  }
+
+  function handleCreateModalKeydown(event) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      confirmCreateLauncherModal();
+    }
+  }
+
+  function handleCreateModalEscape(event) {
+    if (event.key === 'Escape' && pendingCreateDetail) {
+      event.preventDefault();
+      hideCreateLauncherModal();
+    }
+  }
+
+  function getCreateLauncherModal() {
+    if (createLauncherModal) {
+      return createLauncherModal;
+    }
+
+    const overlay = document.createElement('div');
+    overlay.className = 'create-launcher-modal-overlay';
+    overlay.style.display = 'none';
+
+    const modalContent = document.createElement('div');
+    modalContent.className = 'create-launcher-modal';
+
+    const title = document.createElement('h3');
+    title.textContent = 'Create';
+
+    const description = document.createElement('p');
+    description.className = 'create-launcher-modal-description';
+    description.textContent = 'Enter a prompt in the search bar to describe your launcher.';
+
+    const label = document.createElement('label');
+    label.className = 'create-launcher-modal-label';
+    label.textContent = 'Folder name';
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.className = 'create-launcher-modal-input';
+    input.placeholder = 'example: my-launcher';
+
+    const error = document.createElement('div');
+    error.className = 'create-launcher-modal-error';
+
+    const actions = document.createElement('div');
+    actions.className = 'create-launcher-modal-actions';
+
+    const cancelButton = document.createElement('button');
+    cancelButton.type = 'button';
+    cancelButton.className = 'create-launcher-modal-button cancel';
+    cancelButton.textContent = 'Cancel';
+
+    const confirmButton = document.createElement('button');
+    confirmButton.type = 'button';
+    confirmButton.className = 'create-launcher-modal-button confirm';
+    confirmButton.textContent = 'OK';
+
+    actions.appendChild(cancelButton);
+    actions.appendChild(confirmButton);
+
+    label.appendChild(input);
+    modalContent.appendChild(title);
+    modalContent.appendChild(description);
+    modalContent.appendChild(label);
+    modalContent.appendChild(error);
+    modalContent.appendChild(actions);
+    overlay.appendChild(modalContent);
+    document.body.appendChild(overlay);
+
+    overlay.addEventListener('click', function(event) {
+      if (event.target === overlay) {
+        hideCreateLauncherModal();
+      }
+    });
+
+    cancelButton.addEventListener('click', hideCreateLauncherModal);
+    confirmButton.addEventListener('click', confirmCreateLauncherModal);
+    input.addEventListener('keydown', handleCreateModalKeydown);
+
+    createLauncherModal = {
+      overlay,
+      modal: modalContent,
+      input,
+      cancelButton,
+      confirmButton,
+      error,
+      description
+    };
+
+    return createLauncherModal;
+  }
+
+  function generateFolderName(prompt) {
+    if (!prompt) return '';
+    const normalized = prompt
+      .toLowerCase()
+      .replace(/[^a-z0-9\-\s_]/g, '')
+      .replace(/[\s_]+/g, '-');
+    return normalized.replace(/^-+|-+$/g, '').slice(0, 50);
+  }
 }
 
 // Auto-initialize if DOM is already loaded, otherwise wait for it

package/server/views/404.ejs

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

package/server/views/500.ejs

@@ -6,7 +6,7 @@
 body.error-body  {
   width: 100%;
   margin: 0;
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
   color: white;
   padding: 50px;
   box-sizing: border-box;

package/server/views/app.ejs

@@ -422,7 +422,7 @@ body .frame-link.selected {
 /*
   background: rgba(0,0,0,0.06) !important;
   */
-  background: royalblue !important;
+  background: rgba(127, 91, 243, 0.9) !important;
   color: white !important;
 }
 .frame-link.selected .del {
@@ -442,8 +442,8 @@ body.dark .frame-link.selected {
   flex-shrink: 0;
 }
 .loader .btn:hover {
-  color: royalblue;
-  border-color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
+  border-color: rgba(127, 91, 243, 0.9);
 }
 .loader .btn {
   padding: 4px 8px;
@@ -648,7 +648,7 @@ nav .logo {
 .error-message {
   width: 100%;
   /*
-  background: royalblue !important;
+  background: rgba(127, 91, 243, 0.9) !important;
   */
   color: white;
   display: flex;
@@ -792,15 +792,11 @@ body.dark .submenu {
   overflow: auto;
   display: flex;
   flex-grow: 1;
-  /*
   border-top: 1px solid rgba(0, 0,0 ,0.04);
-  */
 }
-/*
 body.dark .appcanvas {
   border-top: 1px solid rgba(255,255,255,0.04);
 }
-*/
 .filler {
   display: none;
 }
@@ -841,10 +837,12 @@ body.dark .top-menu .btn2.selected {
 }
 
 body.dark #fs-status {
-  background: rgba(255,255,255,0.04);
+  border-bottom: 1px solid rgba(255,255,255,0.04);
 }
 #fs-status {
+/*
   background: rgba(0,0,0,0.04);
+  */
   gap: 5px;
   box-sizing: border-box;
   /*
@@ -856,7 +854,8 @@ body.dark #fs-status {
   /*
   border-radius: 6px;
   */
-  justify-content: flex-end;
+  justify-content: flex-start;
+  border-bottom: 1px solid rgba(0,0,0,0.04);
 }
 
 .fs-status-btn {
@@ -1185,7 +1184,7 @@ body.dark .pinokio-commit-message-input:focus {
 }
 
 .pinokio-save-version-btn {
-  background: #1f883d !important;
+  background: rgba(127, 91, 243, 0.9) !important;
   color: white !important;
   border: 1px solid rgba(31, 35, 40, 0.15) !important;
   border-radius: 6px !important;
@@ -1865,7 +1864,10 @@ body.minimized #fs-status {
     </div>
     <div class='menu-container'>
       <div class='m n system' data-type="n">
+        <a target="<%=src%>" href="<%=src%>" class='btn header-item frame-link' data-index="0" data-mode="refresh">
+        <!--
         <a id='file-browse' target="file-browse" href="<%=asset%>" class='btn header-item frame-link' data-index="0">
+        -->
           <div class='tab'>
             <i class="fa-regular fa-folder-open"></i> Files
           </div>
@@ -1903,20 +1905,6 @@ body.minimized #fs-status {
               <%- include('./partials/dynamic', { dynamic: plugin_menu, }) %>
             <% } %>
           </div>
-          <% if (false) { %>
-            <% if (type !== "run") { %>
-              <% if (plugin_menu) { %>
-                <%- include('./partials/dynamic', { dynamic: plugin_menu, }) %>
-              <% } else { %>
-                <div class="nested-menu">
-                  <div class="btn header-item frame-link selected">
-                    <div class="tab"><i class="fa-solid fa-code"></i> Dev</div>
-                    <div class="loader"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
-                  </div>
-                </div>
-              <% } %>
-            <% } %>
-          <% } %>
         </div>
         <% if (type === "browse") { %>
           <div class='nested-menu selected git blue'>
@@ -3050,7 +3038,7 @@ body.minimized #fs-status {
   const try_dynamic = async () => {
     let rendered
     let status
-    const dynamic = await fetch("<%=dynamic%>").then((res) => {
+    const dynamic = await fetch("<%-dynamic%>").then((res) => {
       status = res.status
       return res.text()
     })
@@ -3065,10 +3053,16 @@ body.minimized #fs-status {
       })
       return
     }
+    console.log("DYNAMIC", dynamic)
     if (dynamic && dynamic.length > 0) {
       if (document.querySelector(".dynamic .submenu")) {
         document.querySelector(".dynamic .submenu").innerHTML = dynamic
       }
+      let default_selection = document.querySelector(".dynamic .submenu [data-default]")
+      if (default_selection) {
+        console.log("CLICK default")
+        default_selection.click()
+      }
       rendered = true
     } else {
       rendered = false
@@ -3235,8 +3229,9 @@ body.minimized #fs-status {
   if (selection_url) {
     selection = document.querySelector(`[href='${selection_url}']`)
   } else {
-    selection = document.querySelector("#devtab")
+//    selection = document.querySelector("#devtab")
   }
+  console.log("Selection", selection)
   if (selection) {
 //    setTimeout(() => {
       selection.click()
@@ -4062,15 +4057,16 @@ body.minimized #fs-status {
       let selected_tab = document.querySelector("aside .frame-link.selected")
       let needs_selection
       if (selected_tab) {
-        if (selected_tab.target === foreground_frame.name) {
-          needs_selection = false
+        if (foreground_frame) {
+          if (selected_tab.target === foreground_frame.name) {
+            // do nothing
+          } else {
+            selected_tab.click()
+          }
         } else {
-          needs_selection = true
+          selected_tab.click()
         }
       } else {
-        needs_selection = true
-      }
-      if (needs_selection) {
         let selection_tab = document.querySelector(`aside .frame-link[target="${foreground_frame.name}"]`)
         selection_tab.click()
       }

package/server/views/bookmarklet.ejs

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Pinokio Create Bookmarklet</title>
+  <style>
+    :root {
+      color-scheme: light dark;
+      font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      line-height: 1.55;
+    }
+    body {
+      margin: 0;
+      padding: 24px 18px 48px;
+      background: rgba(248, 250, 255, 0.92);
+      color: #0f172a;
+    }
+    body.dark {
+      background: #0f172a;
+      color: rgba(226, 232, 240, 0.96);
+    }
+    .page {
+      max-width: 720px;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      background: rgba(255, 255, 255, 0.88);
+      border-radius: 20px;
+      padding: 32px 36px;
+      box-shadow: 0 40px 100px rgba(15, 23, 42, 0.25);
+    }
+    body.dark .page {
+      background: rgba(17, 24, 39, 0.85);
+      box-shadow: 0 50px 120px rgba(2, 6, 20, 0.65);
+    }
+    h1 {
+      margin: 0;
+      font-size: 28px;
+      letter-spacing: -0.01em;
+    }
+    p {
+      margin: 0;
+    }
+    .bookmarklet-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 12px 18px;
+      border-radius: 999px;
+      font-weight: 600;
+      font-size: 15px;
+      text-decoration: none;
+      color: #fff;
+      background: linear-gradient(135deg, rgba(127, 91, 243, 0.95), rgba(84, 63, 196, 0.95));
+      box-shadow: 0 18px 40px rgba(111, 76, 242, 0.32);
+      cursor: grab;
+    }
+    .bookmarklet-button:active {
+      cursor: grabbing;
+    }
+    .steps {
+      list-style: decimal;
+      margin: 0 0 0 20px;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      font-size: 15px;
+    }
+    .code-block {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    textarea {
+      width: 100%;
+      min-height: 120px;
+      border-radius: 14px;
+      border: 1px solid rgba(148, 163, 184, 0.3);
+      background: rgba(248, 250, 255, 0.7);
+      padding: 14px 16px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      font-size: 14px;
+      color: inherit;
+      resize: vertical;
+    }
+    body.dark textarea {
+      background: rgba(30, 41, 59, 0.6);
+      border-color: rgba(148, 163, 184, 0.35);
+    }
+    button.copy-btn {
+      align-self: flex-start;
+      padding: 10px 16px;
+      border-radius: 999px;
+      border: none;
+      font-weight: 600;
+      font-size: 14px;
+      cursor: pointer;
+      color: #fff;
+      background: rgba(15, 23, 42, 0.85);
+      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
+    }
+    body.dark button.copy-btn {
+      background: rgba(148, 163, 184, 0.85);
+      color: #0f172a;
+      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.45);
+    }
+    small {
+      opacity: 0.75;
+      font-size: 13px;
+    }
+    @media (max-width: 640px) {
+      body {
+        padding: 18px 12px 36px;
+      }
+      .page {
+        padding: 24px;
+        border-radius: 16px;
+      }
+      h1 {
+        font-size: 24px;
+      }
+    }
+  </style>
+</head>
+<body class="<%= theme %>">
+  <main class="page">
+    <header>
+      <h1>Pinokio “Create” Bookmarklet</h1>
+      <p>Drop this bookmarklet onto your bookmarks bar. Clicking it on any site opens Pinokio’s Create modal with that page’s URL pre-filled in the prompt.</p>
+    </header>
+
+    <section>
+      <a class="bookmarklet-button" href="<%- bookmarkletHref %>">Pinokio Create</a>
+      <small>Tip: Drag the button to your bookmarks bar, or right-click → “Add to Favorites/Bookmarks”.</small>
+    </section>
+
+    <section>
+      <ol class="steps">
+        <li>Make sure your bookmarks bar is visible (View → Toolbars → Bookmarks Toolbar, or press <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd>).</li>
+        <li>Drag the “Pinokio Create” button above to the bar.</li>
+        <li>When you are on a page you want to automate, click the bookmark. Pinokio will open at <code><%= baseUrl %>/?create=1</code> with the current page URL in the prompt field.</li>
+      </ol>
+    </section>
+
+    <section class="code-block">
+      <strong>Manual option</strong>
+      <p>If dragging doesn’t work, create a new bookmark manually and paste the code below as the URL.</p>
+      <textarea id="bookmarklet-code" readonly><%- bookmarkletHref %></textarea>
+      <button type="button" class="copy-btn" data-copy>Copy bookmarklet code</button>
+      <small class="copy-status" hidden>Copied!</small>
+    </section>
+  </main>
+
+  <script>
+    (function() {
+      const copyBtn = document.querySelector('[data-copy]');
+      const textarea = document.getElementById('bookmarklet-code');
+      const status = document.querySelector('.copy-status');
+
+      if (!copyBtn || !textarea) {
+        return;
+      }
+
+      copyBtn.addEventListener('click', async () => {
+        const text = textarea.value;
+        try {
+          if (navigator.clipboard && navigator.clipboard.writeText) {
+            await navigator.clipboard.writeText(text);
+          } else {
+            textarea.select();
+            document.execCommand('copy');
+          }
+          if (status) {
+            status.hidden = false;
+            status.textContent = 'Copied!';
+            setTimeout(() => {
+              status.hidden = true;
+            }, 1800);
+          }
+        } catch (error) {
+          if (status) {
+            status.hidden = false;
+            status.textContent = 'Copy failed. Please copy manually.';
+            setTimeout(() => {
+              status.hidden = true;
+              status.textContent = 'Copied!';
+            }, 2600);
+          }
+        }
+      });
+    })();
+  </script>
+</body>
+</html>

package/server/views/connect/x.ejs

@@ -81,7 +81,7 @@ body {
 }
 .item .title {
   text-decoration: none;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 .item .col {
   padding: 10px;
@@ -111,7 +111,7 @@ main {
   width: 100%;
 }
 a {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 body.dark hr {
   background: rgba(255,255,255,0.05);
@@ -135,7 +135,7 @@ td {
 }
 td.key {
   width: 150px;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 .head {
   padding: 30px;
@@ -167,7 +167,7 @@ pre {
   margin: 20px;
 }
 .card:hover {
-  color: royalblue !important;
+  color: rgba(127, 91, 243, 0.9) !important;
 }
 .card .desc {
   opacity: 0.7;