pinokiod 5.1.10 → 5.1.11

package/server/public/create-launcher.js

@@ -364,6 +364,106 @@
     return { syncTemplateFields, getTemplateValues, setTemplateValues };
   }
 
+  function buildAttachmentSection() {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'create-launcher-upload';
+
+    const label = document.createElement('div');
+    label.className = 'create-launcher-upload-label';
+    label.textContent = 'Attach files (optional)';
+
+    const dropzone = document.createElement('div');
+    dropzone.className = 'create-launcher-upload-dropzone';
+    dropzone.textContent = 'Drag and drop files here, or click to select';
+
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = true;
+    input.style.display = 'none';
+
+    const list = document.createElement('ul');
+    list.className = 'create-launcher-upload-list';
+
+    let files = [];
+
+    function updateList() {
+      list.innerHTML = '';
+      if (!files.length) {
+        const empty = document.createElement('li');
+        empty.className = 'create-launcher-upload-empty';
+        empty.textContent = 'No files selected';
+        list.appendChild(empty);
+        return;
+      }
+      files.forEach((file, index) => {
+        const item = document.createElement('li');
+        item.className = 'create-launcher-upload-item';
+        const name = document.createElement('span');
+        name.className = 'create-launcher-upload-name';
+        name.textContent = file.name;
+        const size = document.createElement('span');
+        size.className = 'create-launcher-upload-size';
+        size.textContent = `${Math.max(1, Math.ceil(file.size / 1024))} KB`;
+        const remove = document.createElement('button');
+        remove.type = 'button';
+        remove.className = 'create-launcher-upload-remove';
+        remove.textContent = 'Remove';
+        remove.addEventListener('click', () => {
+          files = files.filter((_, i) => i !== index);
+          updateList();
+        });
+        item.appendChild(name);
+        item.appendChild(size);
+        item.appendChild(remove);
+        list.appendChild(item);
+      });
+    }
+
+    function addFiles(fileList) {
+      const incoming = Array.from(fileList || []);
+      if (incoming.length) {
+        files = files.concat(incoming);
+        updateList();
+      }
+    }
+
+    dropzone.addEventListener('click', () => input.click());
+    dropzone.addEventListener('dragover', (event) => {
+      event.preventDefault();
+      dropzone.classList.add('dragover');
+    });
+    dropzone.addEventListener('dragleave', () => {
+      dropzone.classList.remove('dragover');
+    });
+    dropzone.addEventListener('drop', (event) => {
+      event.preventDefault();
+      dropzone.classList.remove('dragover');
+      addFiles(event.dataTransfer ? event.dataTransfer.files : []);
+    });
+    input.addEventListener('change', (event) => {
+      addFiles(event.target.files);
+      input.value = '';
+    });
+
+    updateList();
+
+    wrapper.appendChild(label);
+    wrapper.appendChild(dropzone);
+    wrapper.appendChild(list);
+    wrapper.appendChild(input);
+
+    return {
+      wrapper,
+      getFiles() {
+        return files.slice();
+      },
+      clear() {
+        files = [];
+        updateList();
+      }
+    };
+  }
+
   function buildCreateLauncherUI({ mode = 'modal', tools }) {
     const isPage = mode === 'page';
     const overlay = isPage ? null : document.createElement('div');
@@ -453,6 +553,8 @@
     folderInput.className = 'create-launcher-modal-input';
     folderLabel.appendChild(folderInput);
 
+    const attachments = buildAttachmentSection();
+
     const { wrapper: toolWrapper, toolEntries } = buildToolOptions(tools);
 
     const error = document.createElement('div');
@@ -495,6 +597,7 @@
     container.appendChild(promptLabel);
     container.appendChild(templateWrapper);
     container.appendChild(folderLabel);
+    container.appendChild(attachments.wrapper);
     container.appendChild(toolWrapper);
     container.appendChild(error);
     container.appendChild(actions);
@@ -539,6 +642,7 @@
       advancedLink,
       bookmarkletLink,
       linkRow,
+      attachments,
       currentVariant: MODAL_VARIANTS.CREATE,
       projectName: '',
       resetFolderTracking() {
@@ -570,6 +674,9 @@
     if (ui.folderLabel) {
       ui.folderLabel.style.display = isAsk ? 'none' : '';
     }
+    if (ui.attachments && ui.attachments.wrapper) {
+      ui.attachments.wrapper.style.display = isAsk ? 'none' : '';
+    }
     if (ui.linkRow) {
       ui.linkRow.style.display = isAsk ? 'none' : '';
     }
@@ -624,6 +731,31 @@
     return ui && ui.templateManager ? ui.templateManager.getTemplateValues() : new Map();
   }
 
+  async function uploadAttachments(ui, files) {
+    if (!files || !files.length) {
+      return null;
+    }
+    const formData = new FormData();
+    files.forEach((file) => {
+      if (file) {
+        formData.append('files', file, file.name || 'file');
+      }
+    });
+    const response = await fetch('/create-upload', {
+      method: 'POST',
+      body: formData
+    });
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(text || 'Failed to upload files.');
+    }
+    const data = await response.json();
+    if (data && data.error) {
+      throw new Error(data.error);
+    }
+    return data;
+  }
+
   async function submitFromUi(ui) {
     if (!ui) return;
     ui.error.textContent = '';
@@ -639,6 +771,10 @@
       : null
     const selectedTool = selectedEntry && selectedEntry.input ? selectedEntry.input.value : ''
     const selectedHref = selectedEntry && selectedEntry.input ? selectedEntry.input.dataset.agentHref : ''
+    const selectedFiles = ui.attachments && typeof ui.attachments.getFiles === 'function'
+      ? ui.attachments.getFiles()
+      : [];
+    let uploadToken = '';
 
     if (!selectedEntry || !selectedHref) {
       ui.error.textContent = 'Please select an agent.';
@@ -682,6 +818,18 @@
       finalPrompt = applyTemplateValues(rawPrompt, templateValues);
     }
 
+    if (selectedFiles.length > 0) {
+      try {
+        const uploadResult = await uploadAttachments(ui, selectedFiles);
+        if (uploadResult && uploadResult.uploadToken) {
+          uploadToken = uploadResult.uploadToken;
+        }
+      } catch (uploadError) {
+        ui.error.textContent = uploadError.message || 'Failed to upload files.';
+        return;
+      }
+    }
+
     const prompt = finalPrompt.trim();
 
     if (isAskVariant) {
@@ -701,6 +849,9 @@
     if (selectedTool) {
       params.set('tool', selectedTool);
     }
+    if (uploadToken) {
+      params.set('uploadToken', uploadToken);
+    }
 
     window.location.href = `/pro?${params.toString()}`;
   }
@@ -719,7 +870,9 @@
 
       document.body.appendChild(ui.overlay);
 
-      ui.confirmButton.addEventListener('click', () => submitFromUi(ui));
+      ui.confirmButton.addEventListener('click', () => {
+        submitFromUi(ui);
+      });
       if (ui.cancelButton) {
         ui.cancelButton.addEventListener('click', hideModal);
       }
@@ -791,7 +944,9 @@
     root.innerHTML = '';
     root.appendChild(ui.container);
 
-    ui.confirmButton.addEventListener('click', () => submitFromUi(ui));
+    ui.confirmButton.addEventListener('click', () => {
+      submitFromUi(ui);
+    });
 
     applyDefaultsToUi(ui, defaults);
     ui.templateManager.syncTemplateFields(ui.promptTextarea.value, defaults.templateValues || {});

package/server/public/install.js

@@ -1,4 +1,4 @@
-const installname = async (url, name) => {
+const installname = async (url, name, options) => {
   if (url.startsWith("http")) {
     let urlChunks = new URL(url).pathname.split("/")
     let defaultName = urlChunks[urlChunks.length-1]
@@ -13,6 +13,7 @@ const installname = async (url, name) => {
   //    showCancelButton: true,
       confirmButtonText: 'Download',
       allowOutsideClick: false,
+      showLoaderOnConfirm: true,
       didOpen: () => {
         let input = Swal.getPopup().querySelector('#swal-input1')
         if (name) {
@@ -21,16 +22,31 @@ const installname = async (url, name) => {
           input.value = defaultName;
         }
         input.addEventListener("keypress", (e) => {
-          if (event.key === "Enter") {
+          if (e.key === "Enter") {
             e.preventDefault()
             e.stopPropagation()
             Swal.clickConfirm()
           }
         })
       },
-      preConfirm: () => {
-        const name = Swal.getPopup().querySelector('#swal-input1').value;
-        return name
+      preConfirm: async () => {
+        const folderName = (Swal.getPopup().querySelector("#swal-input1").value || "").trim()
+        const validationError = validateInstallFolderName(folderName)
+        if (validationError) {
+          Swal.showValidationMessage(validationError)
+          return false
+        }
+        try {
+          const exists = await checkInstallDestinationExists(folderName, options)
+          if (exists) {
+            Swal.showValidationMessage("Folder already exists. Choose a different name.")
+            return false
+          }
+        } catch (error) {
+          Swal.showValidationMessage(error && error.message ? error.message : "Could not check destination folder")
+          return false
+        }
+        return folderName
       }
     })
     return result.value
@@ -64,53 +80,130 @@ const normalizeInstallPath = (rawPath) => {
   return segments.join('/')
 }
 
+const validateInstallFolderName = (folderName) => {
+  if (!folderName) {
+    return "Name is required"
+  }
+  if (folderName === "." || folderName === "..") {
+    return "Invalid name"
+  }
+  if (/[\\/]/.test(folderName)) {
+    return "Name cannot include / or \\\\"
+  }
+  if (folderName.includes("\0")) {
+    return "Invalid name"
+  }
+  return null
+}
+
+const checkInstallDestinationExists = async (folderName, options) => {
+  const normalizedPath = options && options.path ? normalizeInstallPath(options.path) : null
+  const relativePath = normalizedPath || DEFAULT_INSTALL_RELATIVE_PATH
+  const response = await fetch("/pinokio/install/exists", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      relativePath,
+      folderName
+    })
+  })
+  const payload = await response.json().catch(() => ({}))
+  if (!response.ok) {
+    const message = payload && payload.error ? payload.error : `Failed to check destination folder (${response.status})`
+    throw new Error(message)
+  }
+  return payload && payload.exists === true
+}
+
 const install = async (name, url, term, socket, options) => {
   console.log("options", options)
   const n = new N()
   const normalizedPath = options && options.path ? normalizeInstallPath(options.path) : null
   const targetPath = normalizedPath ? `~/${normalizedPath}` : `~/${DEFAULT_INSTALL_RELATIVE_PATH}`
 
-  await new Promise((resolve, reject) => {
-    socket.close()
-
-    // normalize git url to the standard .git format
-    let branch
-    if (options && options.branch) {
-      branch = options.branch
+  try {
+    const exists = await checkInstallDestinationExists(name, options)
+    if (exists) {
+      n.Noty({
+        text: "Folder already exists. Choose a different name.",
+        timeout: 6000
+      })
+      return
     }
+  } catch (error) {
+    n.Noty({
+      text: error && error.message ? error.message : "Could not verify destination folder",
+      timeout: 6000
+    })
+    return
+  }
 
-    if (!url.endsWith(".git")) {
-      url = url + ".git"
-    }
+  try {
+    await new Promise((resolve, reject) => {
+      let settled = false
+      const settle = (fn, value) => {
+        if (settled) return
+        settled = true
+        fn(value)
+      }
+      socket.close()
 
-    let cmd
-    if (branch) {
-      cmd = `git clone -b ${branch} ${url} ${name}`
-    } else {
-      cmd = `git clone ${url} ${name}`
-    }
-    socket.run({
-      method: "shell.run",
-      client: {
-        cols: term.cols,
-        rows: term.rows,
-      },
-      params: {
-        message: cmd,
-        path: targetPath
+      // normalize git url to the standard .git format
+      let branch
+      if (options && options.branch) {
+        branch = options.branch
       }
-    }, (packet) => {
-      if (packet.type === 'stream') {
-        term.write(packet.data.raw)
-      } else if (packet.type === "result") {
-        resolve()
-      } else if (packet.type === "error") {
-        n.Noty({
-          text: packet.data
-        })
+
+      if (!url.endsWith(".git")) {
+        url = url + ".git"
+      }
+
+      let cmd
+      if (branch) {
+        cmd = `git clone -b ${branch} ${url} ${name}`
+      } else {
+        cmd = `git clone ${url} ${name}`
       }
+      socket.run({
+        method: "shell.run",
+        client: {
+          cols: term.cols,
+          rows: term.rows,
+        },
+        params: {
+          message: cmd,
+          path: targetPath,
+          on: [{
+            event: "/fatal:/i",
+            break: true
+          }]
+        }
+      }, (packet) => {
+        if (packet.type === 'stream') {
+          term.write(packet.data.raw)
+        } else if (packet.type === "result") {
+          if (packet.data && packet.data.error && packet.data.error.length > 0) {
+            n.Noty({
+              text: "Download failed. See terminal output for details.",
+              timeout: 6000
+            })
+            settle(reject, new Error("shell.run failed"))
+            return
+          }
+          settle(resolve)
+        } else if (packet.type === "error") {
+          n.Noty({
+            text: packet.data
+          })
+          settle(reject, new Error(typeof packet.data === "string" ? packet.data : "shell.run error"))
+        }
+      })
     })
-  })
+  } catch (_) {
+    return
+  }
   /*
     options := {
       html,
@@ -158,7 +251,8 @@ const createTerm = async (_theme) => {
   })
   let config = {
     scrollback: 9999999,
-    fontSize: 12,
+    fontSize: 14,
+    fontFamily: 'monospace',
     theme,
   }
   let res = await fetch("/xterm_config").then((res) => {

package/server/public/style.css

@@ -2106,6 +2106,25 @@ body.dark .swal2-title {
   background: rgba(0,0,0,0.8) !important;
   */
 }
+.swal2-validation-message {
+  margin: 12px 15px 0;
+  padding: 10px 12px;
+  border-radius: 6px;
+  background: rgba(255, 66, 66, 0.12);
+  border: 1px solid rgba(255, 66, 66, 0.18);
+  border-left: 4px solid rgba(255, 66, 66, 0.55);
+  color: rgba(0,0,0,0.85);
+  text-align: left;
+  font-size: 13px;
+  line-height: 1.35;
+  box-sizing: border-box;
+}
+body.dark .swal2-validation-message {
+  background: rgba(255, 66, 66, 0.16);
+  border-color: rgba(255, 66, 66, 0.25);
+  border-left-color: rgba(255, 66, 66, 0.75);
+  color: rgba(255,255,255,0.9);
+}
 .swal2-modal button.swal2-cancel {
   background: none !important;
 }
@@ -2134,6 +2153,12 @@ body.dark .swal2-modal input {
   color: var(--dark-btn-color);
   border: 2px solid rgba(255,255,255,0.1);
 }
+.swal2-modal input.swal2-inputerror {
+  border-color: rgba(255, 66, 66, 0.6);
+}
+body.dark .swal2-modal input.swal2-inputerror {
+  border-color: rgba(255, 66, 66, 0.55);
+}
 .swal2-modal input {
 /*
   background: rgba(0,0,0,0.1) !important;
@@ -2765,7 +2790,7 @@ body.dark .mode-selector .btn2.selected {
 }
 .mode-selector .btn2 {
   display: flex;
-  align-items: center;
+  align-items: stretch;
   flex-direction: row;
   justify-content: center;
   padding: 5px 10px;
@@ -3508,6 +3533,12 @@ body.dark .logs-viewer-output {
 #status-window {
   display: none !important;
 }
+.snapshot-btn-save {
+  background: #7f5bf3 !important;
+}
+.snapshot-footer-actions .btn-primary {
+  background: #7f5bf3 !important;
+}
 
 @media (max-width: 800px) {
   .logs-page {

package/server/public/tab-link-popover.js

@@ -1239,27 +1239,58 @@
     popover.style.visibility = "hidden"
     popover.style.maxHeight = ""
     popover.style.overflowY = ""
-
     const popoverWidth = popover.offsetWidth
     let popoverHeight = popover.offsetHeight
     const viewportPadding = 12
     const dropOffset = 8
 
-    let left = rect.left
-    const top = Math.max(viewportPadding, rect.bottom + dropOffset)
+    const appcanvas = document.querySelector(".appcanvas")
+    const isVerticalLayout = !!(appcanvas && appcanvas.classList.contains("vertical"))
 
-    if (left + popoverWidth > window.innerWidth - viewportPadding) {
-      left = window.innerWidth - popoverWidth - viewportPadding
-    }
-    if (left < viewportPadding) {
-      left = viewportPadding
-    }
+    let left
+    let top
+
+    if (isVerticalLayout) {
+      left = rect.right + dropOffset
+      top = rect.top
+
+      if (left + popoverWidth > window.innerWidth - viewportPadding) {
+        left = window.innerWidth - popoverWidth - viewportPadding
+      }
+      if (left < viewportPadding) {
+        left = viewportPadding
+      }
+
+      const availableHeight = Math.max(0, window.innerHeight - viewportPadding * 2)
+      if (availableHeight > 0 && popoverHeight > availableHeight) {
+        popover.style.maxHeight = `${Math.round(availableHeight)}px`
+        popover.style.overflowY = "auto"
+        popoverHeight = Math.min(availableHeight, popover.offsetHeight)
+      }
 
-    const availableBelow = Math.max(0, window.innerHeight - viewportPadding - top)
-    if (availableBelow > 0 && popoverHeight > availableBelow) {
-      popover.style.maxHeight = `${Math.round(availableBelow)}px`
-      popover.style.overflowY = "auto"
-      popoverHeight = Math.min(availableBelow, popover.offsetHeight)
+      if (top + popoverHeight > window.innerHeight - viewportPadding) {
+        top = window.innerHeight - popoverHeight - viewportPadding
+      }
+      if (top < viewportPadding) {
+        top = viewportPadding
+      }
+    } else {
+      left = rect.left
+      top = Math.max(viewportPadding, rect.bottom + dropOffset)
+
+      if (left + popoverWidth > window.innerWidth - viewportPadding) {
+        left = window.innerWidth - popoverWidth - viewportPadding
+      }
+      if (left < viewportPadding) {
+        left = viewportPadding
+      }
+
+      const availableBelow = Math.max(0, window.innerHeight - viewportPadding - top)
+      if (availableBelow > 0 && popoverHeight > availableBelow) {
+        popover.style.maxHeight = `${Math.round(availableBelow)}px`
+        popover.style.overflowY = "auto"
+        popoverHeight = Math.min(availableBelow, popover.offsetHeight)
+      }
     }
 
     popover.style.left = `${Math.round(left)}px`