pinokiod 3.85.0 → 3.86.0

package/server/public/common.js

@@ -603,4 +603,538 @@ document.addEventListener("DOMContentLoaded", () => {
       }
     })
   }
+
+  let pendingCreateLauncherDefaults = null;
+  let shouldCleanupCreateLauncherQuery = false;
+
+  initCreateLauncherFlow();
+  handleCreateLauncherQueryParams();
+
+  function openPendingCreateLauncherModal() {
+    if (!pendingCreateLauncherDefaults) return;
+    showCreateLauncherModal(pendingCreateLauncherDefaults);
+    pendingCreateLauncherDefaults = null;
+
+    if (!shouldCleanupCreateLauncherQuery) return;
+    shouldCleanupCreateLauncherQuery = false;
+
+    try {
+      const url = new URL(window.location.href);
+      Array.from(url.searchParams.keys()).forEach((key) => {
+        if (
+          key === 'create' ||
+          key === 'prompt' ||
+          key === 'folder' ||
+          key === 'tool' ||
+          key.startsWith('template.') ||
+          key.startsWith('template_')
+        ) {
+          url.searchParams.delete(key);
+        }
+      });
+      window.history.replaceState(null, '', `${url.pathname}${url.search}${url.hash}`);
+    } catch (error) {
+      console.warn('Failed to update history for create launcher params', error);
+    }
+  }
+
+  let createLauncherModalInstance = null;
+  let createLauncherKeydownHandler = null;
+
+  function initCreateLauncherFlow() {
+    const trigger = document.getElementById('create-launcher-button');
+    if (!trigger) return;
+    if (trigger.dataset.createLauncherInit === 'true') return;
+    trigger.dataset.createLauncherInit = 'true';
+
+    trigger.addEventListener('click', () => {
+      showCreateLauncherModal();
+    });
+
+    // If we already captured query params that request the modal, open it now that the
+    // trigger has been initialised and the modal can be constructed.
+    requestAnimationFrame(openPendingCreateLauncherModal);
+  }
+
+  function ensureCreateLauncherModal() {
+    if (createLauncherModalInstance) {
+      return createLauncherModalInstance;
+    }
+
+    const overlay = document.createElement('div');
+    overlay.className = 'create-launcher-modal-overlay';
+    overlay.style.display = 'none';
+
+    const modal = document.createElement('div');
+    modal.className = 'create-launcher-modal';
+
+    const header = document.createElement('div');
+    header.className = 'create-launcher-modal-header';
+
+    const iconWrapper = document.createElement('div');
+    iconWrapper.className = 'create-launcher-modal-icon';
+
+    const headerIcon = document.createElement('i');
+    //headerIcon.className = 'fa-solid fa-magnifying-glass';
+    headerIcon.className = 'fa-solid fa-wand-magic-sparkles'
+    iconWrapper.appendChild(headerIcon);
+
+    const headingStack = document.createElement('div');
+    headingStack.className = 'create-launcher-modal-headings';
+
+    const title = document.createElement('h3');
+    title.textContent = 'Create';
+
+    const description = document.createElement('p');
+    description.className = 'create-launcher-modal-description';
+    description.textContent = 'Create a reusable and shareable launcher for any task or any app'
+
+    headingStack.appendChild(title);
+    headingStack.appendChild(description);
+    header.appendChild(iconWrapper);
+    header.appendChild(headingStack);
+
+    const promptLabel = document.createElement('label');
+    promptLabel.className = 'create-launcher-modal-label';
+    promptLabel.textContent = 'What do you want to do?';
+
+    const promptTextarea = document.createElement('textarea');
+    promptTextarea.className = 'create-launcher-modal-textarea';
+    promptTextarea.placeholder = 'Examples: "a 1-click launcher for ComfyUI", "I want to change file format", "I want to clone a website to run locally", etc.';
+    promptLabel.appendChild(promptTextarea);
+
+    const templateWrapper = document.createElement('div');
+    templateWrapper.className = 'create-launcher-modal-template';
+    templateWrapper.style.display = 'none';
+
+    const templateTitle = document.createElement('div');
+    templateTitle.className = 'create-launcher-modal-template-title';
+    templateTitle.textContent = 'Template variables';
+
+    const templateDescription = document.createElement('p');
+    templateDescription.className = 'create-launcher-modal-template-description';
+    templateDescription.textContent = 'Fill in each variable below before creating your launcher.';
+
+    const templateFields = document.createElement('div');
+    templateFields.className = 'create-launcher-modal-template-fields';
+
+    templateWrapper.appendChild(templateTitle);
+    templateWrapper.appendChild(templateDescription);
+    templateWrapper.appendChild(templateFields);
+
+    const folderLabel = document.createElement('label');
+    folderLabel.className = 'create-launcher-modal-label';
+    folderLabel.textContent = 'name';
+
+    const folderInput = document.createElement('input');
+    folderInput.type = 'text';
+    folderInput.placeholder = 'example: my-launcher';
+    folderInput.className = 'create-launcher-modal-input';
+    folderLabel.appendChild(folderInput);
+
+
+    const toolWrapper = document.createElement('div');
+    toolWrapper.className = 'create-launcher-modal-tools';
+
+    const toolTitle = document.createElement('div');
+    toolTitle.className = 'create-launcher-modal-tools-title';
+    toolTitle.textContent = 'Choose AI tool';
+
+    const toolOptions = document.createElement('div');
+    toolOptions.className = 'create-launcher-modal-tools-options';
+
+    const tools = [
+      { value: 'claude', label: 'Claude Code', iconSrc: '/asset/plugin/code/claude/claude.png', defaultChecked: true },
+      { value: 'codex', label: 'OpenAI Codex', iconSrc: '/asset/plugin/code/codex/openai.webp', defaultChecked: false },
+      { value: 'gemini', label: 'Google Gemini CLI', iconSrc: '/asset/plugin/code/gemini/gemini.jpeg', defaultChecked: false }
+    ];
+
+    const toolEntries = [];
+
+    tools.forEach(({ value, label, iconSrc, defaultChecked }) => {
+      const option = document.createElement('label');
+      option.className = 'create-launcher-modal-tool';
+
+      const radio = document.createElement('input');
+      radio.type = 'radio';
+      radio.name = 'create-launcher-tool';
+      radio.value = value;
+      if (defaultChecked) {
+        radio.checked = true;
+      }
+
+      const badge = document.createElement('span');
+      badge.className = 'create-launcher-modal-tool-label';
+      badge.textContent = label;
+
+      option.appendChild(radio);
+      if (iconSrc) {
+        const icon = document.createElement('img');
+        icon.className = 'create-launcher-modal-tool-icon';
+        icon.src = iconSrc;
+        icon.alt = `${label} icon`;
+        icon.onerror = () => { icon.style.display='none'; }
+        option.appendChild(icon);
+      }
+      option.appendChild(badge);
+      toolOptions.appendChild(option);
+      toolEntries.push({ input: radio, container: option });
+      radio.addEventListener('change', () => {
+        updateToolSelections(toolEntries);
+      });
+    });
+
+    toolWrapper.appendChild(toolTitle);
+    toolWrapper.appendChild(toolOptions);
+
+    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 = 'Create';
+
+    actions.appendChild(cancelButton);
+    actions.appendChild(confirmButton);
+
+    const advancedLink = document.createElement('a');
+    advancedLink.className = 'create-launcher-modal-advanced';
+    advancedLink.href = '/init';
+    advancedLink.textContent = 'Or, try advanced options';
+
+    const bookmarkletLink = document.createElement('a');
+    bookmarkletLink.className = 'create-launcher-modal-advanced secondary';
+    bookmarkletLink.href = '/bookmarklet';
+    bookmarkletLink.target = '_blank';
+    bookmarkletLink.setAttribute("features", "browser")
+    bookmarkletLink.rel = 'noopener';
+    bookmarkletLink.textContent = 'Add 1-click bookmarklet';
+
+    const linkRow = document.createElement('div');
+    linkRow.className = 'create-launcher-modal-links';
+    linkRow.appendChild(advancedLink);
+    linkRow.appendChild(bookmarkletLink);
+
+    modal.appendChild(header);
+    modal.appendChild(promptLabel);
+    modal.appendChild(templateWrapper);
+    modal.appendChild(folderLabel);
+    modal.appendChild(toolWrapper);
+    modal.appendChild(error);
+    modal.appendChild(actions);
+    modal.appendChild(linkRow);
+    overlay.appendChild(modal);
+    document.body.appendChild(overlay);
+
+    let folderEditedByUser = false;
+    let templateValues = new Map();
+
+    function syncTemplateFields(promptText, defaults = {}) {
+      const variableNames = extractTemplateVariableNames(promptText);
+      const previousValues = templateValues;
+      const newValues = new Map();
+
+      variableNames.forEach((name) => {
+        if (Object.prototype.hasOwnProperty.call(defaults, name) && defaults[name] !== undefined) {
+          newValues.set(name, defaults[name]);
+        } else if (previousValues.has(name)) {
+          newValues.set(name, previousValues.get(name));
+        } else {
+          newValues.set(name, '');
+        }
+      });
+
+      templateValues = newValues;
+      templateFields.innerHTML = '';
+
+      if (variableNames.length === 0) {
+        templateWrapper.style.display = 'none';
+        return;
+      }
+
+      templateWrapper.style.display = 'flex';
+
+      variableNames.forEach((name) => {
+        const field = document.createElement('label');
+        field.className = 'create-launcher-modal-template-field';
+
+        const labelText = document.createElement('span');
+        labelText.className = 'create-launcher-modal-template-field-label';
+        labelText.textContent = name;
+
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.className = 'create-launcher-modal-template-input';
+        input.placeholder = `Enter ${name}`;
+        input.value = templateValues.get(name) || '';
+        input.dataset.templateInput = name;
+        input.addEventListener('input', () => {
+          templateValues.set(name, input.value);
+        });
+
+        field.appendChild(labelText);
+        field.appendChild(input);
+        templateFields.appendChild(field);
+      });
+    }
+
+    folderInput.addEventListener('input', () => {
+      folderEditedByUser = true;
+    });
+
+    promptTextarea.addEventListener('input', () => {
+      syncTemplateFields(promptTextarea.value);
+      if (folderEditedByUser) return;
+      folderInput.value = generateFolderSuggestion(promptTextarea.value);
+    });
+
+    cancelButton.addEventListener('click', hideCreateLauncherModal);
+    confirmButton.addEventListener('click', submitCreateLauncherModal);
+    overlay.addEventListener('click', (event) => {
+      if (event.target === overlay) {
+        hideCreateLauncherModal();
+      }
+    });
+
+    advancedLink.addEventListener('click', () => {
+      hideCreateLauncherModal();
+    });
+
+    bookmarkletLink.addEventListener('click', () => {
+      hideCreateLauncherModal();
+    });
+
+    createLauncherModalInstance = {
+      overlay,
+      modal,
+      folderInput,
+      promptTextarea,
+      cancelButton,
+      confirmButton,
+      error,
+      toolEntries,
+//      description,
+      resetFolderTracking() {
+        folderEditedByUser = false;
+      },
+      syncTemplateFields,
+      getTemplateValues() {
+        return new Map(templateValues);
+      },
+      templateFields,
+      markFolderEdited() {
+        folderEditedByUser = true;
+      }
+    };
+
+    updateToolSelections(toolEntries);
+
+    return createLauncherModalInstance;
+  }
+
+  function showCreateLauncherModal(defaults = {}) {
+    const modal = ensureCreateLauncherModal();
+
+    modal.error.textContent = '';
+    modal.resetFolderTracking();
+    const { prompt = '', folder = '', tool = '' } = defaults;
+
+    modal.promptTextarea.value = prompt;
+    if (folder) {
+      modal.folderInput.value = folder;
+      if (typeof modal.markFolderEdited === 'function') {
+        modal.markFolderEdited();
+      }
+    } else if (prompt) {
+      modal.folderInput.value = generateFolderSuggestion(prompt);
+    } else {
+      modal.folderInput.value = '';
+    }
+
+    const matchingToolEntry = modal.toolEntries.find((entry) => entry.input.value === tool);
+    modal.toolEntries.forEach((entry, index) => {
+      entry.input.checked = matchingToolEntry ? entry === matchingToolEntry : index === 0;
+    });
+    updateToolSelections(modal.toolEntries);
+
+    modal.syncTemplateFields(modal.promptTextarea.value, defaults.templateValues || {});
+
+    modal.overlay.style.display = 'flex';
+
+    requestAnimationFrame(() => {
+      //modal.folderInput.focus();
+      modal.folderInput.select();
+      modal.promptTextarea.focus();
+    });
+
+    createLauncherKeydownHandler = (event) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        hideCreateLauncherModal();
+      } else if (event.key === 'Enter' && event.target === modal.folderInput) {
+        event.preventDefault();
+        submitCreateLauncherModal();
+      }
+    };
+
+    document.addEventListener('keydown', createLauncherKeydownHandler, true);
+  }
+
+  function hideCreateLauncherModal() {
+    if (!createLauncherModalInstance) return;
+    createLauncherModalInstance.overlay.style.display = 'none';
+    if (createLauncherKeydownHandler) {
+      document.removeEventListener('keydown', createLauncherKeydownHandler, true);
+      createLauncherKeydownHandler = null;
+    }
+  }
+
+  function submitCreateLauncherModal() {
+    const modal = ensureCreateLauncherModal();
+    modal.error.textContent = '';
+
+    const folderName = modal.folderInput.value.trim();
+    const rawPrompt = modal.promptTextarea.value;
+    const templateValues = modal.getTemplateValues ? modal.getTemplateValues() : new Map();
+    const selectedTool = modal.toolEntries.find((entry) => entry.input.checked)?.input.value || 'claude';
+
+    if (!folderName) {
+      debugger
+      modal.error.textContent = 'Please enter a folder name.';
+      modal.folderInput.focus();
+      return;
+    }
+
+    if (folderName.includes(' ')) {
+      debugger
+      modal.error.textContent = 'Folder names cannot contain spaces.';
+      modal.folderInput.focus();
+      return;
+    }
+
+    let finalPrompt = rawPrompt;
+    if (templateValues.size > 0) {
+      const missingVariables = [];
+      templateValues.forEach((value, name) => {
+        if (!value || value.trim() === '') {
+          missingVariables.push(name);
+        }
+      });
+
+      if (missingVariables.length > 0) {
+        modal.error.textContent = `Please fill in values for: ${missingVariables.join(', ')}`;
+        const targetInput = modal.templateFields?.querySelector(`[data-template-input="${missingVariables[0]}"]`);
+        if (targetInput) {
+          targetInput.focus();
+        } else {
+          modal.promptTextarea.focus();
+        }
+        return;
+      }
+
+      finalPrompt = applyTemplateValues(rawPrompt, templateValues);
+    }
+
+    const prompt = finalPrompt.trim();
+
+    if (!prompt) {
+      debugger
+      modal.error.textContent = 'Please enter a prompt.';
+      modal.promptTextarea.focus();
+      return;
+    }
+
+    const url = `/pro?name=${encodeURIComponent(folderName)}&message=${encodeURIComponent(prompt)}&tool=${encodeURIComponent(selectedTool)}`;
+    hideCreateLauncherModal();
+    window.location.href = url;
+  }
+
+  function handleCreateLauncherQueryParams() {
+    const params = new URLSearchParams(window.location.search);
+    if (!params.has('create')) return;
+
+    const defaults = {};
+    const templateDefaults = {};
+
+    const promptParam = params.get('prompt');
+    if (promptParam) defaults.prompt = promptParam.trim();
+
+    const folderParam = params.get('folder');
+    if (folderParam) defaults.folder = folderParam.trim();
+
+    const toolParam = params.get('tool');
+    if (toolParam) defaults.tool = toolParam.trim();
+
+    params.forEach((value, key) => {
+      if (key.startsWith('template.') || key.startsWith('template_')) {
+        const name = key.replace(/^template[._]/, '');
+        if (name) {
+          templateDefaults[name] = value ? value.trim() : '';
+        }
+      }
+    });
+
+    if (Object.keys(templateDefaults).length > 0) {
+      defaults.templateValues = templateDefaults;
+    }
+
+    pendingCreateLauncherDefaults = defaults;
+    shouldCleanupCreateLauncherQuery = true;
+
+    requestAnimationFrame(openPendingCreateLauncherModal);
+  }
+
+  function generateFolderSuggestion(prompt) {
+    if (!prompt) return '';
+    return prompt
+      .toLowerCase()
+      .replace(/[^a-z0-9\-\s_]/g, '')
+      .replace(/[\s_]+/g, '-')
+      .replace(/^-+|-+$/g, '')
+      .slice(0, 50);
+  }
+
+  function updateToolSelections(entries) {
+    entries.forEach(({ input, container }) => {
+      if (input.checked) {
+        container.classList.add('selected');
+      } else {
+        container.classList.remove('selected');
+      }
+    });
+  }
+
+  function extractTemplateVariableNames(template) {
+    const regex = /{{\s*([a-zA-Z0-9_][a-zA-Z0-9_\-.]*)\s*}}/g;
+    const names = new Set();
+    if (!template) return [];
+    let match;
+    while ((match = regex.exec(template)) !== null) {
+      names.add(match[1]);
+    }
+    return Array.from(names);
+  }
+
+  function escapeRegExp(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+
+  function applyTemplateValues(template, values) {
+    if (!template) return '';
+    let result = template;
+    values.forEach((value, name) => {
+      const pattern = new RegExp(`{{\\s*${escapeRegExp(name)}\\s*}}`, 'g');
+      result = result.replace(pattern, value);
+    });
+    return result;
+  }
 })

package/server/public/opener.js

@@ -6,19 +6,20 @@ const open_url = (href, target, features) => {
       //  - otherwise => open in a regular browser
       if (features && features.includes("pinokio")) {
         window.open(href, "_blank", features)
+      } else if (features && features.includes("browser")) {
+        fetch("/go", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({ url: href })
+        }).then((res) => {
+          return res.json()
+        }).then((res) => {
+          console.log(res)
+        })
       } else {
         window.open(href, "_blank", features)
-        //fetch("/go", {
-        //  method: "POST",
-        //  headers: {
-        //    "Content-Type": "application/json"
-        //  },
-        //  body: JSON.stringify({ url: href })
-        //}).then((res) => {
-        //  return res.json()
-        //}).then((res) => {
-        //  console.log(res)
-        //})
       }
     } else {
       // no target => just move from the same window

package/server/public/serve/style.css

@@ -123,7 +123,7 @@ ul#files li a.highlight {
   border-color: #E9DC51;
   */
   background: aliceblue;
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   font-weight: bold;
 }
 #open {