pinokiod 3.261.0 → 3.263.0

package/kernel/bin/brew.js

@@ -1,4 +1,7 @@
+const fs = require('fs')
 const path = require('path')
+
+const { detectCommandLineTools } = require('./xcode-tools')
 class Brew {
   description = "Wait for an install pop-up, then approve."
   async install(req, ondata) {
@@ -19,64 +22,24 @@ class Brew {
     await this.kernel.bin.rm("Homebrew.zip", ondata)
 
     if (this.kernel.platform === "darwin") {
-      // command line tools
+      const checkingMsg = "> checking xcode command line tools...\r\n"
+      console.log(checkingMsg)
+      ondata({ raw: checkingMsg })
 
-      // try to get the contents
-      let result = await this.kernel.bin.exec({ message: "ls -m $(xcode-select -p)" }, (stream) => {
-        ondata(stream)
+      const cltStatus = await detectCommandLineTools({
+        exec: (params) => this.kernel.bin.exec(params, () => {})
       })
-      let e5 = result && result.stdout && /.*Library.*/g.test(result.stdout) && /.*SDKs.*/g.test(result.stdout) && /.*usr.*/g.test(result.stdout)
-      if (e5) {
-        const msg = "> xcode-select command line tools is installed. checking the version...\r\n"
+
+      if (cltStatus.valid) {
+        const msg = `> command line tools detected at ${cltStatus.path} (pkg ${cltStatus.pkgVersion}, xcode-select ${cltStatus.xcodeSelectVersion}). skipping...\r\n`
         console.log(msg)
         ondata({ raw: msg })
-        // check the version.
-        // if it's not valid, install the latest
-        // if it's valid, skip
-        let e4;
-        let result = await this.kernel.bin.exec({ message: "xcode-select --version" }, (stream) => {
-          ondata(stream)
-        })
-        if (result && result.stdout) {
-          e4 = /xcode-select version ([0-9]+)/gi.exec(result.stdout)
-          if (e4.length > 1) {
-            let version = Number(e4[1]) 
-            console.log("xcode-select version", version)
-            if (version >= 2349) {
-              e4 = true
-            } else {
-              e4 = false
-            }
-          } else {
-            e4 = false
-          }
-        } else {
-          e4 = false
-        }
-        console.log("> e4", e4)
-
-
-        // valid version installed => skip
-        if (e4) {
-          const msg = "> a valid version command line tools already installed. skipping...\r\n"
-          console.log(msg)
-          ondata({ raw: msg })
-        } else {
-          const msg = "> valid version command line tools NOT installed.\r\n"
-          console.log(msg)
-          ondata({ raw: msg })
-          await this._install(req, ondata)
-        }
       } else {
-        // not installed. install
-        const msg = "> command line tools not installed yet. install the latest xcode build tools...\r\n"
+        const msg = `> ${cltStatus.reason || "command line tools not installed yet."} install the latest xcode build tools...\r\n`
         console.log(msg)
         ondata({ raw: msg })
         await this._install(req, ondata)
       }
-
-      //ondata({ raw: "Setting CommandLineTools path...\r\n" })
-      //await this.kernel.bin.exec({ sudo: true, message: "xcode-select -switch /Library/Developer/CommandLineTools" }, (stream) => { ondata(stream) })
     }
 //
     ondata({ raw: "installing gettext\r\n" })

package/kernel/bin/index.js

@@ -21,6 +21,7 @@ const LLVM = require('./llvm')
 const VS = require("./vs")
 const Cuda = require("./cuda")
 const Torch = require("./torch")
+const { detectCommandLineTools } = require('./xcode-tools')
 const { glob } = require('glob')
 const fakeUa = require('fake-useragent');
 const fse = require('fs-extra')
@@ -461,36 +462,11 @@ class Bin {
 
       // check brew_installed
       let e = await this.kernel.bin.exists("homebrew")
-      let { stdout }= await this.exec({ message: "xcode-select -p", conda: { skip: true } }, (stream) => { })
-      let e2 = /(.*Library.*Developer.*CommandLineTools.*|.*Xcode.*Developer.*)/gi.test(stdout)
-      let e3 = await this.kernel.exists("/Library/Developer/CommandLineTools")
-
-      // if xcode-select version exists
-      // - if version is greater thatn 2349 => yes
-      // - if version lower than 2349 => no
-      // if xcode-select version doesn't match
-      // - no
-
-      let e4;
-      let result = await this.exec({ message: "xcode-select --version", conda: { skip: true } }, (stream) => { })
-      if (result && result.stdout) {
-        e4 = /xcode-select version ([0-9]+)/gi.exec(result.stdout)
-        if (e4 && e4.length > 1) {
-          let version = Number(e4[1]) 
-//          console.log("xcode-select version", version)
-          if (version >= 2349) {
-            e4 = true
-          } else {
-            e4 = false
-          }
-        } else {
-          e4 = false
-        }
-      } else {
-        e4 = false
-      }
-      console.log("BREW CHECK", { e, e2, e3, e4 })
-      this.brew_installed = e && e2 && e3 && e4
+      const cltStatus = await detectCommandLineTools({
+        exec: (params) => this.exec(params, () => {})
+      })
+      console.log("BREW CHECK", { homebrew: e, cltStatus })
+      this.brew_installed = e && cltStatus.valid
 
     }
 

package/kernel/bin/xcode-tools.js

@@ -0,0 +1,136 @@
+const fs = require('fs')
+const path = require('path')
+
+const MIN_XCODESELECT_VERSION = 2349
+const REQUIRED_BINARIES = [
+  ["usr", "bin", "clang"],
+  ["usr", "bin", "git"]
+]
+const CLT_PACKAGE_IDS = [
+  "com.apple.pkg.CLTools_Executables",
+  "com.apple.pkg.DeveloperToolsCLI"
+]
+
+async function detectCommandLineTools({ exec }) {
+  if (typeof exec !== 'function') {
+    throw new Error('detectCommandLineTools requires an exec function')
+  }
+
+  const run = (message) => exec({ message, conda: { skip: true } })
+
+  const status = { valid: false }
+  let pathResult
+
+  try {
+    pathResult = await run('xcode-select -p')
+  } catch (err) {
+    status.reason = 'xcode-select -p failed'
+    return status
+  }
+
+  const developerPath = extractDeveloperPath(pathResult && pathResult.stdout)
+  if (!developerPath) {
+    status.rawPathOutput = pathResult ? pathResult.stdout : ''
+    status.reason = 'unable to parse developer path from xcode-select output'
+    return status
+  }
+  status.path = developerPath
+
+  try {
+    const stat = await fs.promises.stat(developerPath)
+    if (!stat.isDirectory()) {
+      status.reason = `${developerPath} is not a directory`
+      return status
+    }
+  } catch (err) {
+    status.reason = `developer path ${developerPath} is not accessible`
+    return status
+  }
+
+  try {
+    for (const rel of REQUIRED_BINARIES) {
+      const binaryPath = path.join(developerPath, ...rel)
+      await fs.promises.access(binaryPath, fs.constants.X_OK)
+    }
+  } catch (err) {
+    status.reason = 'required developer binaries are missing'
+    return status
+  }
+
+  const pkgInfo = await readCommandLineToolsPkgVersion(run)
+  if (!pkgInfo) {
+    status.reason = 'unable to read command line tools package info'
+    return status
+  }
+  status.pkgVersion = pkgInfo.version
+
+  const selectInfo = await readXcodeSelectVersion(run)
+  status.xcodeSelectVersion = selectInfo.version
+  if (!selectInfo.valid) {
+    status.reason = selectInfo.reason || 'xcode-select version below minimum'
+    return status
+  }
+
+  status.valid = true
+  return status
+}
+
+async function readCommandLineToolsPkgVersion(exec) {
+  for (const pkgId of CLT_PACKAGE_IDS) {
+    try {
+      const result = await exec(`pkgutil --pkg-info=${pkgId}`)
+      if (result && result.stdout) {
+        const match = /version:\s*([^\n]+)/i.exec(result.stdout)
+        if (match) {
+          return { pkgId, version: match[1].trim() }
+        }
+      }
+    } catch (err) {
+      // pkg not installed, try next id
+    }
+  }
+  return null
+}
+
+async function readXcodeSelectVersion(exec) {
+  let result
+  try {
+    result = await exec('xcode-select --version')
+  } catch (err) {
+    return { valid: false, reason: 'xcode-select --version failed' }
+  }
+
+  const match = result && result.stdout && /xcode-select version\s+(\d+)/i.exec(result.stdout)
+  if (!match) {
+    return { valid: false, reason: 'unable to parse xcode-select version' }
+  }
+
+  const numericVersion = Number(match[1])
+  return {
+    valid: numericVersion >= MIN_XCODESELECT_VERSION,
+    version: numericVersion
+  }
+}
+
+module.exports = {
+  detectCommandLineTools,
+  MIN_XCODESELECT_VERSION
+}
+
+function extractDeveloperPath(stdout) {
+  if (!stdout) {
+    return null
+  }
+
+  const lines = stdout.split(/\r?\n/)
+  for (const raw of lines) {
+    const line = raw.trim()
+    if (!line) {
+      continue
+    }
+    if (line.startsWith('/')) {
+      return line
+    }
+  }
+  return null
+}

package/package.json

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

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

@@ -52,9 +52,25 @@ body.dark .tab-link-popover .tab-link-popover-header {
   background: transparent;
   cursor: pointer;
 }
-.tab-link-popover .tab-link-popover-item.qr-inline { flex-direction: row; align-items: center; gap: 10px; }
-.tab-link-popover .tab-link-popover-item.qr-inline .textcol { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
-.tab-link-popover .tab-link-popover-item.qr-inline .qr { width: 64px; height: 64px; image-rendering: pixelated; flex: 0 0 auto; margin-left: auto; }
+.tab-link-popover .tab-link-popover-item.qr-inline {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 12px;
+}
+.tab-link-popover .tab-link-popover-item.qr-inline .textcol {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.tab-link-popover .tab-link-popover-item.qr-inline .qr {
+  width: 128px;
+  height: 128px;
+  image-rendering: pixelated;
+  flex: 0 0 auto;
+  margin-left: auto;
+}
 .tab-link-popover .tab-link-popover-item:hover,
 .tab-link-popover .tab-link-popover-item:focus-visible {
   background: rgba(15, 23, 42, 0.06);

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

@@ -272,8 +272,8 @@
       const parsed = new URL(value, location.origin)
       const host = parsed.host
       const pathname = parsed.pathname || "/"
-      const search = parsed.search || ""
-      return `${host}${pathname}${search}`
+      const hash = parsed.hash || ""
+      return `${host}${pathname}${hash}`
     } catch (_) {
       return value
     }
@@ -1237,22 +1237,32 @@
     popover.style.display = "flex"
     popover.classList.add("visible")
     popover.style.visibility = "hidden"
+    popover.style.maxHeight = ""
+    popover.style.overflowY = ""
 
     const popoverWidth = popover.offsetWidth
-    const popoverHeight = popover.offsetHeight
+    let popoverHeight = popover.offsetHeight
+    const viewportPadding = 12
+    const availableHeight = Math.max(80, window.innerHeight - viewportPadding * 2)
+
+    if (popoverHeight > availableHeight) {
+      popover.style.maxHeight = `${Math.round(availableHeight)}px`
+      popover.style.overflowY = "auto"
+      popoverHeight = Math.min(availableHeight, popover.offsetHeight)
+    }
 
     let left = rect.left
     let top = rect.bottom + 8
 
-    if (left + popoverWidth > window.innerWidth - 12) {
-      left = window.innerWidth - popoverWidth - 12
+    if (left + popoverWidth > window.innerWidth - viewportPadding) {
+      left = window.innerWidth - popoverWidth - viewportPadding
     }
-    if (left < 12) {
-      left = 12
+    if (left < viewportPadding) {
+      left = viewportPadding
     }
 
-    if (top + popoverHeight > window.innerHeight - 12) {
-      top = Math.max(12, rect.top - popoverHeight - 8)
+    if (top + popoverHeight > window.innerHeight - viewportPadding) {
+      top = Math.max(viewportPadding, rect.top - popoverHeight - 8)
     }
 
     popover.style.left = `${Math.round(left)}px`
@@ -1521,6 +1531,7 @@
       const valueSpan = document.createElement("span")
       valueSpan.className = "value"
       valueSpan.textContent = entry.display
+      valueSpan.title = entry.url
 
       if (entry.type === 'http' && entry.qr === true) {
         item.className = "tab-link-popover-item qr-inline"
@@ -1608,10 +1619,14 @@
     hideTabLinkPopover({ immediate: true })
   }
 
-  window.addEventListener("scroll", () => {
-    if (tabLinkPopoverEl && tabLinkPopoverEl.classList.contains("visible")) {
-      hideTabLinkPopover({ immediate: true })
+  window.addEventListener("scroll", (event) => {
+    if (!tabLinkPopoverEl || !tabLinkPopoverEl.classList.contains("visible")) {
+      return
+    }
+    if (event && event.target && tabLinkPopoverEl.contains(event.target)) {
+      return
     }
+    hideTabLinkPopover({ immediate: true })
   }, true)
 
   window.addEventListener("resize", () => {

package/server/views/connect/huggingface.ejs

@@ -7,9 +7,6 @@
     <style>
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            max-width: 600px;
-            margin: 50px auto;
-            padding: 20px;
             background: #f8fafc;
         }
         .container {

package/server/views/connect/index.ejs

@@ -4,16 +4,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><%=name%> OAuth</title>
+    <link href="/xterm.min.css" rel="stylesheet" />
     <link href="/css/fontawesome.min.css" rel="stylesheet">
     <link href="/css/solid.min.css" rel="stylesheet">
     <link href="/css/regular.min.css" rel="stylesheet">
     <link href="/css/brands.min.css" rel="stylesheet">
+    <link href="/markdown.css" rel="stylesheet"/>
+    <link href="/noty.css" rel="stylesheet"/>
+    <link href="/style.css" rel="stylesheet"/>
+    <% if (agent === "electron") { %>
+      <link href="/electron.css" rel="stylesheet"/>
+    <% } %>
     <style>
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            max-width: 600px;
-            margin: 50px auto;
-            padding: 20px;
             background: #f8fafc;
         }
         /*
@@ -24,6 +28,14 @@
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
         */
+        .container {
+            background: white;
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
         h1 {
             text-transform: capitalize;
             color: #1f2937;
@@ -79,6 +91,47 @@
         .status.error { background: #fee2e2; color: #991b1b; }
         .status.warning { background: #fef3c7; color: #92400e; }
         .hidden { display: none; }
+        .loader-overlay {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: rgba(248, 250, 252, 0.95);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 16px;
+          z-index: 999;
+        }
+        .loader-overlay.hidden {
+          display: none;
+        }
+        .loader-spinner {
+          width: 48px;
+          height: 48px;
+          border: 4px solid #e5e7eb;
+          border-top: 4px solid #ff6b35;
+          border-radius: 50%;
+          animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+        .loader-message {
+          font-size: 16px;
+          color: #374151;
+          text-align: center;
+        }
+        .loader-cancel {
+          background: transparent;
+          border: 1px solid #6b7280;
+          color: #374151;
+          padding: 8px 16px;
+          border-radius: 6px;
+          cursor: pointer;
+        }
         .profile {
           width: 400px;
           display: flex;
@@ -96,9 +149,17 @@
         }
         header {
           text-align: center;
-          padding: 50px;
           letter-spacing: -1px;
         }
+        header.head {
+          max-width: 600px;
+          margin: 0 auto;
+          padding: 50px;
+          text-align: center;
+        }
+        header.head h1 {
+          justify-content: center;
+        }
         .logos {
           display: flex;
           justify-content: center;
@@ -118,9 +179,40 @@
           font-size: 14px;
         }
     </style>
+<script src="/popper.min.js"></script>
+<script src="/tippy-bundle.umd.min.js"></script>
+<script src="/hotkeys.min.js"></script>
+<script src="/sweetalert2.js"></script>
+<script src="/nav.js"></script>
 </head>
-<body>
-    <header>
+<body class='<%=theme%>' data-agent="<%=agent%>">
+    <header class="navheader grabbable">
+      <h1>
+        <a class="home" href="/home"><img class="icon" src="/pinokio-black.png"></a>
+        <button class="btn2" id="minimize-header" data-tippy-content="fullscreen" title="fullscreen">
+          <div><i class="fa-solid fa-expand"></i></div>
+        </button>
+        <button class="btn2" id="back" data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
+        <button class="btn2" id="forward" data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
+        <button class="btn2" id="refresh-page" data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
+        <button class="btn2" id="screenshot" data-tippy-content="screen capture"><i class="fa-solid fa-camera"></i></button>
+        <button class="btn2" id="inspector" data-tippy-content="X-ray mode"><i class="fa-solid fa-eye"></i></button>
+        <div class="flexible"></div>
+        <a class="btn2" href="/columns" data-tippy-content="split into 2 columns">
+          <div><i class="fa-solid fa-table-columns"></i></div>
+        </a>
+        <a class="btn2" href="/rows" data-tippy-content="split into 2 rows">
+          <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
+        </a>
+        <button class="btn2" id="new-window" data-tippy-content="open a new window" title="open a new window" data-agent="web">
+          <div><i class="fa-solid fa-plus"></i></div>
+        </button>
+        <button class="btn2 hidden" id="close-window" data-tippy-content="close this section">
+          <div><i class="fa-solid fa-xmark"></i></div>
+        </button>
+      </h1>
+    </header>
+    <header class='head'>
       <div class='logos'>
         <img class='logo' src="/pinokio-black.png"/>
         <div>+</div>
@@ -135,33 +227,228 @@
       <h1><%=name%> Connect</h1>
     </header>
     <div class="container">
-        <% if (protocol === "https") { %>
-          <div id="status" class="status warning">
-              Checking authentication status...
-          </div>
-          
-          <!-- Login Section -->
-          <div id="login-section">
-            <p>Click below to authenticate with <%=name%>:</p>
-            <button class="btn" onclick="login()">Login</button>
-          </div>
-          
-          <!-- User Section -->
-          <div id="user-section" class="hidden">
-              <div class="user-info">
-                  <h3>Logged In</h3>
-                  <div id="user-details"></div>
-                  <button class="btn secondary" onclick="logout()">Logout</button>
-              </div>
-          </div>
-        <% } else { %>
-          <a class='btn' href="https://pinokio.localhost/connect/<%=name%>">Get started<a>
-        <% } %>
-        
+        <div id="status" class="status hidden">
+        </div>
+
+        <div id="login-section" class="hidden">
+          <p>Click below to authenticate with <%=name%>:</p>
+          <button class="btn" id="login-button">Login</button>
+        </div>
+
+        <div id="http-section" class="hidden">
+          <p>Click below to open the secure connection flow:</p>
+          <button class='btn' id="get-started-button">Get started</button>
+        </div>
+
+        <div id="user-section" class="hidden">
+            <div class="user-info">
+                <h3>Logged In</h3>
+                <div id="user-details"></div>
+                <button class="btn secondary" onclick="logout()">Logout</button>
+            </div>
+        </div>
+
+    </div>
+
+    <div id="connect-loader" class="loader-overlay hidden">
+      <div class="loader-spinner"></div>
+      <div id="loader-message" class="loader-message">Connecting...</div>
+      <button id="loader-cancel" class="loader-cancel hidden">Cancel</button>
     </div>
 
-    <% if (protocol === "https") { %>
     <script>
+        const CONNECT_NAME = "<%=name%>"
+        const isSecureConnectContext = window.location.protocol === 'https:' && window.location.hostname === 'pinokio.localhost'
+        const statusElement = document.getElementById('status')
+        const loaderElement = document.getElementById('connect-loader')
+        const loaderMessageElement = document.getElementById('loader-message')
+        const loaderCancelButton = document.getElementById('loader-cancel')
+        const loginSection = document.getElementById('login-section')
+        const loginButton = document.getElementById('login-button')
+        const httpSection = document.getElementById('http-section')
+        const userSection = document.getElementById('user-section')
+        const userDetailsElement = document.getElementById('user-details')
+        const CONNECT_PROFILE_URL = `/connect/${CONNECT_NAME}/profile`
+        const CONNECT_LOGOUT_URL = `/connect/${CONNECT_NAME}/logout`
+        let loaderCancelHandler = null
+
+        function setStatus(message, type = 'warning') {
+            if (!statusElement) return
+            if (type === 'hidden') {
+                statusElement.textContent = message || ''
+                statusElement.className = 'status hidden'
+                return
+            }
+            statusElement.textContent = message
+            statusElement.className = `status ${type}`
+            statusElement.classList.remove('hidden')
+        }
+
+        function showLoader(message = 'Connecting...', options = {}) {
+            if (!loaderElement) return
+            loaderElement.classList.remove('hidden')
+            if (loaderMessageElement) {
+                loaderMessageElement.textContent = message
+            }
+            if (loaderCancelButton) {
+                if (options.cancellable) {
+                    loaderCancelHandler = typeof options.onCancel === 'function' ? options.onCancel : null
+                    loaderCancelButton.classList.remove('hidden')
+                    loaderCancelButton.onclick = () => {
+                        if (loaderCancelHandler) {
+                            loaderCancelHandler()
+                        } else {
+                            hideLoader()
+                        }
+                    }
+                } else {
+                    loaderCancelButton.classList.add('hidden')
+                    loaderCancelButton.onclick = null
+                    loaderCancelHandler = null
+                }
+            }
+        }
+
+        function hideLoader() {
+            if (!loaderElement) return
+            loaderElement.classList.add('hidden')
+            if (loaderCancelButton) {
+                loaderCancelButton.classList.add('hidden')
+                loaderCancelButton.onclick = null
+            }
+            loaderCancelHandler = null
+        }
+
+        function configureInitialView() {
+            if (isSecureConnectContext) {
+                if (loginSection) {
+                    loginSection.classList.remove('hidden')
+                }
+                if (httpSection) {
+                    httpSection.classList.add('hidden')
+                }
+                setStatus('Checking authentication status...', 'warning')
+            } else {
+                if (loginSection) {
+                    loginSection.classList.add('hidden')
+                }
+                if (httpSection) {
+                    httpSection.classList.remove('hidden')
+                }
+                setStatus('', 'hidden')
+            }
+        }
+
+        async function ensureValidToken() {
+            try {
+                const res = await fetch(`/connect/${CONNECT_NAME}/keys`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({})
+                })
+                const json = await res.json()
+                if (json && json.access_token && !json.error) {
+                    return json.access_token
+                }
+                return null
+            } catch (err) {
+                console.error('Failed to check connect status', err)
+                return null
+            }
+        }
+
+        async function fetchUserInfo(existingToken) {
+            try {
+                const token = existingToken || await ensureValidToken()
+                if (!token) {
+                    return false
+                }
+                await displayUserInfo()
+                return true
+            } catch (err) {
+                console.error('Failed to fetch user info', err)
+                setStatus('Failed to fetch user info: ' + err.message, 'error')
+                hideLoader()
+                return false
+            }
+        }
+
+        async function displayUserInfo() {
+            if (!userSection || !userDetailsElement) {
+                return
+            }
+            const res = await fetch(CONNECT_PROFILE_URL)
+            if (!res.ok) {
+                throw new Error('Profile fetch failed')
+            }
+            const profile = await res.json()
+            const rows = profile.items.map((row) => {
+                return `<tr><td>${row.key}</td><td>${row.val}</td></tr>`
+            }).join("")
+            userDetailsElement.innerHTML = `<div class="profile">
+              <img src="${profile.image}">
+              <div class='profile-column'>
+                <table>${rows}</table>
+              </div>
+            </div>`
+            if (loginSection) {
+                loginSection.classList.add('hidden')
+            }
+            if (httpSection) {
+                httpSection.classList.add('hidden')
+            }
+            userSection.classList.remove('hidden')
+            setStatus('', 'hidden')
+            hideLoader()
+        }
+
+        async function logout() {
+            try {
+                showLoader('Disconnecting...', { cancellable: false })
+                const res = await fetch(CONNECT_LOGOUT_URL, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({})
+                })
+                await res.json()
+                setStatus('Logged out', 'warning')
+            } catch (err) {
+                console.error('Failed to logout', err)
+                setStatus('Failed to logout: ' + err.message, 'error')
+            } finally {
+                hideLoader()
+                if (loginSection) {
+                    loginSection.classList.remove('hidden')
+                }
+                if (httpSection) {
+                    httpSection.classList.remove('hidden')
+                }
+                if (userSection) {
+                    userSection.classList.add('hidden')
+                }
+            }
+        }
+
+        configureInitialView()
+
+        if (loginButton) {
+            loginButton.addEventListener('click', () => {
+                if (typeof window.startOAuthLogin === 'function') {
+                    window.startOAuthLogin()
+                }
+            })
+        }
+
+        window.ensureValidToken = ensureValidToken
+        window.fetchUserInfo = fetchUserInfo
+        window.logout = logout
+        window.startOAuthLogin = () => {
+            console.warn('Login flow not available in this context')
+        }
+    </script>
+
+    <script>
+        if (isSecureConnectContext) {
 
         // Configuration
 
@@ -173,13 +460,6 @@
         const SCOPE = "<%=config.SCOPE%>"
         const name = "<%=name%>"
 
-        // Utility functions
-        function setStatus(message, type) {
-            const status = document.getElementById('status');
-            status.textContent = message;
-            status.className = `status ${type}`;
-        }
-
         function generateRandomString(length) {
             const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
             let result = '';
@@ -210,25 +490,11 @@
                 .replace(/=/g, '');
         }
 
-        // Token management with automatic refresh
-        async function ensureValidToken() {
-          const res = await fetch(`/connect/${name}/keys`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({})
-          });
-          const json = await res.json();
-          console.log({ json })
-          if (json && json.access_token) {
-            return json.access_token
-          } else {
-            return null
-          }
-        }
-
         // OAuth functions
         async function login() {
             try {
+                showLoader('Connecting...');
+                setStatus(`Redirecting to ${name}...`, 'warning');
                 // Clear existing data
                 localStorage.removeItem('oauth_state');
                 localStorage.removeItem('code_verifier');
@@ -260,11 +526,13 @@
                 
             } catch (error) {
                 console.error('Login error:', error);
+                hideLoader();
                 setStatus('Failed to start login', 'error');
             }
         }
 
         async function handleOAuthCallback(code) {
+            showLoader('Finishing connection...');
             try {
                 // Verify state
                 const urlParams = new URLSearchParams(window.location.search);
@@ -303,63 +571,19 @@
                     
                     // Get user info
                     await fetchUserInfo();
+                    setStatus('Connection complete. Refreshing...', 'success');
+                    window.location.reload();
                 } else {
                     throw new Error('No access token received');
                 }
                 
             } catch (error) {
                 console.error('OAuth callback error:', error);
+                hideLoader();
                 setStatus('Authentication failed: ' + error.message, 'error');
             }
         }
 
-        async function fetchUserInfo() {
-            try {
-                // Use ensureValidToken to automatically refresh if needed
-                const token = await ensureValidToken();
-                if (!token) {
-                    throw new Error('No valid token available');
-                }
-                console.log({ token })
-                await displayUserInfo()
-            } catch (error) {
-                console.error('Error fetching user info:', error);
-                setStatus('Failed to fetch user info: ' + error.message, 'error');
-//                logout();
-            }
-        }
-
-        async function displayUserInfo() {
-            const res = await fetch(`/connect/${name}/profile`)
-            const profile = await res.json();
-            const userDetails = document.getElementById('user-details');
-            let rows = profile.items.map((row) => {
-              return `<tr><td>${row.key}</td><td>${row.val}</td></tr>`
-            }).join("")
-            userDetails.innerHTML = `<div class="profile">
-              <img src="${profile.image}">
-              <div class='profile-column'>
-                <table>${rows}</table>
-              </div>
-            </div>`
-            document.getElementById('login-section').className = 'hidden';
-            document.getElementById('user-section').className = '';
-            setStatus("", "hidden")
-        }
-
-        async function logout() {
-            document.getElementById('login-section').className = '';
-            document.getElementById('user-section').className = 'hidden';
-            setStatus('Logged out', 'warning');
-            const res = await fetch('/connect/<%=name%>/logout', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({})
-            });
-            const json = await res.json();
-            location.href = location.href
-        }
-
         // Utility function for making authenticated API calls with automatic refresh
         async function makeAuthenticatedRequest(url, options = {}) {
             const token = await ensureValidToken();
@@ -395,7 +619,7 @@
             // Check existing session with automatic refresh
             const token = await ensureValidToken();
             if (token) {
-                await fetchUserInfo();
+                await fetchUserInfo(token);
             } else {
                 setStatus('Not authenticated', 'warning');
             }
@@ -404,7 +628,80 @@
         // Export makeAuthenticatedRequest for external use
         window.makeAuthenticatedRequest = makeAuthenticatedRequest;
         window.ensureValidToken = ensureValidToken;
+        window.startOAuthLogin = login;
+        }
+    </script>
+
+    <script>
+        if (!isSecureConnectContext) {
+        const SECURE_CONNECT_URL = 'https://pinokio.localhost/connect/<%=name%>'
+        const CONNECT_POLL_INTERVAL = 4000
+        const CONNECT_TIMEOUT = 120000
+        let connectPollTimer = null
+        let connectTimeoutHandle = null
+
+        function stopConnectPolling(message, type = 'warning') {
+            if (connectPollTimer) {
+                clearInterval(connectPollTimer)
+                connectPollTimer = null
+            }
+            if (connectTimeoutHandle) {
+                clearTimeout(connectTimeoutHandle)
+                connectTimeoutHandle = null
+            }
+            hideLoader()
+            if (message) {
+                setStatus(message, type)
+            }
+        }
+
+        async function pollConnectStatus() {
+            const token = await ensureValidToken()
+            if (token) {
+                if (connectPollTimer) {
+                    clearInterval(connectPollTimer)
+                    connectPollTimer = null
+                }
+                if (connectTimeoutHandle) {
+                    clearTimeout(connectTimeoutHandle)
+                    connectTimeoutHandle = null
+                }
+                await fetchUserInfo(token)
+                setStatus('Connected.', 'success')
+            }
+        }
+
+        function startHttpConnect() {
+            stopConnectPolling()
+            showLoader('Connecting... Complete the login in the secure window.', {
+                cancellable: true,
+                onCancel: () => stopConnectPolling('Connection cancelled.', 'warning')
+            })
+            setStatus('Waiting for connection...', 'warning')
+            const secureWindow = window.open(SECURE_CONNECT_URL, '_blank')
+            if (!secureWindow) {
+                window.location.href = SECURE_CONNECT_URL
+                return
+            }
+            pollConnectStatus()
+            connectPollTimer = setInterval(pollConnectStatus, CONNECT_POLL_INTERVAL)
+            connectTimeoutHandle = setTimeout(() => {
+                stopConnectPolling('Timed out waiting for connection. Please try again.', 'error')
+            }, CONNECT_TIMEOUT)
+        }
+
+        const getStartedButton = document.getElementById('get-started-button')
+        if (getStartedButton) {
+            getStartedButton.addEventListener('click', startHttpConnect)
+        }
+
+        window.addEventListener('load', async () => {
+            const token = await ensureValidToken()
+            if (token) {
+                await fetchUserInfo(token)
+            }
+        })
+        }
     </script>
-    <% } %>
 </body>
 </html>

package/server/views/connect.ejs

@@ -856,7 +856,7 @@ document.addEventListener('DOMContentLoaded', function() {
     <div class='tab-content'>
       <% items.forEach((item) => { %>
         <% if (item.profile) { %>
-          <a href="<%=item.url%>" class="tab connected" target="_blank">
+          <a href="<%=item.url%>" class="tab connected">
             <div class='tab'>
               <% if (item.image) { %>
                 <img class="app-icon" src="<%=item.image%>"/>
@@ -887,7 +887,7 @@ document.addEventListener('DOMContentLoaded', function() {
             </div>
           </a>
         <% } else { %>
-          <a href="<%=item.url%>" class="tab" target="_blank">
+          <a href="<%=item.url%>" class="tab">
             <% if (item.image) { %>
               <img class="icon" src="<%=item.image%>"/>
             <% } else if (item.icon) { %>