pinokiod 3.214.0 → 3.215.0

package/kernel/shell.js

@@ -525,8 +525,8 @@ class Shell {
     return new Promise((resolve, reject) => {
       const config = {
         name: 'xterm-color',
-        cols: this.cols,
-        rows: this.rows,
+        cols: 1000,
+        rows: Math.max(this.rows || 24, 24),
         //cols: 1000,
         //rows: 30,
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "3.214.0",
+  "version": "3.215.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/public/layout.js

@@ -753,9 +753,17 @@
     stripTransientQueryParams();
   }
 
+  let resizeScheduled = false;
   function onResize() {
-    applyLayout();
-    attachGutterHandlers();
+    if (resizeScheduled) {
+      return;
+    }
+    resizeScheduled = true;
+    requestAnimationFrame(() => {
+      resizeScheduled = false;
+      applyLayout();
+      attachGutterHandlers();
+    });
   }
 
   initLayout();

package/server/public/pinokio-touch.js

@@ -0,0 +1,86 @@
+;(function() {
+  if (typeof window === 'undefined') {
+    return
+  }
+  if (window.PinokioTouch) {
+    return
+  }
+
+  const TOUCH_FOCUS_KEY = '__pinokioTouchFocusHandler'
+  const TOUCH_OPTIONS = (() => {
+    let passiveSupported = false
+    try {
+      const opts = Object.defineProperty({}, 'passive', {
+        get() {
+          passiveSupported = true
+          return true
+        }
+      })
+      window.addEventListener('test-passive', null, opts)
+      window.removeEventListener('test-passive', null, opts)
+    } catch (_) {}
+    return passiveSupported ? { passive: true } : false
+  })()
+
+  const isTouchLikeEvent = (event) => {
+    if (!event || typeof event !== 'object') {
+      return false
+    }
+    const pointerType = typeof event.pointerType === 'string' ? event.pointerType.toLowerCase() : ''
+    if (pointerType) {
+      return pointerType === 'touch' || pointerType === 'pen'
+    }
+    const touches = event.touches || event.changedTouches
+    return Boolean(touches && touches.length > 0)
+  }
+
+  const bindPointer = (target, handler, options = {}) => {
+    if (!target || typeof target.addEventListener !== 'function' || typeof handler !== 'function') {
+      return () => {}
+    }
+    const pointerOpts = Object.prototype.hasOwnProperty.call(options, 'pointer') ? options.pointer : undefined
+    const touchOpts = Object.prototype.hasOwnProperty.call(options, 'touch') ? options.touch : TOUCH_OPTIONS
+    target.addEventListener('pointerdown', handler, pointerOpts)
+    target.addEventListener('touchstart', handler, touchOpts)
+    return () => {
+      target.removeEventListener('pointerdown', handler, pointerOpts)
+      target.removeEventListener('touchstart', handler, touchOpts)
+    }
+  }
+
+  const bindTerminalFocus = (term, container) => {
+    if (!term || typeof term.focus !== 'function' || !container) {
+      return () => {}
+    }
+
+    const existing = container[TOUCH_FOCUS_KEY]
+    if (typeof existing === 'function') {
+      existing()
+    }
+
+    const handler = (event) => {
+      if (!isTouchLikeEvent(event)) {
+        return
+      }
+      term.focus()
+    }
+
+    const unbind = bindPointer(container, handler)
+    container[TOUCH_FOCUS_KEY] = unbind
+
+    return () => {
+      if (typeof unbind === 'function') {
+        unbind()
+      }
+      if (container[TOUCH_FOCUS_KEY] === unbind) {
+        delete container[TOUCH_FOCUS_KEY]
+      }
+    }
+  }
+
+  window.PinokioTouch = {
+    bindPointer,
+    bindTerminalFocus,
+    isTouchLikeEvent
+  }
+})()

package/server/views/app.ejs

@@ -14,6 +14,7 @@
 <link href="/filepond-plugin-image-edit.min.css" rel="stylesheet" />
 <link href="/style.css" rel="stylesheet"/>
 <script src="/modalinput.js"></script>
+<script src="/pinokio-touch.js"></script>
 <% if (agent === "electron") { %>
   <link href="/electron.css" rel="stylesheet"/>
 <% } %>
@@ -3437,6 +3438,8 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
   let tabLinkRouterInfoPromise = null
   let tabLinkRouterInfoExpiry = 0
   let tabLinkRouterHttpsActive = null
+  let tabLinkPeerInfoPromise = null
+  let tabLinkPeerInfoExpiry = 0
 
   const ensureTabLinkPopoverEl = () => {
     if (!tabLinkPopoverEl) {
@@ -3475,6 +3478,27 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     return tabLinkPopoverEl
   }
 
+  const ensurePeerInfo = async () => {
+    const now = Date.now()
+    if (!tabLinkPeerInfoPromise || now > tabLinkPeerInfoExpiry) {
+      tabLinkPeerInfoPromise = fetch("/pinokio/peer", {
+        method: "GET",
+        headers: {
+          "Accept": "application/json"
+        }
+      })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error("Failed to load peer info")
+          }
+          return response.json()
+        })
+        .catch(() => null)
+      tabLinkPeerInfoExpiry = now + 3000
+    }
+    return tabLinkPeerInfoPromise
+  }
+
   const canonicalizeUrl = (value) => {
     try {
       const parsed = new URL(value, location.origin)
@@ -4114,6 +4138,24 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     }
 
     const baseHref = link.href
+    let canonicalBase = canonicalizeUrl(baseHref)
+    if (canonicalBase && isHttpUrl(canonicalBase)) {
+      canonicalBase = ensureHttpDirectoryUrl(canonicalBase)
+    }
+    let parsedBaseUrl = null
+    let sameOrigin = false
+    let basePortNormalized = ""
+    try {
+      parsedBaseUrl = new URL(baseHref, location.origin)
+      sameOrigin = parsedBaseUrl.origin === location.origin
+      if (parsedBaseUrl) {
+        basePortNormalized = parsedBaseUrl.port
+        if (!basePortNormalized) {
+          const proto = parsedBaseUrl.protocol ? parsedBaseUrl.protocol.toLowerCase() : "http:"
+          basePortNormalized = proto === "https:" ? "443" : "80"
+        }
+      }
+    } catch (_) {}
     const projectSlug = extractProjectSlug(link).toLowerCase()
     const entries = []
     const entryByUrl = new Map()
@@ -4129,10 +4171,11 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
         return
       }
       let skip = false
+      const allowSameOrigin = opts && opts.allowSameOrigin === true
       try {
         const parsed = new URL(canonical)
         const originLower = parsed.origin.toLowerCase()
-        if (originLower === location.origin.toLowerCase()) {
+        if (!allowSameOrigin && originLower === location.origin.toLowerCase()) {
           skip = true
         }
       } catch (_) {
@@ -4158,25 +4201,29 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     }
 
     if (isHttpUrl(baseHref)) {
-      addEntry("http", "HTTP", baseHref)
+      addEntry("http", "HTTP", baseHref, { allowSameOrigin: true })
     } else if (isHttpsUrl(baseHref)) {
-      addEntry("https", "HTTPS", baseHref)
+      addEntry("https", "HTTPS", baseHref, { allowSameOrigin: true })
     } else {
-      addEntry("url", "URL", baseHref)
+      addEntry("url", "URL", baseHref, { allowSameOrigin: true })
     }
 
     const httpCandidates = new Map() // url -> { qr: boolean }
     const httpsCandidates = new Set()
 
     if (isHttpUrl(baseHref)) {
-      httpCandidates.set(canonicalizeUrl(baseHref), { qr: false })
+      httpCandidates.set(canonicalBase || canonicalizeUrl(baseHref), { qr: false })
     } else if (isHttpsUrl(baseHref)) {
-      httpsCandidates.add(canonicalizeUrl(baseHref))
+      if (canonicalBase) {
+        httpsCandidates.add(canonicalBase)
+      } else {
+        httpsCandidates.add(canonicalizeUrl(baseHref))
+      }
     }
 
     if (projectSlug) {
       try {
-        const baseUrl = new URL(baseHref, location.origin)
+        const baseUrl = parsedBaseUrl || new URL(baseHref, location.origin)
         let pathname = baseUrl.pathname || "/"
         if (pathname.endsWith("/index.html")) {
           pathname = pathname.slice(0, -"/index.html".length)
@@ -4230,7 +4277,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
 
     // Add external 192.168.* http host:port candidates mapped from the same internal port as base HTTP
     try {
-      const base = new URL(baseHref, location.origin)
+      const base = parsedBaseUrl || new URL(baseHref, location.origin)
       let basePort = base.port
       if (!basePort) {
         basePort = base.protocol.toLowerCase() === 'https:' ? '443' : '80'
@@ -4283,6 +4330,65 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       addEntry("https", "HTTPS", url)
     })
 
+    if (sameOrigin) {
+      try {
+        const peerInfo = await ensurePeerInfo()
+        const peerHost = peerInfo && typeof peerInfo.host === "string" ? peerInfo.host.trim() : ""
+        if (peerHost) {
+          const peerHostLower = peerHost.toLowerCase()
+          // Skip loopback-style peers
+          if (peerHostLower !== "localhost" && !peerHostLower.startsWith("127.")) {
+            const baseUrl = parsedBaseUrl || new URL(baseHref, location.origin)
+            const baseHostLower = (baseUrl.hostname || "").toLowerCase()
+            if (peerHostLower !== baseHostLower) {
+              const baseProtocol = baseUrl.protocol ? baseUrl.protocol.toLowerCase() : "http:"
+              const scheme = baseProtocol === "https:" ? "https://" : "http://"
+              const port = baseUrl.port || (baseProtocol === "https:" ? "443" : "80")
+              const hostPort = port ? `${peerHostLower}:${port}` : peerHostLower
+              const pathSegment = baseUrl.pathname || "/"
+              const searchSegment = baseUrl.search || ""
+              const fallbackUrl = `${scheme}${hostPort}${pathSegment}${searchSegment}`
+              const label = baseProtocol === "https:" ? "HTTPS" : "HTTP"
+              addEntry(baseProtocol === "https:" ? "https" : "http", label, fallbackUrl, { qr: true })
+            }
+          }
+        }
+      } catch (_) {}
+
+      const matchesBasePort = (value) => {
+        if (!basePortNormalized) {
+          return true
+        }
+        try {
+          const parsed = new URL(value, location.origin)
+          let port = parsed.port
+          if (!port) {
+            const proto = parsed.protocol ? parsed.protocol.toLowerCase() : "http:"
+            port = proto === "https:" ? "443" : "80"
+          }
+          return port === basePortNormalized
+        } catch (_) {
+          return false
+        }
+      }
+
+      const filteredEntries = entries.filter((entry) => {
+        if (!entry || !entry.url) {
+          return false
+        }
+        if (entry.url === canonicalBase) {
+          return true
+        }
+        if (entry.qr === true) {
+          return matchesBasePort(entry.url)
+        }
+        return false
+      })
+      if (filteredEntries.length > 0) {
+        return filteredEntries
+      }
+    }
+
     return entries
   }
 
@@ -4350,10 +4456,22 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
 
     let sameOrigin = false
     let canonicalBase = canonicalizeUrl(link.href)
+    if (canonicalBase && isHttpUrl(canonicalBase)) {
+      canonicalBase = ensureHttpDirectoryUrl(canonicalBase)
+    }
+    let basePortNormalized = ""
     try {
       const linkUrl = new URL(link.href, location.href)
       sameOrigin = linkUrl.origin === location.origin
       canonicalBase = canonicalizeUrl(linkUrl.href)
+      if (canonicalBase && isHttpUrl(canonicalBase)) {
+        canonicalBase = ensureHttpDirectoryUrl(canonicalBase)
+      }
+      basePortNormalized = linkUrl.port
+      if (!basePortNormalized) {
+        const proto = linkUrl.protocol ? linkUrl.protocol.toLowerCase() : "http:"
+        basePortNormalized = proto === "https:" ? "443" : "80"
+      }
     } catch (_) {
       hideTabLinkPopover({ immediate: true })
       return
@@ -4416,6 +4534,23 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
 
     if (sameOrigin) {
       const slug = extractProjectSlug(link).toLowerCase()
+      const matchesBasePort = (value) => {
+        if (!basePortNormalized) {
+          return true
+        }
+        try {
+          const parsed = new URL(value, location.origin)
+          let port = parsed.port
+          if (!port) {
+            const proto = parsed.protocol ? parsed.protocol.toLowerCase() : "http:"
+            port = proto === "https:" ? "443" : "80"
+          }
+          return port === basePortNormalized
+        } catch (_) {
+          return false
+        }
+      }
+
       if (slug) {
         entries = entries.filter((entry) => {
           if (!entry || !entry.url) {
@@ -4424,6 +4559,9 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
           if (entry.url === canonicalBase) {
             return true
           }
+          if (entry.qr === true) {
+            return matchesBasePort(entry.url)
+          }
           try {
             const parsed = new URL(entry.url)
             const hostLower = parsed.hostname ? parsed.hostname.toLowerCase() : ""
@@ -4452,9 +4590,33 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
           return false
         })
       } else {
-        entries = entries.filter((entry) => entry.url === canonicalBase)
+        entries = entries.filter((entry) => {
+          if (!entry || !entry.url) {
+            return false
+          }
+          if (entry.url === canonicalBase) {
+            return true
+          }
+          if (entry.qr === true) {
+            return matchesBasePort(entry.url)
+          }
+          return false
+        })
       }
 
+      entries = entries.filter((entry) => {
+        if (!entry || !entry.url) {
+          return false
+        }
+        if (entry.url === canonicalBase) {
+          return true
+        }
+        if (entry.qr === true) {
+          return matchesBasePort(entry.url)
+        }
+        return false
+      })
+
       const hasAlternate = entries.some((entry) => entry.url !== canonicalBase)
       if (!hasAlternate) {
         hideTabLinkPopover({ immediate: true })
@@ -5692,7 +5854,9 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       targetFrame.classList.remove("hidden")
       let mode = target.getAttribute("data-mode")
       if (mode === "refresh") {
-        targetFrame.src = target.href
+        if (targetFrame.src !== target.href) {
+          targetFrame.src = target.href
+        }
           } else {
             if (eventParam) {
               if (target.closest(".h")) {
@@ -5700,7 +5864,9 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
                 eventParam.stopPropagation()
                 let sub = subUrlOf(target.href, targetFrame.src)
                 if (!sub) {
-                  targetFrame.src = target.href
+                  if (targetFrame.src !== target.href) {
+                    targetFrame.src = target.href
+                  }
                 }
               } else if (target.closest(".s")) {
                 // load unconditionally => .s doesn't change
@@ -5713,7 +5879,9 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
               }
             } else {
               if (force) {
-                targetFrame.src = target.href
+                if (targetFrame.src !== target.href) {
+                  targetFrame.src = target.href
+                }
               }
             }
             let frameHref
@@ -6538,10 +6706,31 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     }
   }
 
+  const isTouchLikeEvent = window.PinokioTouch.isTouchLikeEvent
+  const handleTouchSelection = (event) => {
+    if (!isTouchLikeEvent(event)) {
+      return
+    }
+    const link = event.target?.closest?.(".frame-link") || null
+    if (!link) {
+      return
+    }
+    if (link.classList.contains("reveal") || link.hasAttribute("data-action") || link.hasAttribute("data-filepath") || link.hasAttribute("data-confirm")) {
+      return
+    }
+    if (event.target?.closest?.(".del") || event.target?.closest?.(".shutdown")) {
+      return
+    }
+    renderSelection({ explicitTarget: link })
+  }
   const navContainers = [document.querySelector("aside"), document.querySelector("#fs-status")]
   navContainers.forEach((container) => {
     if (container) {
       container.addEventListener("click", handleMenuClick)
+      window.PinokioTouch.bindPointer(container, handleTouchSelection, {
+        pointer: true,
+        touch: { passive: true, capture: true }
+      })
     }
   })
   setupTabLinkHover()

package/server/views/bootstrap.ejs

@@ -80,6 +80,7 @@ body {
 </style>
 <script src="/noty.js"></script>
 <script src="/notyq.js"></script>
+<script src="/pinokio-touch.js"></script>
 <script src="/xterm.js"></script>
 <script src="/xterm-addon-fit.js"></script>
 <script src="/xterm-addon-web-links.js"></script>
@@ -158,6 +159,8 @@ document.addEventListener("DOMContentLoaded", () => {
       term.loadAddon(fitAddon);
       term.loadAddon(new WebLinksAddon.WebLinksAddon());
       term.open(document.querySelector("#terminal"))
+      const terminalContainer = document.querySelector("#terminal")
+      window.PinokioTouch.bindTerminalFocus(term, terminalContainer)
       fitAddon.fit();
 
       let socket = new Socket()

package/server/views/editor.ejs

@@ -14,6 +14,7 @@
 <script src="/sweetalert2.js"></script>
 <script src="/Socket.js"></script>
 <script src="/terminal-settings.js"></script>
+<script src="/pinokio-touch.js"></script>
 <script src="/common.js"></script>
 <script src="/he.js"></script>
 <script src="/opener.js"></script>
@@ -688,6 +689,8 @@ document.addEventListener("DOMContentLoaded", async () => {
           window.PinokioTerminalSettings.register(term, { baseConfig })
         }
         term.open(document.querySelector("#terminal"))
+        const terminalContainer = document.querySelector("#terminal")
+        window.PinokioTouch.bindTerminalFocus(term, terminalContainer)
 
 
         term.attachCustomKeyEventHandler(event => {

package/server/views/init/index.ejs

@@ -1498,6 +1498,7 @@ body.dark .ace-editor {
 <script src="/normalize.js"></script>
 <script src="/Socket.js"></script>
 <script src="/terminal-settings.js"></script>
+<script src="/pinokio-touch.js"></script>
 <script src="/noty.js"></script>
 <script src="/notyq.js"></script>
 <script src="/xterm.js"></script>
@@ -2667,6 +2668,8 @@ const createTerm = async (_theme) => {
     window.PinokioTerminalSettings.register(term, { baseConfig })
   }
   term.open(document.querySelector("#terminal2"))
+  const terminalContainer = document.querySelector("#terminal2")
+  window.PinokioTouch.bindTerminalFocus(term, terminalContainer)
   document.querySelector("#terminal-container").classList.remove("hidden")
 
   term.attachCustomKeyEventHandler(event => {

package/server/views/install.ejs

@@ -125,6 +125,7 @@ body {
 <script src="/xterm-theme.js"></script>
 <script src="/Socket.js"></script>
 <script src="/terminal-settings.js"></script>
+<script src="/pinokio-touch.js"></script>
 <!--
 <script src="/install.js"></script>
 -->
@@ -179,6 +180,8 @@ const createTerm = async (_theme) => {
     window.PinokioTerminalSettings.register(term, { baseConfig })
   }
   term.open(document.querySelector("#terminal"))
+  const terminalContainer = document.querySelector("#terminal")
+  window.PinokioTouch.bindTerminalFocus(term, terminalContainer)
 
   term.attachCustomKeyEventHandler(event => {
     if (event.ctrlKey && event.key === 'c' && term.hasSelection()) {

package/server/views/layout.ejs

@@ -123,14 +123,23 @@
   <script>
     (function () {
       const root = document.documentElement;
+      let lastViewportHeight = null;
       const updateViewportHeight = () => {
         const viewport = window.visualViewport;
         const height = viewport ? viewport.height : window.innerHeight;
         if (!height || !Number.isFinite(height)) {
           return;
         }
-        root.style.setProperty('--layout-viewport-height', `${Math.max(0, height).toFixed(2)}px`);
-        window.dispatchEvent(new Event('pinokio:viewport-change'));
+        const clampedHeight = Math.max(0, height);
+        const roundedHeight = Number(clampedHeight.toFixed(2));
+        if (lastViewportHeight === roundedHeight) {
+          return;
+        }
+        lastViewportHeight = roundedHeight;
+        root.style.setProperty('--layout-viewport-height', `${roundedHeight}px`);
+        window.dispatchEvent(new CustomEvent('pinokio:viewport-change', {
+          detail: { height: roundedHeight },
+        }));
       };
 
       const resizeEvents = ['resize', 'orientationchange'];

package/server/views/pro.ejs

@@ -14,6 +14,7 @@
 <script src="/sweetalert2.js"></script>
 <script src="/Socket.js"></script>
 <script src="/terminal-settings.js"></script>
+<script src="/pinokio-touch.js"></script>
 <script src="/common.js"></script>
 <script src="/he.js"></script>
 <script src="/opener.js"></script>
@@ -238,6 +239,8 @@ const createTerm = async (_theme) => {
     window.PinokioTerminalSettings.register(term, { baseConfig })
   }
   term.open(document.querySelector("#terminal"))
+  const terminalContainer = document.querySelector("#terminal")
+  window.PinokioTouch.bindTerminalFocus(term, terminalContainer)
 
   term.attachCustomKeyEventHandler(event => {
     if (event.ctrlKey && event.key === 'c' && term.hasSelection()) {

package/server/views/prototype/index.ejs

@@ -982,6 +982,7 @@ body.dark .appcanvas {
 <script src="/normalize.js"></script>
 <script src="/Socket.js"></script>
 <script src="/terminal-settings.js"></script>
+<script src="/pinokio-touch.js"></script>
 <script src="/noty.js"></script>
 <script src="/notyq.js"></script>
 <script src="/xterm.js"></script>
@@ -1581,6 +1582,8 @@ async function displayResults(config) {
     window.PinokioTerminalSettings.register(term, { baseConfig })
   }
   term.open(document.querySelector("#terminal"))
+  const terminalContainer = document.querySelector("#terminal")
+  window.PinokioTouch.bindTerminalFocus(term, terminalContainer)
   term.attachCustomKeyEventHandler(event => {
     console.log({ event })
     if ((event.ctrlKey || event.metaKey) && event.key === 'c') {

package/server/views/shell.ejs

@@ -15,6 +15,7 @@
 <script src="/Socket.js"></script>
 <script src="/terminal_input_tracker.js"></script>
 <script src="/terminal-settings.js"></script>
+<script src="/pinokio-touch.js"></script>
 <script src="/common.js"></script>
 <script src="/he.js"></script>
 <script src="/opener.js"></script>
@@ -460,7 +461,6 @@ document.addEventListener("DOMContentLoaded", async () => {
             })
             firstPacketReceived = true
           }
-          console.log({ packet, type: packet.type })
           if (packet.type === 'start') {
             console.log("refreshParent", packet)
             refreshParent(packet)
@@ -1187,6 +1187,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         dropOverlay.className = "terminal-drop-overlay"
         dropOverlay.textContent = "Drop files to upload"
         terminalContainer.appendChild(dropOverlay)
+        window.PinokioTouch.bindTerminalFocus(term, terminalContainer)
         const dedupeClipboardFiles = (inputs) => {
           const seen = new Set()
           const results = []

package/server/views/terminal.ejs

@@ -15,6 +15,7 @@
 <script src="/Socket.js"></script>
 <script src="/terminal_input_tracker.js"></script>
 <script src="/terminal-settings.js"></script>
+<script src="/pinokio-touch.js"></script>
 <script src="/common.js"></script>
 <script src="/he.js"></script>
 <script src="/opener.js"></script>
@@ -1283,6 +1284,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         dropOverlay.className = "terminal-drop-overlay"
         dropOverlay.textContent = "Drop files to upload"
         terminalContainer.appendChild(dropOverlay)
+        window.PinokioTouch.bindTerminalFocus(term, terminalContainer)
         const dedupeClipboardFiles = (inputs) => {
           const seen = new Set()
           const results = []