pinokiod 3.86.0 → 3.87.0

package/server/views/shell.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>
@@ -105,6 +106,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;
+}
 .navheader3 {
   padding: 10px;
 }
@@ -177,12 +200,113 @@ body.dark #status-window b {
 <link href="/terminal.css" rel="stylesheet"/>
 <script>
 let shell_id
+let lastNotifiedShellId = null
+const notifyShellSession = (id) => {
+  if (!id || id === lastNotifiedShellId) {
+    return
+  }
+  lastNotifiedShellId = id
+  if (window && window.parent && typeof window.parent.postMessage === "function") {
+    window.parent.postMessage({
+      type: "shell-session-id",
+      frame: window.name || null,
+      shellId: id
+    }, "*")
+  }
+}
+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 () => {
   const n = new N()
   class RPC {
     constructor() {
       this.socket = new Socket()
       this.buffer = []
+      this.uploadContext = {
+        cwd: "~" + location.pathname
+      }
+      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") {
@@ -317,9 +441,11 @@ document.addEventListener("DOMContentLoaded", async () => {
 //              </div>`
             }
           } else if (packet.type === "stream") {
+            refreshParent(packet)
             // set the current shell id
             if (packet.data.id) {
               shell_id = packet.data.id
+              notifyShellSession(shell_id)
             }
             if (packet.data.raw) {
 //              console.log({ packet })
@@ -363,6 +489,7 @@ document.addEventListener("DOMContentLoaded", async () => {
             if (packet.data) {
               if (packet.data.shell) {
                 shell_id = packet.data.shell
+                notifyShellSession(shell_id)
               }
               if (packet.data.state) {
                 this.write(packet.data.state)
@@ -669,6 +796,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) {
       console.log(xtermTheme)
       if (!this.term) {
@@ -684,7 +876,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         let config = {
           scrollback: 9999999,
           //fontSize: 12,
-          fontSize: 14,
+          fontSize: 12,
           theme,
           //theme: xtermTheme.FrontEndDelight
           //theme: xtermTheme.Afterglow
@@ -706,8 +898,41 @@ 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 => {
-          console.log({ event })
           if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
             const selection = term.getSelection();
             if (selection) {
@@ -717,18 +942,13 @@ document.addEventListener("DOMContentLoaded", async () => {
           }
           if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
             navigator.clipboard.readText().then((text) => {
-              console.log({ text })
-              //this.socket.run({
-              //  //key: "\x1b[200~" + text + "\x1b[201~",
-              //  key: text,
-              //  id: shell_id
-              //})
               this.socket.run({
                 //key: "\x1b[200~" + text + "\x1b[201~",
                 key: text,
                 id: shell_id,
-//                paste: true
+                paste: true
               })
+              this.captureTextInput(text)
 
             })
             return false
@@ -742,15 +962,48 @@ document.addEventListener("DOMContentLoaded", async () => {
         ////term.resize(cols, rows-5);
         //term.resize(cols, rows);
 
-        term.onKey(({ key }) => {
-          console.log({ key, shell_id })
-          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)
           }
         });
 
@@ -838,17 +1091,15 @@ document.addEventListener("DOMContentLoaded", async () => {
 
   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 {
       }
     }
   });