pinokiod 8.2.29 → 8.2.31

package/server/views/anywhere.ejs

@@ -40,8 +40,29 @@ body.dark .anywhere-card { border-color: rgba(255,255,255,0.1); background: rgba
 .anywhere-muted { opacity: 0.7; font-size: 13px; }
 .anywhere-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; align-items: start; }
 @media (max-width: 900px) { .anywhere-grid { grid-template-columns: 1fr; } }
-.anywhere-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
-.anywhere-qr img { width: 220px; height: 220px; border-radius: 8px; background: white; padding: 6px; }
+.anywhere-signout, .anywhere-linkbtn { background: none; border: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
+/* which device is connecting: a segmented control, the phone panel by default */
+.anywhere-segments { display: grid; grid-template-columns: 1fr 1fr; width: 100%; padding: 4px; border-radius: 12px; background: rgba(0,0,0,0.05); }
+body.dark .anywhere-segments { background: rgba(255,255,255,0.08); }
+.anywhere-segments label { position: relative; display: block; }
+.anywhere-segments input { position: absolute; opacity: 0; width: 0; height: 0; }
+.anywhere-segments span { display: block; text-align: center; padding: 9px 12px; border-radius: 9px; font-size: 14px; cursor: pointer; opacity: 0.7; transition: opacity 0.15s; }
+.anywhere-segments span:hover { opacity: 1; }
+.anywhere-segments input:checked + span { background: white; font-weight: bold; opacity: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
+body.dark .anywhere-segments input:checked + span { background: rgba(255,255,255,0.16); box-shadow: none; }
+.anywhere-segments input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 1px; }
+#anywhere-connect[data-device=phone] [data-panel=computer], #anywhere-connect[data-device=computer] [data-panel=phone] { display: none; }
+#anywhere-connect [data-panel] { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
+#anywhere-connect [data-panel] p { margin: 0; max-width: 360px; font-size: 15px; line-height: 1.5; }
+#anywhere-connect [data-panel=computer] { padding-top: 10px; }
+.anywhere-warning { padding: 10px 14px; border-radius: 8px; background: rgba(255,140,0,0.14); font-size: 13px; line-height: 1.5; margin: 16px 0 0; }
+.anywhere-warning a { color: inherit; }
+.anywhere-connect-card { max-width: 440px; padding: 22px 24px 24px; }
+.anywhere-connect-title { text-align: center; font-size: 17px; margin: 0 0 14px; }
+.anywhere-qr { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
+.anywhere-qr img { width: 212px; height: 212px; border-radius: 14px; background: white; padding: 12px; border: 1px solid rgba(0,0,0,0.08); margin-top: 4px; }
+body.dark .anywhere-qr img { border-color: transparent; }
+.anywhere-qr > .anywhere-muted { font-size: 12px; margin-top: 2px; }
 .anywhere-address {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 15px; word-break: break-all;
@@ -76,9 +97,7 @@ body.dark .anywhere-row { border-top-color: rgba(255,255,255,0.06); }
 .anywhere-row a.remote { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: royalblue; text-decoration: none; word-break: break-all; }
 .anywhere-dot { width: 9px; height: 9px; border-radius: 50%; background: silver; flex-shrink: 0; }
 .anywhere-dot.online { background: yellowgreen; }
-.anywhere-steps { padding-left: 20px; margin: 8px 0; }
-.anywhere-steps li { margin: 6px 0; line-height: 1.5; }
-.anywhere-waiting { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: rgba(255,200,0,0.15); font-size: 13px; }
+.anywhere-waiting { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,200,0,0.15); font-size: 12px; }
 .anywhere-waiting.joined { background: rgba(154,205,50,0.2); }
 .anywhere-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 12px; border-radius: 8px; background: rgba(0,0,0,0.05); }
 body.dark .anywhere-switch { background: rgba(255,255,255,0.08); }
@@ -170,7 +189,8 @@ document.addEventListener('DOMContentLoaded', function() {
         <div class='anywhere-state' data-state='login'>
           <div class='anywhere-card'>
             <h2>Sign in in your browser</h2>
-            <p>Remote access uses <b>Tailscale</b>, a free private network. Sign in with a <b>personal</b> Google, Apple, GitHub or Microsoft account. Use the same account on every device you want to connect.</p>
+            <p>Remote uses <b>Tailscale</b>, a free private network. Sign in with a <b>personal</b> Google, Apple, GitHub or Microsoft account. Use the same account on every device you want to connect.</p>
+            <p>After signing in you may be asked to approve one thing. Both happen in your browser.</p>
             <p><a class='anywhere-btn' id='anywhere-login-link' href='#' target='_blank' rel='noopener'><i class="fa-solid fa-arrow-up-right-from-square"></i> Sign in with Tailscale</a></p>
             <p class='anywhere-muted'>Waiting for you to finish signing in… <span id='anywhere-login-url' class='anywhere-muted'></span></p>
           </div>
@@ -186,11 +206,12 @@ document.addEventListener('DOMContentLoaded', function() {
 
         <div class='anywhere-state' data-state='https'>
           <div class='anywhere-card'>
-            <h2>One more click: enable HTTPS</h2>
-            <p id='anywhere-approval-text'>Tailscale needs your permission once to issue HTTPS certificates for your network. Apps need HTTPS for things like camera and microphone access in your browser.</p>
-            <p><a class='anywhere-btn' id='anywhere-approval-link' href='#' target='_blank' rel='noopener'><i class="fa-solid fa-lock"></i> Enable HTTPS</a>
+            <h2>One more approval</h2>
+            <p>A one-time approval so your devices can connect securely. It opens in your browser; if it didn't, use the button.</p>
+            <p id='anywhere-approval-text' class='anywhere-muted'></p>
+            <p><a class='anywhere-btn' id='anywhere-approval-link' href='#' target='_blank' rel='noopener'><i class="fa-solid fa-lock"></i> Approve in Tailscale</a>
                <a class='anywhere-btn secondary' href='https://login.tailscale.com/admin/dns' target='_blank' rel='noopener'>Open DNS settings</a></p>
-            <p class='anywhere-muted'>Waiting for HTTPS to be enabled… (in the admin console: DNS → HTTPS Certificates → Enable)</p>
+            <p class='anywhere-muted'>Waiting for the approval… (in the admin console: DNS → HTTPS Certificates → Enable)</p>
           </div>
         </div>
 
@@ -203,29 +224,33 @@ document.addEventListener('DOMContentLoaded', function() {
         </div>
 
         <div class='anywhere-state' data-state='ready'>
+          <div class='anywhere-warning' id='anywhere-expiry-warning' hidden></div>
           <div class='anywhere-grid'>
-            <div class='anywhere-card'>
-              <h2>Connect another device</h2>
-              <div class='anywhere-qr'>
-                <img id='anywhere-qr' alt='QR code to connect' src=''>
-                <div class='anywhere-address'><a id='anywhere-address' href='#' target='_blank' rel='noopener'></a></div>
-                <button type='button' class='anywhere-btn secondary anywhere-copy' id='anywhere-copy' disabled><i class='fa-regular fa-copy' aria-hidden='true'></i> Copy URL</button>
-                <div id='anywhere-copy-status' class='anywhere-muted' role='status' aria-live='polite'></div>
-                <div id='anywhere-copy-manual' class='anywhere-copy-manual' hidden>
-                  <input id='anywhere-copy-value' type='text' readonly aria-label='Remote URL' aria-describedby='anywhere-copy-status'>
+            <div class='anywhere-card anywhere-connect-card'>
+              <h2 class='anywhere-connect-title'>Connect a device</h2>
+              <div class='anywhere-qr' id='anywhere-connect' data-device='phone'>
+                <div class='anywhere-segments'>
+                  <label><input type='radio' name='anywhere-device' value='phone' checked><span>Phone or tablet</span></label>
+                  <label><input type='radio' name='anywhere-device' value='computer'><span>Another computer</span></label>
                 </div>
-                <div class='anywhere-muted'>signed in as <b id='anywhere-account'></b></div>
+                <div data-panel='phone'>
+                  <img id='anywhere-qr' alt='QR code to connect' src=''>
+                  <p>Scan with your phone. It walks you through the rest.</p>
+                </div>
+                <div data-panel='computer'>
+                  <p>Open this link on the other computer. It walks you through installing Tailscale and signing in as <b class='anywhere-account-inline'></b>, then opens this Pinokio.</p>
+                  <div class='anywhere-address'><a id='anywhere-address' href='#' target='_blank' rel='noopener'></a></div>
+                  <p><button type='button' class='anywhere-btn secondary anywhere-copy' id='anywhere-copy' disabled><i class='fa-regular fa-copy' aria-hidden='true'></i> Copy link</button></p>
+                  <div id='anywhere-copy-status' class='anywhere-muted' role='status' aria-live='polite'></div>
+                  <div id='anywhere-copy-manual' class='anywhere-copy-manual' hidden>
+                    <input id='anywhere-copy-value' type='text' readonly aria-label='Remote link' aria-describedby='anywhere-copy-status'>
+                  </div>
+                </div>
+                <div class='anywhere-muted'>signed in as <b id='anywhere-account'></b> · <button type='button' class='anywhere-signout' data-action='logout'>Sign out</button></div>
                 <div class='anywhere-waiting' id='anywhere-waiting'><i class="fa-solid fa-circle-notch fa-spin"></i> Waiting for another device to join…</div>
               </div>
-              <h3>Steps</h3>
-              <ol class='anywhere-steps'>
-                <li>Install <b>Tailscale</b> on the computer, phone, or tablet you want to connect from.</li>
-                <li>Sign in with <b class='anywhere-account-inline'></b> and turn the connection on.</li>
-                <li>On that device, scan the QR code or open the address above in a browser.</li>
-              </ol>
-              <p class='anywhere-muted'>Bookmark the address for quick access. On a phone or tablet, you can also use <i>Add to Home Screen</i>.</p>
             </div>
-            <div>
+            <div id='anywhere-details' hidden>
               <div class='anywhere-card'>
                 <h2>Running apps</h2>
                 <p class='anywhere-muted'>Every app Pinokio launches gets its own address automatically. Entries disappear when an app stops.</p>
@@ -233,6 +258,13 @@ document.addEventListener('DOMContentLoaded', function() {
                 <h3>Published addresses</h3>
                 <div id='anywhere-ports' class='anywhere-muted'></div>
               </div>
+              <% if (locals.loopback) { %>
+              <div class='anywhere-card'>
+                <h2>Your other Pinokios</h2>
+                <p class='anywhere-muted'>Computers on your network with Remote on. They open through this Pinokio; nothing else to install.</p>
+                <div id='anywhere-others'><p class='anywhere-muted'>Looking…</p></div>
+              </div>
+              <% } %>
               <div class='anywhere-card'>
                 <h2>Devices on your network</h2>
                 <div id='anywhere-peers'></div>
@@ -246,7 +278,6 @@ document.addEventListener('DOMContentLoaded', function() {
                   <dt>Daemon</dt><dd id='anywhere-version'></dd>
                 </dl>
                 <p style='margin-top:14px'>
-                  <button class='anywhere-btn secondary' data-action='logout'><i class="fa-solid fa-right-from-bracket"></i> Sign out / switch account</button>
                   <button class='anywhere-btn secondary' data-action='stop'><i class="fa-solid fa-power-off"></i> Turn off</button>
                 </p>
               </div>
@@ -274,15 +305,18 @@ document.addEventListener('DOMContentLoaded', function() {
   let current = <%- JSON.stringify(status || {}).replace(/</g, '\\u003c') %>
   let busy = false
   let copying = false
+  // the approval URL opened without a click, kept for the window so a reload does not open it again
+  let approvalOpened = null
+  try { approvalOpened = sessionStorage.getItem('anywhere-approval-opened') } catch (_) { /* storage unavailable: once per page load */ }
 
   copyButton.addEventListener('click', async () => {
-    const url = current.address
+    const url = current.connectUrl
     if (copying || current.phase !== 'ready' || !url) return
     const previousFocus = document.activeElement
     copying = true
     copyButton.disabled = true
     copyStatus.textContent = 'Copying…'
-    const stillCurrent = () => current.phase === 'ready' && current.address === url
+    const stillCurrent = () => current.phase === 'ready' && current.connectUrl === url
     let copied = false
     try {
       // Call directly from the click: Safari requires a user gesture.
@@ -295,7 +329,7 @@ document.addEventListener('DOMContentLoaded', function() {
       if (!copied) {
         copyValue.value = url
         copyManual.hidden = false
-        copyStatus.textContent = 'Automatic copy is unavailable. Touch and hold the URL to copy it, or press Ctrl+C / ⌘C.'
+        copyStatus.textContent = 'Automatic copy is unavailable. Touch and hold the link to copy it, or press Ctrl+C / ⌘C.'
         try {
           copyValue.focus({ preventScroll: true })
           copyValue.select()
@@ -305,11 +339,11 @@ document.addEventListener('DOMContentLoaded', function() {
       }
       if (copied) {
         copyManual.hidden = true
-        copyStatus.textContent = 'URL copied.'
+        copyStatus.textContent = 'Link copied.'
       }
     }
     copying = false
-    copyButton.disabled = current.phase !== 'ready' || !current.address
+    copyButton.disabled = current.phase !== 'ready' || !current.connectUrl
     if (copied && stillCurrent() && previousFocus &&
         (document.activeElement === copyValue || document.activeElement === document.body)) {
       previousFocus.focus({ preventScroll: true })
@@ -325,12 +359,12 @@ document.addEventListener('DOMContentLoaded', function() {
       window.open(href, '_blank')
     }
   }
+  const daysUntil = (value) => value ? Math.round((new Date(value).getTime() - Date.now()) / 86400000) : NaN
   const formatDate = (value) => {
     if (!value) return '—'
     try {
-      const d = new Date(value)
-      const days = Math.round((d.getTime() - Date.now()) / 86400000)
-      return d.toLocaleDateString() + (days >= 0 ? ` (in ${days} day${days === 1 ? '' : 's'})` : ' (expired)')
+      const days = daysUntil(value)
+      return new Date(value).toLocaleDateString() + (days >= 0 ? ` (in ${days} day${days === 1 ? '' : 's'})` : ' (expired)')
     } catch (e) { return String(value) }
   }
   const osIcon = (os) => {
@@ -351,12 +385,12 @@ document.addEventListener('DOMContentLoaded', function() {
   }
 
   const render = (status) => {
-    if (current.address !== (status || {}).address || current.phase !== (status || {}).phase) {
+    if (current.connectUrl !== (status || {}).connectUrl || current.phase !== (status || {}).phase) {
       copyManual.hidden = true
       copyStatus.textContent = ''
     }
     current = status || {}
-    copyButton.disabled = copying || current.phase !== 'ready' || !current.address
+    copyButton.disabled = copying || current.phase !== 'ready' || !current.connectUrl
     const phase = current.phase && current.phase !== 'setup' ? current.phase : 'starting'
     const on = !!current.enabled && phase !== 'off' && phase !== 'setup'
     switchEl.dataset.on = on ? 'true' : 'false'
@@ -373,8 +407,12 @@ document.addEventListener('DOMContentLoaded', function() {
       const link = document.getElementById('anywhere-approval-link')
       const url = current.approval && current.approval.url
       link.href = url || 'https://login.tailscale.com/admin/dns'
-      if (current.approval && current.approval.text) {
-        document.getElementById('anywhere-approval-text').textContent = current.approval.text
+      document.getElementById('anywhere-approval-text').textContent = (current.approval && current.approval.text) || ''
+      // one browser trip: the approval follows sign-in without another click; the button stays for a blocked popup
+      if (url && approvalOpened !== url) {
+        approvalOpened = url
+        try { sessionStorage.setItem('anywhere-approval-opened', url) } catch (_) { /* same */ }
+        openExternal(url)
       }
     }
     if (phase === 'error') {
@@ -384,9 +422,10 @@ document.addEventListener('DOMContentLoaded', function() {
     if (phase === 'ready') {
       const qr = document.getElementById('anywhere-qr')
       if (current.qr && qr.getAttribute('src') !== current.qr) qr.src = current.qr
-      const address = document.getElementById('anywhere-address')
-      address.textContent = (current.address || '').replace(/^https?:\/\//, '')
-      address.href = current.address || '#'
+      // the same link the QR carries; its fragment holds the address and account, so the text stops at the hash
+      const link = document.getElementById('anywhere-address')
+      link.textContent = (current.connectUrl || '').replace(/^https?:\/\//, '').replace(/#.*$/, '#…')
+      link.href = current.connectUrl || '#'
       const email = current.account && current.account.email ? current.account.email : ''
       document.getElementById('anywhere-account').textContent = email
       for (const el of document.querySelectorAll('.anywhere-account-inline')) el.textContent = email
@@ -399,6 +438,16 @@ document.addEventListener('DOMContentLoaded', function() {
         waiting.classList.remove('joined')
         waiting.innerHTML = `<i class="fa-solid fa-circle-notch fa-spin"></i> Waiting for another device to join…`
       }
+      // apps, devices and details only once a device has ever joined; until then the page is the onboarding card
+      document.getElementById('anywhere-details').hidden = peers.length === 0
+      const warning = document.getElementById('anywhere-expiry-warning')
+      const daysLeft = daysUntil(current.keyExpiry)
+      if (Number.isFinite(daysLeft) && daysLeft <= 14) {
+        warning.hidden = false
+        warning.innerHTML = `<i class="fa-solid fa-triangle-exclamation"></i> Your Tailscale key expires ${esc(formatDate(current.keyExpiry))}. After that, devices can't connect until you sign in again here. <a href='https://login.tailscale.com/admin/machines' target='_blank' rel='noopener'>Disable key expiry</a> for <b>${esc(current.dnsName ? current.dnsName.split('.')[0] : 'pinokio')}</b> in the Tailscale admin console.`
+      } else {
+        warning.hidden = true
+      }
       const apps = Array.isArray(current.apps) ? current.apps : []
       document.getElementById('anywhere-apps').innerHTML = apps.length === 0
         ? `<p class='anywhere-muted'>No app is running right now. Launch one and it will show up here.</p>`
@@ -412,9 +461,7 @@ document.addEventListener('DOMContentLoaded', function() {
           </div>`).join('')
       const serve = Array.isArray(current.serve) ? current.serve : []
       document.getElementById('anywhere-ports').innerHTML = serve.length === 0 ? '—' : serve.map((entry) => `${esc(entry.name || (entry.port === 443 ? 'Pinokio' : ''))} <a class='remote' href='${esc(entry.url)}' target='_blank' rel='noopener'>${esc(entry.url)}</a> → ${esc(entry.target)}`).join('<br>')
-      document.getElementById('anywhere-peers').innerHTML = peers.length === 0
-        ? `<p class='anywhere-muted'>No other devices yet. Sign in to Tailscale on another device with the same account.</p>`
-        : peers.map((peer) => `
+      document.getElementById('anywhere-peers').innerHTML = peers.map((peer) => `
           <div class='anywhere-row'>
             <span class='anywhere-dot ${peer.online ? 'online' : ''}'></span>
             <i class='${osIcon(peer.os)}'></i>
@@ -430,6 +477,56 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   }
 
+  // Your other Pinokios: only on a loopback host, refreshed with each status poll while ready
+  const others = document.getElementById('anywhere-others')
+  let othersBusy = false
+  let othersNote = ''   // the last failed action, shown until the next one
+  const renderOthers = (peers) => {
+    if (!others) return
+    others.innerHTML = (othersNote ? `<p class='anywhere-error'>${esc(othersNote)}</p>` : '') + (peers.length === 0
+      ? `<p class='anywhere-muted'>No other Pinokio with Remote on is online.</p>`
+      : peers.map((peer) => `
+        <div class='anywhere-row anywhere-other' data-peer='${esc(peer.name)}'>
+          <i class='fa-solid fa-desktop'></i>
+          <div class='grow'>
+            <div class='title'>${esc(peer.name)} <a class='remote' href='/anywhere/peers/${encodeURIComponent(peer.name)}/open?port=443&to=%2F' target='_blank' rel='noopener'>Open Pinokio</a></div>
+            ${(peer.apps || []).length === 0 ? `<div class='sub'>no app running</div>` : peer.apps.map((app) => `
+              <div class='sub'>${esc(app.name)} ${app.open ? `<a class='remote' href='${esc(app.open)}' target='_blank' rel='noopener'>Open</a>` : `<span class='anywhere-badge'>${esc(app.state || 'starting')}</span>`} · <button type='button' class='anywhere-linkbtn' data-stop='${esc(app.id)}'>Stop</button></div>`).join('')}
+          </div>
+        </div>`).join(''))
+  }
+  const refreshOthers = async () => {
+    if (!others || othersBusy || current.phase !== 'ready') return
+    othersBusy = true
+    try {
+      const response = await fetch('/anywhere/peers', { cache: 'no-store' })
+      const answer = await response.json().catch(() => ({}))
+      if (!response.ok) throw new Error(answer.error || `HTTP ${response.status}`)
+      renderOthers(answer.peers || [])
+    } catch (e) {
+      others.innerHTML = `<p class='anywhere-muted'>Could not look for other Pinokios: ${esc(e.message)}</p>`
+    } finally {
+      othersBusy = false
+    }
+  }
+  if (others) {
+    others.addEventListener('click', async (event) => {
+      const button = event.target.closest('button[data-stop]')
+      if (!button) return
+      const peer = button.closest('[data-peer]').dataset.peer
+      button.disabled = true
+      othersNote = ''
+      try {
+        const response = await fetch(`/anywhere/peers/${encodeURIComponent(peer)}/apps/stop`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: button.dataset.stop }) })
+        const answer = await response.json().catch(() => ({}))
+        if (!response.ok) othersNote = `Could not stop it on ${peer}: ${answer.error || `HTTP ${response.status}`}`
+      } catch (e) {
+        othersNote = `Could not stop it on ${peer}: ${e.message}`
+      }
+      await refreshOthers()
+    })
+  }
+
   const poll = async () => {
     try {
       const response = await fetch('/anywhere/status', { cache: 'no-store' })
@@ -438,6 +535,7 @@ document.addEventListener('DOMContentLoaded', function() {
     } catch (e) {
       render(Object.assign({}, current, { phase: 'error', error: e.message }))
     }
+    refreshOthers()
     const phase = current.phase || ''
     const delay = (phase === 'ready' || phase === 'off') ? 5000 : 2000
     setTimeout(poll, delay)
@@ -485,6 +583,9 @@ document.addEventListener('DOMContentLoaded', function() {
       openExternal(link.href)
     }
   })
+  for (const input of document.querySelectorAll('input[name=anywhere-device]')) {
+    input.addEventListener('change', () => { document.getElementById('anywhere-connect').dataset.device = input.value })
+  }
   switchEl.addEventListener('click', () => {
     if (switchEl.dataset.on === 'true') {
       act('stop')
@@ -494,6 +595,7 @@ document.addEventListener('DOMContentLoaded', function() {
   })
 
   render(current)
+  refreshOthers()
   setTimeout(poll, 1500)
 })()
 </script>

package/test/anywhere-clipboard.test.js

@@ -8,10 +8,11 @@ const { JSDOM, VirtualConsole } = require('jsdom')
 const filename = path.resolve(__dirname, '../server/views/anywhere.ejs')
 const template = fs.readFileSync(filename, 'utf8')
 const address = 'https://pinokio-1.tail123.ts.net'
+const link = 'https://pinokio.co/anywhere/connect#u=' + encodeURIComponent(address) + '&a=me%40example.com'
 const tick = () => new Promise((resolve) => setImmediate(resolve))
 
 function createHarness(t, options = {}) {
-  const state = { status: { phase: 'ready', enabled: true, address }, timers: [], opened: [] }
+  const state = { status: { phase: 'ready', enabled: true, address, connectUrl: link }, timers: [], opened: [] }
   Object.assign(state.status, options.status)
   const html = ejs.render(template, {
     theme: 'light', agent: options.agent || 'browser', status: state.status
@@ -56,21 +57,21 @@ for (const agent of ['browser', 'electron']) {
     })
     h.button.focus()
     h.button.click()
-    assert.deepEqual(copied, [address], 'clipboard is invoked synchronously in the click')
+    assert.deepEqual(copied, [link], 'clipboard is invoked synchronously in the click')
     assert.equal(h.button.disabled, true)
     h.button.click()
     await tick()
-    assert.deepEqual(copied, [address], 'pending copies are not duplicated')
-    assert.equal(h.feedback.textContent, 'URL copied.')
+    assert.deepEqual(copied, [link], 'pending copies are not duplicated')
+    assert.equal(h.feedback.textContent, 'Link copied.')
     assert.equal(h.manual.hidden, true)
     assert.equal(h.button.disabled, false)
     assert.equal(h.document.activeElement, h.button)
     assert.deepEqual(h.state.opened, [])
-    assert.equal(h.document.getElementById('anywhere-address').getAttribute('href'), address)
+    assert.equal(h.document.getElementById('anywhere-address').getAttribute('href'), link)
     assert.equal(h.feedback.getAttribute('role'), 'status')
     if (agent === 'electron') {
       h.document.getElementById('anywhere-address').click()
-      assert.deepEqual(h.state.opened, [[address + '/', '_blank', 'browser']])
+      assert.deepEqual(h.state.opened, [[link, '_blank', 'browser']])
     }
   })
 }
@@ -99,8 +100,8 @@ for (const scenario of ['insecure LAN', 'denied', 'synchronous failure', 'electr
     h.button.focus()
     h.button.click()
     await tick()
-    assert.deepEqual(copied, [address])
-    assert.equal(h.feedback.textContent, 'URL copied.')
+    assert.deepEqual(copied, [link])
+    assert.equal(h.feedback.textContent, 'Link copied.')
     assert.equal(h.manual.hidden, true)
     assert.equal(h.document.activeElement, h.button)
     assert.deepEqual(h.state.opened, [])
@@ -119,17 +120,17 @@ for (const failure of ['false', 'undefined', 'throws', 'unavailable']) {
     h.button.click()
     await tick()
     assert.equal(h.manual.hidden, false)
-    assert.equal(h.input.value, address)
+    assert.equal(h.input.value, link)
     assert.equal(h.input.selectionStart, 0)
-    assert.equal(h.input.selectionEnd, address.length)
+    assert.equal(h.input.selectionEnd, link.length)
     assert.equal(h.document.activeElement, h.input)
     assert.match(h.feedback.textContent, /Touch and hold.*Ctrl\+C \/ ⌘C/)
-    assert.doesNotMatch(h.feedback.textContent, /URL copied/)
+    assert.doesNotMatch(h.feedback.textContent, /Link copied/)
     assert.equal(h.button.disabled, false)
     await h.poll()
     assert.equal(h.manual.hidden, false, 'routine polling preserves the manual copy field')
-    assert.equal(h.input.selectionEnd, address.length)
-    h.state.status.address = 'https://renamed.tail123.ts.net'
+    assert.equal(h.input.selectionEnd, link.length)
+    h.state.status.connectUrl = 'https://pinokio.co/anywhere/connect#u=https%3A%2F%2Frenamed.tail123.ts.net'
     await h.poll()
     assert.equal(h.manual.hidden, true, 'a changed URL clears the stale manual field')
     assert.equal(h.feedback.textContent, '')
@@ -138,7 +139,7 @@ for (const failure of ['false', 'undefined', 'throws', 'unavailable']) {
 
 test('Remote does not copy a placeholder or an unavailable address', async (t) => {
   const h = createHarness(t, {
-    status: { address: '' },
+    status: { address: '', connectUrl: '' },
     clipboard: { writeText: () => assert.fail('no URL to copy') },
     execCommand: () => assert.fail('no URL to copy')
   })
@@ -146,7 +147,7 @@ test('Remote does not copy a placeholder or an unavailable address', async (t) =
   h.button.click()
   await tick()
   assert.equal(h.feedback.textContent, '')
-  h.state.status.address = address
+  h.state.status.connectUrl = link
   await h.poll()
   assert.equal(h.button.disabled, false)
   h.state.status.phase = 'off'
@@ -165,8 +166,8 @@ test('Remote restores keyboard focus after disabling the button during modern co
   assert.equal(h.document.activeElement, h.button)
 })
 
-test('Remote ignores a pending copy result if the address changes or Remote stops', async (t) => {
-  for (const change of [{ address: 'https://new.tail123.ts.net' }, { phase: 'off' }]) {
+test('Remote ignores a pending copy result if the link changes or Remote stops', async (t) => {
+  for (const change of [{ connectUrl: 'https://pinokio.co/anywhere/connect#u=https%3A%2F%2Fnew.tail123.ts.net' }, { phase: 'off' }]) {
     let rejectCopy
     const h = createHarness(t, {
       clipboard: { writeText: () => new Promise((resolve, reject) => { rejectCopy = reject }) },

package/test/anywhere-forward.test.js

@@ -0,0 +1,135 @@
+const assert = require('node:assert/strict')
+const http = require('node:http')
+const test = require('node:test')
+const { once } = require('node:events')
+const WebSocket = require('ws')
+const { Forwarders } = require('../kernel/anywhere/forward')
+
+// Forwarders (spec/requirements/pinokio-anywhere.md, Other Pinokios; the
+// API spec, Peers): one loopback port relaying to one peer and port. The
+// peer here is a plain local server, so the TLS-through-proxy layer is
+// replaced by the http scheme and no agent; what is checked is the relay.
+
+async function peer(t) {
+  const seen = []
+  const server = http.createServer((req, res) => {
+    seen.push({ url: req.url, headers: req.headers, method: req.method })
+    let body = ''
+    req.on('data', (chunk) => { body += chunk })
+    req.on('end', () => {
+      res.writeHead(200, { 'Content-Type': 'application/json' })
+      res.end(JSON.stringify({ url: req.url, host: req.headers.host, forwarded: req.headers['x-pinokio-forwarded'] || null, peer: req.headers['x-pinokio-peer'] || null, body }))
+    })
+  })
+  const wss = new WebSocket.Server({ server })
+  wss.on('connection', (socket, req) => {
+    socket.on('message', (message) => socket.send(`echo:${message} forwarded=${req.headers['x-pinokio-forwarded'] || 'none'} peer=${req.headers['x-pinokio-peer'] || 'none'}`))
+  })
+  server.listen(0, '127.0.0.1')
+  await once(server, 'listening')
+  t.after(() => new Promise((resolve) => { wss.close(); server.close(resolve); server.closeAllConnections() }))
+  return { port: server.address().port, seen }
+}
+
+const get = (port, path, headers = {}) => new Promise((resolve, reject) => {
+  http.get({ host: '127.0.0.1', port, path, headers }, (res) => {
+    let body = ''
+    res.on('data', (chunk) => { body += chunk })
+    res.on('end', () => resolve({ status: res.statusCode, headers: res.headers, body }))
+  }).on('error', reject)
+})
+
+test('a forwarder relays requests with the forwarded header, the peer as Host, and no trusted peer headers', async (t) => {
+  const target = await peer(t)
+  const forwarders = new Forwarders({ proxyUrl: () => null, serverPort: () => 42000, scheme: 'http' })
+  t.after(() => forwarders.stopAll())
+  const local = await forwarders.open('127.0.0.1', target.port)
+  assert.equal(await forwarders.open('127.0.0.1', target.port), local, 'the same peer and port reuse the forwarder')
+  const answer = await get(local, '/ui/?a=1', { 'X-Pinokio-Peer': '1', 'X-Pinokio-Source-Host': 'evil', 'X-Pinokio-Source-Proto': 'https' })
+  assert.equal(answer.status, 200)
+  const body = JSON.parse(answer.body)
+  assert.equal(body.url, '/ui/?a=1')
+  assert.equal(body.host, `127.0.0.1:${target.port}`, 'Host names the peer, not the loopback port')
+  assert.equal(body.forwarded, '1')
+  assert.equal(body.peer, null, 'the existing peer-trust headers never pass through')
+  assert.equal(target.seen[0].headers['x-pinokio-source-host'], undefined)
+})
+
+test('two opens of the same peer and port at once share one forwarder', async (t) => {
+  const target = await peer(t)
+  const forwarders = new Forwarders({ proxyUrl: () => null, serverPort: () => 42000, scheme: 'http' })
+  t.after(() => forwarders.stopAll())
+  const [a, b] = await Promise.all([forwarders.open('127.0.0.1', target.port), forwarders.open('127.0.0.1', target.port)])
+  assert.ok(Number.isInteger(a) && a > 0)
+  assert.equal(a, b)
+})
+
+test('a forwarder answers /.pinokio/open itself with a redirect to this node\'s open route', async (t) => {
+  const target = await peer(t)
+  const forwarders = new Forwarders({ proxyUrl: () => null, serverPort: () => 42000, scheme: 'http' })
+  t.after(() => forwarders.stopAll())
+  const local = await forwarders.open('pinokio-1.tail1.ts.net', target.port)
+  const answer = await get(local, '/.pinokio/open?port=43001&to=%2Fui%2F%3Fa%3D1%23view')
+  assert.equal(answer.status, 302)
+  assert.equal(answer.headers.location, 'http://127.0.0.1:42000/anywhere/peers/pinokio-1/open?port=43001&to=%2Fui%2F%3Fa%3D1%23view')
+  assert.equal((await get(local, '/.pinokio/open?to=%2F')).status, 400, 'a link without a port does not bounce through pinokiod')
+  assert.equal(target.seen.length, 0, 'never relayed')
+})
+
+test('a forwarder relays a WebSocket upgrade', async (t) => {
+  const target = await peer(t)
+  const forwarders = new Forwarders({ proxyUrl: () => null, serverPort: () => 42000, scheme: 'http' })
+  t.after(() => forwarders.stopAll())
+  const local = await forwarders.open('127.0.0.1', target.port)
+  const socket = new WebSocket(`ws://127.0.0.1:${local}/socket`, { headers: { 'X-Pinokio-Peer': '1' } })
+  await once(socket, 'open')
+  socket.send('hi')
+  const [message] = await once(socket, 'message')
+  assert.equal(String(message), 'echo:hi forwarded=1 peer=none', 'the forwarded header is added and the trust header dropped on the upgrade path too')
+  socket.close()
+})
+
+test('a peer that cannot be reached answers 502, and stopAll closes every forwarder, an open WebSocket included', async (t) => {
+  const target = await peer(t)
+  const forwarders = new Forwarders({ proxyUrl: () => null, serverPort: () => 42000, scheme: 'http' })
+  const dead = await forwarders.open('127.0.0.1', 1)
+  const answer = await get(dead, '/')
+  assert.equal(answer.status, 502)
+  assert.match(answer.body, /Could not reach 127\.0\.0\.1/)
+  const live = await forwarders.open('127.0.0.1', target.port)
+  const socket = new WebSocket(`ws://127.0.0.1:${live}/socket`)
+  await once(socket, 'open')
+  const closed = once(socket, 'close')
+  const stopped = forwarders.stopAll()
+  await Promise.race([stopped, new Promise((_, reject) => setTimeout(() => reject(new Error('stopAll hung on the open WebSocket')), 2000))])
+  await closed
+  await assert.rejects(get(live, '/'), /ECONNREFUSED/)
+})
+
+test('the https scheme refuses to forward while the daemon is down', () => {
+  const forwarders = new Forwarders({ proxyUrl: () => null, serverPort: () => 42000 })
+  assert.throws(() => forwarders.agent(), /Remote is not running/)
+})
+
+test('a request to a peer returns status and body, and the deadline covers the connection itself', async (t) => {
+  const target = await peer(t)
+  const plain = new Forwarders({ proxyUrl: () => null, serverPort: () => 42000, scheme: 'http' })
+  const answer = await plain.request(`http://127.0.0.1:${target.port}/anywhere/status`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{"id":"x"}' })
+  assert.equal(answer.status, 200)
+  assert.equal(JSON.parse(answer.body).body, '{"id":"x"}')
+  const silent = http.createServer(() => { /* never answers */ })
+  silent.listen(0, '127.0.0.1')
+  await once(silent, 'listening')
+  t.after(() => { silent.closeAllConnections(); silent.close() })
+  await assert.rejects(plain.request(`http://127.0.0.1:${silent.address().port}/`, { timeoutMs: 200 }), /no answer in 0 s/)
+  // a proxy that accepts and never answers the CONNECT, through the real agent: the deadline
+  // still fires there, where a socket timeout would not have started yet
+  const held = []
+  const stuckProxy = require('node:net').createServer((socket) => { held.push(socket) /* never answers */ })
+  stuckProxy.listen(0, '127.0.0.1')
+  await once(stuckProxy, 'listening')
+  t.after(() => { for (const socket of held) socket.destroy(); stuckProxy.close() })
+  const forwarders = new Forwarders({ proxyUrl: () => `http://127.0.0.1:${stuckProxy.address().port}`, serverPort: () => 42000 })
+  t.after(() => forwarders.stopAll())
+  await assert.rejects(forwarders.request('https://peer.tail1.ts.net/anywhere/status', { timeoutMs: 300 }), /no answer in 0 s/)
+})