pinokiod 3.85.0 → 3.87.0

package/server/views/terminal.ejs

@@ -13,6 +13,7 @@
 <script src="/xterm-addon-search-bar.js"></script>
 <script src="/sweetalert2.js"></script>
 <script src="/Socket.js"></script>
+<script src="/terminal_input_tracker.js"></script>
 <script src="/common.js"></script>
 <script src="/he.js"></script>
 <script src="/opener.js"></script>
@@ -95,6 +96,28 @@ header {
 .xterm .xterm-viewport {
   width: initial !important;
 }
+#terminal {
+  position: relative;
+}
+.terminal-drop-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  text-align: center;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease-in-out;
+  padding: 12px;
+  z-index: 5;
+}
+.terminal-drop-overlay.active {
+  opacity: 1;
+}
 /*
 .navheader {
   background: var(--dark-bg);
@@ -102,7 +125,7 @@ header {
 */
 /*
 .btn {
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
 }
 */
 #status-window {
@@ -114,7 +137,7 @@ header {
   font-size: 12px;
 }
 #status-window strong {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
 }
 #status-window b {
   color: black;
@@ -136,11 +159,11 @@ body.dark #status-window b {
 #progress-bar {
   width: 0%;
   height: 100%;
-  background: royalblue;
+  background: rgba(127, 91, 243, 0.9);
   transition: width 0.2s;
 }
 #del-bin {
-  color: royalblue;
+  color: rgba(127, 91, 243, 0.9);
   cursor: pointer;
   font-weight: bold;
   padding: 0 5px;
@@ -154,6 +177,28 @@ body.frozen {
 <script>
 let shell_id
 Dropzone.autoDiscover = false;
+function buildBinaryRpcPayload(rpc, fileEntries) {
+  const metadata = {
+    rpc,
+    buffer_keys: fileEntries.map((entry) => entry.key)
+  }
+  const metaBytes = new TextEncoder().encode(JSON.stringify(metadata))
+  const separator = new Uint8Array([0])
+  const parts = [metaBytes, separator]
+  for (const entry of fileEntries) {
+    const lenBytes = new Uint8Array(4)
+    new DataView(lenBytes.buffer).setUint32(0, entry.buffer.byteLength)
+    parts.push(lenBytes, entry.buffer)
+  }
+  const totalLength = parts.reduce((sum, part) => sum + part.length, 0)
+  const combined = new Uint8Array(totalLength)
+  let offset = 0
+  for (const part of parts) {
+    combined.set(part, offset)
+    offset += part.length
+  }
+  return combined.buffer
+}
 document.addEventListener("DOMContentLoaded", async () => {
   <% if (error) { %>
     document.querySelector(".requirements .content").innerHTML = '<div class="loading"><i class="fa-solid fa-circle-exclamation"></i> <%=error%></div>'
@@ -177,10 +222,80 @@ document.addEventListener("DOMContentLoaded", async () => {
     location.href = location.href
   <% } %>
   const n = new N()
+  const baseScriptId = <% if (script_id) { %><%- JSON.stringify(script_id) %><% } else { %>null<% } %>
+  const scriptUri = <% if (script_path) { %><%- JSON.stringify(script_path) %><% } else { %>null<% } %>
+  const scriptCwd = <% if (cwd) { %><%- JSON.stringify(cwd) %><% } else { %>null<% } %>
   class RPC {
     constructor() {
       this.socket = new Socket()
       this.buffer = []
+      this.uploadContext = {
+        cwd: "~" + location.pathname
+      }
+      this.baseScriptId = baseScriptId
+      this.currentId = baseScriptId
+      this.inputBuffer = ""
+      this.inputTracker = window.TerminalInputTracker ? new window.TerminalInputTracker({
+        getFrameName: () => window.name || null,
+        getWindow: () => window
+      }) : null
+    }
+    resetInputBuffer() {
+      if (this.inputTracker) {
+        this.inputTracker.reset()
+        return
+      }
+      this.inputBuffer = ""
+    }
+    handleBackspace() {
+      if (this.inputTracker) {
+        this.inputTracker.handleBackspace()
+        return
+      }
+      if (this.inputBuffer.length > 0) {
+        this.inputBuffer = this.inputBuffer.slice(0, -1)
+      }
+    }
+    captureTextInput(text) {
+      if (this.inputTracker) {
+        this.inputTracker.capture(text)
+        return
+      }
+      if (typeof text !== "string" || text.length === 0) {
+        return
+      }
+      const normalized = text.replace(/\r/g, "\n")
+      const segments = normalized.split("\n")
+      for (let i = 0; i < segments.length; i++) {
+        const segment = segments[i]
+        const isLast = (i === segments.length - 1)
+        if (!isLast) {
+          const line = this.inputBuffer + segment
+          this.inputBuffer = ""
+          this.notifyLineSubmitted(line)
+        } else {
+          this.inputBuffer += segment
+        }
+      }
+    }
+    notifyLineSubmitted(line) {
+      if (this.inputTracker) {
+        this.inputTracker.submit(line)
+        return
+      }
+      if (!window || !window.parent || typeof window.parent.postMessage !== "function") {
+        return
+      }
+      const safeLine = (line || "").replace(/[\x00-\x1F\x7F]/g, "")
+      const preview = safeLine.trim()
+      const limit = 200
+      const truncated = preview.length > limit ? preview.slice(0, limit) + "..." : preview
+      window.parent.postMessage({
+        type: "terminal-input",
+        frame: window.name || null,
+        line: truncated,
+        hasContent: truncated.length > 0
+      }, "*")
     }
     write(text) {
       if (text !== "\u0007") {
@@ -199,20 +314,16 @@ document.addEventListener("DOMContentLoaded", async () => {
       document.querySelector(".run .starting").classList.add("hidden")
     }
     stop() {
+      const params = {
+        uri: scriptUri || ("~" + location.pathname)
+      }
+      const runId = this.currentId || this.baseScriptId
+      if (runId) {
+        params.id = runId
+      }
       this.socket.run({
         method: "kernel.api.stop",
-        params: {
-          <% if (script_id) { %>
-            id: "<%-JSON.stringify(script_id).slice(1, -1)%>",
-          <% } %>
-          //uri: "<%-uri%>",
-          //uri: location.pathname.slice(1).replace("api/", ""),
-          <% if (script_path) { %>
-            uri: "<%-JSON.stringify(script_path).slice(1, -1)%>",
-          <% } else { %>
-            uri: "~" + location.pathname,
-          <% } %>
-        }
+        params
       }, (stream) => {
       })
     }
@@ -247,30 +358,32 @@ document.addEventListener("DOMContentLoaded", async () => {
 //        await this.save()
         await this.socket.close()
 
-        let query = Object.fromEntries(new URLSearchParams(location.search))
+        const searchParams = new URLSearchParams(location.search)
+        const query = Object.fromEntries(searchParams)
+        let runId = this.baseScriptId
+        if (query.session) {
+          const baseId = this.baseScriptId || (scriptUri || ("~" + location.pathname))
+          runId = `${baseId}&session=${query.session}`
+        }
+        this.currentId = runId || null
 
-        this.socket.run({
-          //uri: location.pathname.slice(1).replace("api/", ""),
-          <% if (script_id) { %>
-            id: "<%-JSON.stringify(script_id).slice(1, -1)%>",
-          <% } %>
-          <% if (cwd) { %>
-            cwd: "<%-JSON.stringify(cwd).slice(1, -1)%>",
-          <% } %>
-          <% if (script_path) { %>
-            uri: "<%-JSON.stringify(script_path).slice(1, -1)%>",
-          <% } else { %>
-            uri: "~" + location.pathname,
-          <% } %>
-          //uri: "<%-uri%>",
+        const payload = {
+          uri: scriptUri || ("~" + location.pathname),
           mode,
           input: query,
           client: {
             cols: this.term.cols,
             rows: this.term.rows,
           }
-        }, async (packet) => {
-          console.log({ packet })
+        }
+        if (scriptCwd) {
+          payload.cwd = scriptCwd
+        }
+        if (runId) {
+          payload.id = runId
+          payload.useId = true
+        }
+        this.socket.run(payload, async (packet) => {
           if (packet.type === 'start') {
             refreshParent(packet)
             reloadMemory()
@@ -298,6 +411,7 @@ document.addEventListener("DOMContentLoaded", async () => {
               </b>`
             }
           } else if (packet.type === "stream") {
+            refreshParent(packet)
             // set the current shell id
             if (packet.data.id) {
               shell_id = packet.data.id
@@ -614,6 +728,36 @@ document.addEventListener("DOMContentLoaded", async () => {
               n.Noty(payload)
             }
           } else if (packet.type === "result") {
+            if (packet.id === "terminal.upload") {
+              const uploaded = Array.isArray(packet.data && packet.data.files) ? packet.data.files : []
+              if (uploaded.length > 0) {
+                const mappedFiles = uploaded.map((file) => {
+                  const displayPath = file.displayPath || file.homeRelativePath ? `~/${(file.homeRelativePath || '').replace(/^\/+/, '')}` : (file.path || '')
+                  return {
+                    originalName: file.originalName || file.name || file.storedAs,
+                    storedAs: file.storedAs,
+                    path: file.path,
+                    displayPath,
+                    homeRelativePath: file.homeRelativePath || '',
+                    cliPath: file.cliPath || null,
+                    cliRelativePath: file.cliRelativePath || null
+                  }
+                })
+                refreshParent({
+                  type: "terminal.upload",
+                  files: mappedFiles
+                })
+                n.Noty({
+                  text: mappedFiles.length > 1 ? `${mappedFiles.length} files attached` : `File attached`,
+                  timeout: 4000
+                })
+              } else {
+                refreshParent({
+                  type: "terminal.upload",
+                  files: []
+                })
+              }
+            }
             refreshParent(packet)
             reloadMemory()
           } else if (packet.type === "info") {
@@ -734,6 +878,71 @@ document.addEventListener("DOMContentLoaded", async () => {
       <% } %>
       await this.start(mode)
     }
+    async uploadFiles(files, overlay) {
+      if (!files || files.length === 0) {
+        return
+      }
+      if (!this.socket || !this.socket.ws || this.socket.ws.readyState !== WebSocket.OPEN) {
+        n.Noty({
+          text: "Terminal connection is not ready for uploads",
+          type: "error"
+        })
+        return
+      }
+      const entries = []
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i]
+        if (!file || typeof file.arrayBuffer !== "function") {
+          continue
+        }
+        try {
+          const arrayBuffer = await file.arrayBuffer()
+          const key = `file_${Date.now()}_${i}_${Math.random().toString(16).slice(2, 8)}`
+          entries.push({
+            key,
+            name: file.name || `upload-${i + 1}`,
+            size: file.size,
+            type: file.type || "",
+            buffer: new Uint8Array(arrayBuffer)
+          })
+        } catch (error) {
+          console.error("Failed to read dropped file", error)
+        }
+      }
+      if (entries.length === 0) {
+        n.Noty({
+          text: "No readable files were dropped",
+          type: "error"
+        })
+        return
+      }
+      const rpcPayload = {
+        method: "terminal.upload",
+        params: {
+          id: shell_id,
+          cwd: this.uploadContext.cwd,
+          files: entries.map(({ key, name, size, type }) => ({ key, name, size, type }))
+        }
+      }
+      try {
+        if (overlay) {
+          overlay.classList.add("active")
+          overlay.textContent = "Uploading..."
+        }
+        await this.socket.sendBinary(buildBinaryRpcPayload(rpcPayload, entries))
+      } catch (error) {
+        console.error("Upload failed", error)
+        n.Noty({
+          text: `Upload failed: ${error.message}`,
+          type: "error"
+        })
+      } finally {
+        if (overlay) {
+          overlay.classList.remove("active")
+          overlay.textContent = "Drop files to upload"
+        }
+      }
+    }
     async createTerm (_theme) {
       if (!this.term) {
         const theme = Object.assign({ }, _theme, {
@@ -745,7 +954,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         <% } %>
         let config = {
           scrollback: 9999999,
-          //fontSize: 12,
+          fontSize: 12,
           //fontSize: 14,
           theme,
           //theme: xtermTheme.FrontEndDelight
@@ -768,6 +977,40 @@ document.addEventListener("DOMContentLoaded", async () => {
         }
         const term = new Terminal(config)
         term.open(document.querySelector("#terminal"))
+        const terminalContainer = document.querySelector("#terminal")
+        const dropOverlay = document.createElement("div")
+        dropOverlay.className = "terminal-drop-overlay"
+        dropOverlay.textContent = "Drop files to upload"
+        terminalContainer.appendChild(dropOverlay)
+        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 dropped = Array.from(event.dataTransfer ? event.dataTransfer.files || [] : [])
+          if (!dropped.length) {
+            return
+          }
+          await this.uploadFiles(dropped, dropOverlay)
+          this.term.focus()
+        })
         term.attachCustomKeyEventHandler(event => {
           if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
             const selection = term.getSelection();
@@ -784,6 +1027,7 @@ document.addEventListener("DOMContentLoaded", async () => {
                 id: shell_id,
                 paste: true
               })
+              this.captureTextInput(text)
 
 
 //              this.socket.run({
@@ -803,14 +1047,48 @@ document.addEventListener("DOMContentLoaded", async () => {
         ////term.resize(cols, rows-5);
         //term.resize(cols, rows);
 
-        term.onKey(({ key }) => {
-          if (this.socket) {
-            if (shell_id) {
-              this.socket.run({
-                key,
-                id: shell_id
-              })
+        term.onKey(({ key, domEvent }) => {
+          if (this.socket && shell_id) {
+            this.socket.run({
+              key,
+              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)
           }
         });
 
@@ -859,19 +1137,15 @@ document.addEventListener("DOMContentLoaded", async () => {
     <% if (mod && runnable) { %>
       window.addEventListener('message', function(event) {
         console.log("Message received from the parent: ", event.data); // Message received from parent
-        //  "foreground" message adds a newline to the terminal
-        // Needed to fix the issue where the terminal won't write anything when in background
-        // so when coming back from background, need to refresh by just adding a newline.
+        //  "foreground" message triggers a redraw so buffered output appears after backgrounding.
         if (event.data && event.data.action === "foreground") {
-          
-
-          // if dirty, update
-          // if not dirty, don't update
-          const delimiter = "\r\n"
-          if (rpc.dirty) {
-            rpc.term.write(delimiter)
+          if (rpc.dirty && rpc.term) {
+            const endRow = Math.max(rpc.term.rows - 1, 0)
+            rpc.term.refresh(0, endRow)
+            if (typeof rpc.term.scrollToBottom === "function") {
+              rpc.term.scrollToBottom()
+            }
             rpc.dirty = false
-          } else {
           }
 
           //console.log("buffer", rpc.term.buffer)