pinokiod 3.271.0 → 3.272.0

package/server/views/shell.ejs

@@ -6,6 +6,7 @@
 <script src="/noty.js"></script>
 <script src="/notyq.js"></script>
 <script src="/xterm.js"></script>
+<script src="/xterm-inline-bridge.js"></script>
 <script src="/xterm-addon-fit.js"></script>
 <script src="/xterm-addon-web-links.js"></script>
 <script src="/xterm-theme.js"></script>
@@ -13,7 +14,10 @@
 <script src="/xterm-addon-search-bar.js"></script>
 <script src="/sweetalert2.js"></script>
 <script src="/Socket.js"></script>
+<script src="/resizeSync.js"></script>
 <script src="/terminal_input_tracker.js"></script>
+<script src="/terminal_input_utils.js"></script>
+<script src="/terminal_key_caption.js"></script>
 <script src="/terminal-settings.js"></script>
 <script src="/pinokio-touch.js"></script>
 <script src="/common.js"></script>
@@ -24,6 +28,7 @@
 -->
 <script src="/autoexpand.js"></script>
 <script src="/modalinput.js"></script>
+<script src="/htmlmodal.js"></script>
 <script src="/simplemodal.js"></script>
 <script src="/waitmodal.js"></script>
 <script src="/notifyinput.js"></script>
@@ -294,11 +299,27 @@ function buildBinaryRpcPayload(rpc, fileEntries) {
   }
   return combined.buffer
 }
+const fallbackPreviewSanitizer = (value) => {
+  if (typeof value !== "string" || value.length === 0) {
+    return ""
+  }
+  return value.replace(/[\x00-\x1F\x7F]/g, "")
+}
+const sanitizePreviewLine = (value) => {
+  const sanitizer = (typeof window !== "undefined" && typeof window.PinokioSanitizePreviewLine === "function")
+    ? window.PinokioSanitizePreviewLine
+    : fallbackPreviewSanitizer
+  return sanitizer(value || "")
+}
 document.addEventListener("DOMContentLoaded", async () => {
   const n = new N()
   class RPC {
     constructor() {
       this.socket = new Socket()
+      this.resizeSync = window.PinokioResizeSync.create({
+        socket: this.socket,
+        getShellId: () => shell_id
+      })
       this.buffer = []
       this.uploadContext = {
         cwd: "~" + location.pathname
@@ -352,7 +373,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         this.inputTracker.submit(line)
         return
       }
-      const safeLine = (line || "").replace(/[\x00-\x1F\x7F]/g, "")
+      const safeLine = sanitizePreviewLine(line || "")
       const preview = safeLine.trim()
       const limit = 200
       const truncated = preview.length > limit ? preview.slice(0, limit) + "..." : preview
@@ -393,6 +414,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         let cwd = "~" + location.pathname
 
         this.socket.close()
+        this.resizeSync.reset()
         this.socket.run({
           method: "fs.write",
           params: {
@@ -498,7 +520,11 @@ document.addEventListener("DOMContentLoaded", async () => {
             refreshParent(packet)
             // set the current shell id
             if (packet.data.id) {
+              const previousShellId = shell_id
               shell_id = packet.data.id
+              if (!previousShellId) {
+                this.resizeSync.sendInitial()
+              }
               notifyShellSession(shell_id)
             }
             if (packet.data.raw) {
@@ -537,6 +563,7 @@ document.addEventListener("DOMContentLoaded", async () => {
             this.socket.close()
             document.querySelector(".play-btn").classList.remove("hidden")
             document.querySelector(".stop-btn").classList.add("hidden")
+            this.resizeSync.reset()
           } else if (packet.type === 'connect') {
             console.log("refreshParent", packet)
             refreshParent(packet)
@@ -545,6 +572,9 @@ document.addEventListener("DOMContentLoaded", async () => {
                 shell_id = packet.data.shell
                 notifyShellSession(shell_id)
               }
+              if (shell_id) {
+                this.resizeSync.sendInitial()
+              }
               if (packet.data.state) {
                 this.write(packet.data.state)
               }
@@ -552,6 +582,8 @@ document.addEventListener("DOMContentLoaded", async () => {
             document.querySelector(".play-btn").classList.add("hidden")
             document.querySelector(".starting-btn").classList.add("hidden")
             document.querySelector(".stop-btn").classList.remove("hidden")
+          } else if (packet.type === 'resize') {
+            this.resizeSync.handleResizePacket(packet)
           } else if (packet.type === 'wait.end') {
             try {
               Swal.close()
@@ -564,6 +596,10 @@ document.addEventListener("DOMContentLoaded", async () => {
             })
           } else if (packet.type === 'wait') {
             await WaitModal(packet.data)
+          } else if (packet.type === "htmlmodal") {
+            if (window.HtmlModal && typeof window.HtmlModal.handle === 'function') {
+              window.HtmlModal.handle(packet, this.socket)
+            }
           } else if (packet.type === "modal") {
             await SimpleModal(packet.data)
             this.socket.respond({
@@ -722,9 +758,13 @@ document.addEventListener("DOMContentLoaded", async () => {
               document.querySelector("#error-screen").classList.add("hidden")
             })
             */
-            instance.mark(packet.event)
-            let element = document.querySelector("mark")
-            element.scrollIntoView({ behavior: "smooth", block: "center" });
+            if (packet.event) {
+              instance.mark(packet.event)
+              let element = document.querySelector("#error-screen mark")
+              if (element) {
+                element.scrollIntoView({ behavior: "smooth", block: "center" })
+              }
+            }
 
             this.stop()
 
@@ -1505,17 +1545,7 @@ document.addEventListener("DOMContentLoaded", async () => {
           }
           if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
             if (!suppressClipboardText) {
-              navigator.clipboard.readText().then((text) => {
-                console.log('[clipboard paste][shell][text]', text)
-                this.socket.run({
-                  //key: "\x1b[200~" + text + "\x1b[201~",
-                  key: text,
-                  id: shell_id,
-                  paste: true
-                })
-                this.captureTextInput(text)
-
-              })
+              return true
             }
             suppressClipboardText = false
             return false
@@ -1529,50 +1559,23 @@ document.addEventListener("DOMContentLoaded", async () => {
         ////term.resize(cols, rows-5);
         //term.resize(cols, rows);
 
-        term.onKey(({ key, domEvent }) => {
+        term.onData((data) => {
           if (this.socket && shell_id) {
             this.socket.run({
-              key,
+              key: data,
               id: shell_id
             })
           }
-          if (!domEvent) {
-            return
-          }
-          if (domEvent.key === "Backspace") {
-            this.handleBackspace()
-            return
-          }
-          if (domEvent.key === "Enter") {
-            this.captureTextInput("\n")
-            return
-          }
-          if (domEvent.key === "Tab") {
-            this.captureTextInput("\t")
-            return
-          }
-          if (domEvent.key === "Escape") {
-            this.resetInputBuffer()
-            return
-          }
-          if (domEvent.ctrlKey || domEvent.metaKey || domEvent.altKey) {
-            if (key === "\u0015" || key === "\u0017" || key === "\u000b" || key === "\u0003" || domEvent.key === "c" || domEvent.key === "C" || domEvent.key === "u" || domEvent.key === "U") {
-              this.resetInputBuffer()
-            }
-            return
-          }
-          if (key === "\u0015" || key === "\u0017" || key === "\u000b") {
-            this.resetInputBuffer()
-            return
-          }
-          if (key === "\u0008") {
-            this.handleBackspace()
-            return
-          }
-          if (typeof key === "string" && key.length === 1 && key >= " ") {
-            this.captureTextInput(key)
+          if (typeof window.processTerminalInputData === "function") {
+            window.processTerminalInputData(data, {
+              capture: (chunk) => this.captureTextInput(chunk),
+              backspace: () => this.handleBackspace(),
+              reset: () => this.resetInputBuffer()
+            })
+          } else {
+            this.captureTextInput(data)
           }
-        });
+        })
 
         const fitAddon = new FitAddon.FitAddon();
 //        const searchAddon = new SearchAddon.SearchAddon();
@@ -1591,24 +1594,14 @@ document.addEventListener("DOMContentLoaded", async () => {
         fitAddon.fit();
         this.term = term
         this.fit = fitAddon
+        this.resizeSync.updateTerm(this.term, this.fit, this.socket)
+        this.tabCaptionHelper = window.PinokioTabCaptionHelper.attach(term, { tracker: this.inputTracker })
 
       }
       this.term.focus()
       this.observer = new ResizeObserver(() => {
         this.fit.fit()
-        console.log(`Resized to ${this.term.cols}x${this.term.rows}`);
-        // Trigger your custom handler here
-        if (this.socket) {
-          if (shell_id) {
-            this.socket.run({
-              resize: {
-                cols: this.term.cols,
-                rows: this.term.rows,
-              },
-              id: shell_id
-            })
-          }
-        }
+        this.resizeSync.sendResize(this.term.cols, this.term.rows)
       });
       this.observer.observe(document.body)
     }

package/server/views/terminal.ejs

@@ -6,6 +6,7 @@
 <script src="/noty.js"></script>
 <script src="/notyq.js"></script>
 <script src="/xterm.js"></script>
+<script src="/xterm-inline-bridge.js"></script>
 <script src="/xterm-addon-fit.js"></script>
 <script src="/xterm-addon-web-links.js"></script>
 <script src="/xterm-theme.js"></script>
@@ -13,7 +14,10 @@
 <script src="/xterm-addon-search-bar.js"></script>
 <script src="/sweetalert2.js"></script>
 <script src="/Socket.js"></script>
+<script src="/resizeSync.js"></script>
 <script src="/terminal_input_tracker.js"></script>
+<script src="/terminal_input_utils.js"></script>
+<script src="/terminal_key_caption.js"></script>
 <script src="/terminal-settings.js"></script>
 <script src="/pinokio-touch.js"></script>
 <script src="/common.js"></script>
@@ -25,6 +29,7 @@
 -->
 <script src="/autoexpand.js"></script>
 <script src="/modalinput.js"></script>
+<script src="/htmlmodal.js"></script>
 <script src="/simplemodal.js"></script>
 <script src="/waitmodal.js"></script>
 <script src="/notifyinput.js"></script>
@@ -260,6 +265,18 @@ function buildBinaryRpcPayload(rpc, fileEntries) {
   }
   return combined.buffer
 }
+const fallbackPreviewSanitizer = (value) => {
+  if (typeof value !== "string" || value.length === 0) {
+    return ""
+  }
+  return value.replace(/[\x00-\x1F\x7F]/g, "")
+}
+const sanitizePreviewLine = (value) => {
+  const sanitizer = (typeof window !== "undefined" && typeof window.PinokioSanitizePreviewLine === "function")
+    ? window.PinokioSanitizePreviewLine
+    : fallbackPreviewSanitizer
+  return sanitizer(value || "")
+}
 document.addEventListener("DOMContentLoaded", async () => {
   <% if (error) { %>
     document.querySelector(".requirements .content").innerHTML = '<div class="loading"><i class="fa-solid fa-circle-exclamation"></i> <%=error%></div>'
@@ -289,6 +306,10 @@ document.addEventListener("DOMContentLoaded", async () => {
   class RPC {
     constructor() {
       this.socket = new Socket()
+      this.resizeSync = window.PinokioResizeSync.create({
+        socket: this.socket,
+        getShellId: () => shell_id
+      })
       this.buffer = []
       this.uploadContext = {
         cwd: "~" + location.pathname
@@ -344,7 +365,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         this.inputTracker.submit(line, meta)
         return
       }
-      const safeLine = (line || "").replace(/[\x00-\x1F\x7F]/g, "")
+      const safeLine = sanitizePreviewLine(line || "")
       const preview = safeLine.trim()
       const limit = 200
       const truncated = preview.length > limit ? preview.slice(0, limit) + "..." : preview
@@ -443,6 +464,7 @@ document.addEventListener("DOMContentLoaded", async () => {
           payload.id = runId
           payload.useId = true
         }
+        this.resizeSync.reset()
         this.socket.run(payload, async (packet) => {
           if (packet.type === 'start') {
             refreshParent(packet)
@@ -473,9 +495,13 @@ document.addEventListener("DOMContentLoaded", async () => {
           } else if (packet.type === "stream") {
             refreshParent(packet)
             // set the current shell id
+            const previousShellId = shell_id
             if (packet.data.id) {
               shell_id = packet.data.id
             }
+            if (!previousShellId && shell_id) {
+              this.resizeSync.sendInitial()
+            }
             if (packet.data.raw) {
               this.write(packet.data.raw)
             } else if (packet.data.json) {
@@ -507,6 +533,7 @@ document.addEventListener("DOMContentLoaded", async () => {
             this.socket.close()
             document.querySelector(".run .play").classList.remove("hidden")
             document.querySelector(".run .stop").classList.add("hidden")
+            this.resizeSync.reset()
 
             <% if (kill_message) { %>
               n.Noty({
@@ -580,6 +607,9 @@ document.addEventListener("DOMContentLoaded", async () => {
               if (packet.data.shell) {
                 shell_id = packet.data.shell
               }
+              if (shell_id) {
+                this.resizeSync.sendInitial()
+              }
               if (packet.data.state) {
                 this.write(packet.data.state)
               }
@@ -597,6 +627,8 @@ document.addEventListener("DOMContentLoaded", async () => {
             document.querySelector(".run .play").classList.add("hidden")
             document.querySelector(".run .starting").classList.add("hidden")
             document.querySelector(".run .stop").classList.remove("hidden")
+          } else if (packet.type === 'resize') {
+            this.resizeSync.handleResizePacket(packet)
 //          } else if (packet.type === "key.set") {
 //            let keys = await fetch("/pinokio/keys").then((res) => {
 //              return res.json()
@@ -631,6 +663,10 @@ document.addEventListener("DOMContentLoaded", async () => {
             })
           } else if (packet.type === 'wait') {
             await WaitModal(packet.data)
+          } else if (packet.type === "htmlmodal") {
+            if (window.HtmlModal && typeof window.HtmlModal.handle === 'function') {
+              window.HtmlModal.handle(packet, this.socket)
+            }
           } else if (packet.type === "modal") {
             await SimpleModal(packet.data)
             this.socket.respond({
@@ -844,9 +880,13 @@ document.addEventListener("DOMContentLoaded", async () => {
               document.querySelector("#error-screen").classList.add("hidden")
             })
             */
-            instance.mark(packet.event)
-            let element = document.querySelector("mark")
-            element.scrollIntoView({ behavior: "smooth", block: "center" });
+            if (packet.event) {
+              instance.mark(packet.event)
+              let element = document.querySelector("#error-screen mark")
+              if (element) {
+                element.scrollIntoView({ behavior: "smooth", block: "center" })
+              }
+            }
 
             this.error = true
 
@@ -1495,6 +1535,64 @@ document.addEventListener("DOMContentLoaded", async () => {
           return false
         }
         let suppressClipboardText = false
+        let dragDepth = 0
+        const prevent = (event) => {
+          event.preventDefault()
+          event.stopPropagation()
+        }
+        terminalContainer.addEventListener("dragenter", (event) => {
+          prevent(event)
+          dragDepth += 1
+          dropOverlay.classList.add("active")
+        })
+        terminalContainer.addEventListener("dragover", prevent)
+        terminalContainer.addEventListener("dragleave", (event) => {
+          prevent(event)
+          dragDepth = Math.max(0, dragDepth - 1)
+          if (dragDepth === 0) {
+            dropOverlay.classList.remove("active")
+          }
+        })
+        terminalContainer.addEventListener("drop", async (event) => {
+          prevent(event)
+          dragDepth = 0
+          dropOverlay.classList.remove("active")
+          const files = Array.from(event.dataTransfer ? event.dataTransfer.files || [] : [])
+          let remoteResources = []
+          try {
+            const extra = await this.collectFilesFromDataTransfer(event.dataTransfer)
+            if (extra && Array.isArray(extra.urls) && extra.urls.length) {
+              const seenUrls = new Set()
+              remoteResources = extra.urls.filter((item) => {
+                if (!item || typeof item.href !== "string") {
+                  return false
+                }
+                const key = item.href.trim()
+                if (!key || seenUrls.has(key)) {
+                  return false
+                }
+                seenUrls.add(key)
+                return true
+              })
+            }
+          } catch (error) {
+            console.warn("Failed to collect files from drop payload", error)
+          }
+          if (!files.length && (!remoteResources || remoteResources.length === 0)) {
+            return
+          }
+          try {
+            if (remoteResources && remoteResources.length > 0) {
+              await this.uploadRemoteResources(remoteResources, dropOverlay)
+            }
+          } catch (error) {
+            console.warn("Remote upload failed", error)
+          }
+          if (files.length > 0) {
+            await this.uploadFiles(files, dropOverlay)
+          }
+          this.term.focus()
+        })
         terminalContainer.addEventListener("paste", async (event) => {
           const clipboard = event && event.clipboardData ? event.clipboardData : null
           const { files: directFiles, hasFileFlavor } = collectClipboardFiles(clipboard)
@@ -1544,23 +1642,7 @@ document.addEventListener("DOMContentLoaded", async () => {
           }
           if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
             if (!suppressClipboardText) {
-              navigator.clipboard.readText().then((text) => {
-                console.log('[clipboard paste][terminal][text]', text)
-                this.socket.run({
-                  //key: "\x1b[200~" + text + "\x1b[201~",
-                  key: text,
-                  id: shell_id,
-                  paste: true
-                })
-                this.captureTextInput(text)
-
-
-//              this.socket.run({
-//                //key: "\x1b[200~" + text + "\x1b[201~",
-//                key: text,
-//                id: shell_id
-//              })
-              })
+              return true
             }
             suppressClipboardText = false
             return false
@@ -1574,50 +1656,23 @@ document.addEventListener("DOMContentLoaded", async () => {
         ////term.resize(cols, rows-5);
         //term.resize(cols, rows);
 
-        term.onKey(({ key, domEvent }) => {
+        term.onData((data) => {
           if (this.socket && shell_id) {
             this.socket.run({
-              key,
+              key: data,
               id: shell_id
             })
           }
-          if (!domEvent) {
-            return
-          }
-          if (domEvent.key === "Backspace") {
-            this.handleBackspace()
-            return
-          }
-          if (domEvent.key === "Enter") {
-            this.captureTextInput("\n")
-            return
-          }
-          if (domEvent.key === "Tab") {
-            this.captureTextInput("\t")
-            return
-          }
-          if (domEvent.key === "Escape") {
-            this.resetInputBuffer()
-            return
-          }
-          if (domEvent.ctrlKey || domEvent.metaKey || domEvent.altKey) {
-            if (key === "\u0015" || key === "\u0017" || key === "\u000b" || key === "\u0003" || domEvent.key === "c" || domEvent.key === "C" || domEvent.key === "u" || domEvent.key === "U") {
-              this.resetInputBuffer()
-            }
-            return
-          }
-          if (key === "\u0015" || key === "\u0017" || key === "\u000b") {
-            this.resetInputBuffer()
-            return
-          }
-          if (key === "\u0008") {
-            this.handleBackspace()
-            return
-          }
-          if (typeof key === "string" && key.length === 1 && key >= " ") {
-            this.captureTextInput(key)
+          if (typeof window.processTerminalInputData === "function") {
+            window.processTerminalInputData(data, {
+              capture: (chunk) => this.captureTextInput(chunk),
+              backspace: () => this.handleBackspace(),
+              reset: () => this.resetInputBuffer()
+            })
+          } else {
+            this.captureTextInput(data)
           }
-        });
+        })
 
         const fitAddon = new FitAddon.FitAddon();
 //        const searchAddon = new SearchAddon.SearchAddon();
@@ -1636,24 +1691,14 @@ document.addEventListener("DOMContentLoaded", async () => {
         fitAddon.fit();
         this.term = term
         this.fit = fitAddon
+        this.resizeSync.updateTerm(this.term, this.fit, this.socket)
+        this.tabCaptionHelper = window.PinokioTabCaptionHelper.attach(term, { tracker: this.inputTracker })
 
       }
       this.term.focus()
       this.observer = new ResizeObserver(() => {
         this.fit.fit()
-        console.log(`Resized to ${this.term.cols}x${this.term.rows}`);
-        // Trigger your custom handler here
-        if (this.socket) {
-          if (shell_id) {
-            this.socket.run({
-              resize: {
-                cols: this.term.cols,
-                rows: this.term.rows,
-              },
-              id: shell_id
-            })
-          }
-        }
+        this.resizeSync.sendResize(this.term.cols, this.term.rows)
       });
       this.observer.observe(document.body)
     }
@@ -1827,7 +1872,7 @@ const reloadMemory = async () => {
           <span class='stop hidden'><i class="fa-solid fa-stop"></i> Stop</span>
         </div>
         <% if (locals.filepath) { %>
-          <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-eye"></i> View File</button>
+          <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-eye"></i> Script</button>
         <% } %>
         <div id='status-window'></div>
         <div id='progress-window' class='hidden'><div id='progress-bar'></div></div>

package/server/views/tools.ejs

@@ -1279,8 +1279,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <% } %>
   <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' id='genlog' href="/logs"><i class="fa-solid fa-laptop-code"></i><div class='caption'>Logs</div></a>
   <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
   <a class='tab selected' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
   <a class='tab' href="/agents"><i class="fa-solid fa-robot"></i><div class='caption'>Agents</div></a>