pinokiod 8.2.29 → 8.2.30

package/kernel/anywhere/index.js

@@ -215,7 +215,7 @@ class Anywhere {
     if (!this.config.enabled) return false
     if (!(await this.installed())) {
       if (automatic) return false
-      throw new Error('Install the matching Tailscale daemon and CLI through Anywhere setup.')
+      throw new Error('Install the matching Tailscale daemon and CLI through Remote setup.')
     }
     if (this.stopping) return false
     this.error = null

package/kernel/anywhere/ports.js

@@ -37,7 +37,7 @@ function assignPorts(map, keys) {
   for (const key of keys) {
     if (Number.isInteger(out[key])) continue
     while (used.has(next)) next += 1
-    if (next > LAST_PORT) throw new Error('Pinokio Anywhere has no free remote ports left')
+    if (next > LAST_PORT) throw new Error('Remote has no free remote ports left')
     out[key] = next
     used.add(next)
     changed = true

package/kernel/bin/conda.js

@@ -274,7 +274,7 @@ report_errors: false`)
     }
 
     if (this.kernel.anywhere) {
-      ondata({ raw: `stopping Pinokio Anywhere before replacing Miniforge...\r\n` })
+      ondata({ raw: `stopping Remote before replacing Miniforge...\r\n` })
       await this.kernel.anywhere.stop()
     }
 

package/kernel/bin/setup.js

@@ -275,7 +275,7 @@ module.exports = {
     ]
     return {
       icon: "fa-solid fa-mobile-screen",
-      title: "Pinokio Anywhere",
+      title: "Remote",
       description: "Reach this Pinokio and its apps from your phone or another computer over a private Tailscale network",
       requirements,
       conda_requirements: [

package/kernel/bin/tailscaled.js

@@ -7,7 +7,7 @@ const run = promisify(execFile)
 const VERSION = '1.104.1'
 
 class Tailscaled {
-  description = "Installs the Tailscale daemon for Pinokio Anywhere: reach this Pinokio and its apps from your phone or another computer over a private network."
+  description = "Installs the Tailscale daemon for Remote: reach this Pinokio and its apps from your phone or another computer over a private network."
   cmd() {
     return `tailscaled=${VERSION} tailscale=${VERSION}`
   }
@@ -67,7 +67,7 @@ class Tailscaled {
     })
   }
   async uninstall(req, ondata) {
-    ondata({ raw: "stopping Pinokio Anywhere\r\n" })
+    ondata({ raw: "stopping Remote\r\n" })
     if (this.kernel.anywhere && typeof this.kernel.anywhere.stop === "function") {
       await this.kernel.anywhere.stop()
     }

package/package.json

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

package/server/index.js

@@ -14389,7 +14389,7 @@ class Server {
     const anywhereAction = (label, fn) => ex(async (req, res) => {
       const anywhere = this.kernel.anywhere
       if (!anywhere) {
-        res.status(500).json({ success: false, error: "Pinokio Anywhere is not available" })
+        res.status(500).json({ success: false, error: "Remote is not available" })
         return
       }
       try {

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 { 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>
@@ -246,7 +271,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 +298,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 +322,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 +332,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 +352,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 +378,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 +400,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 +415,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 +431,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 +454,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>
@@ -485,6 +525,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')

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-onboarding.test.js

@@ -0,0 +1,95 @@
+const assert = require('node:assert/strict')
+const fs = require('node:fs')
+const path = require('node:path')
+const test = require('node:test')
+const ejs = require('ejs')
+const { JSDOM, VirtualConsole } = require('jsdom')
+
+// The Remote page's onboarding states (spec/requirements/pinokio-anywhere.md,
+// Interface > Onboarding): what the ready state shows before and after a
+// device joins, the key-expiry warning, and the approval that opens on its own.
+const filename = path.resolve(__dirname, '../server/views/anywhere.ejs')
+const template = fs.readFileSync(filename, 'utf8')
+const address = 'https://pinokio.tail123.ts.net'
+const connectUrl = 'https://pinokio.co/anywhere/connect#u=' + encodeURIComponent(address) + '&a=me%40example.com'
+const days = (n) => new Date(Date.now() + n * 86400000).toISOString()
+
+function render(t, status, agent = 'electron') {
+  const state = { status: { enabled: true, address, connectUrl, dnsName: 'pinokio.tail123.ts.net', account: { email: 'me@example.com' }, peers: [], ...status }, timers: [], opened: [] }
+  const html = ejs.render(template, { theme: 'light', agent, status: state.status }, { filename, includer: () => ({ template: ' ' }) })
+  const virtualConsole = new VirtualConsole()
+  virtualConsole.on('jsdomError', (error) => { throw error })
+  const dom = new JSDOM(html, {
+    url: 'http://127.0.0.1:42000/', runScripts: 'dangerously', pretendToBeVisual: true, virtualConsole,
+    beforeParse(window) {
+      window.setTimeout = (callback, delay) => state.timers.push({ callback, delay })
+      window.fetch = async () => ({ ok: true, json: async () => ({ ...state.status }) })
+      window.open = (...args) => state.opened.push(args)
+    },
+  })
+  t.after(() => dom.window.close())
+  const document = dom.window.document
+  return { state, document, poll: () => state.timers.shift().callback(), text: (id) => document.getElementById(id).textContent }
+}
+
+test('before any device joins, the ready state is the connect card alone, with sign out', (t) => {
+  const h = render(t, { phase: 'ready', peers: [] })
+  const card = h.document.querySelector('[data-state=ready] .anywhere-card')
+  assert.equal(h.document.getElementById('anywhere-details').hidden, true, 'apps, devices and details wait for a device')
+  assert.ok(card.querySelector('.anywhere-signout[data-action=logout]'), 'a wrong-account sign-in is fixable during onboarding')
+  assert.ok(!h.document.querySelector('#anywhere-details [data-action=logout]'), 'sign out lives with the account, not in details')
+  assert.equal(card.querySelectorAll('ol, h3').length, 0, 'no step lists on the desk: the phone page explains Tailscale after the scan')
+  const connect = h.document.getElementById('anywhere-connect')
+  assert.equal(connect.dataset.device, 'phone', 'the QR is the default')
+  assert.match(connect.querySelector('[data-panel=phone]').textContent, /Scan with your phone\./)
+  const computer = connect.querySelector('[data-panel=computer]')
+  assert.match(computer.textContent, /signing in as me@example.com/)
+  const choose = connect.querySelector('input[value=computer]')
+  choose.checked = true
+  choose.dispatchEvent(new h.document.defaultView.Event('change'))
+  assert.equal(connect.dataset.device, 'computer', 'the segmented control switches the panel')
+  const link = computer.querySelector('#anywhere-address')
+  assert.equal(link.getAttribute('href'), connectUrl, 'the computer path is the same link the QR carries')
+  assert.equal(link.textContent, 'pinokio.co/anywhere/connect#…', 'the fragment is not spelled out')
+  assert.equal(h.text('anywhere-account'), 'me@example.com')
+  assert.match(h.text('anywhere-waiting'), /Waiting for another device/)
+  assert.equal(h.document.getElementById('anywhere-expiry-warning').hidden, true)
+})
+
+test('once a device has joined, the rest of the page appears, online or not', async (t) => {
+  const h = render(t, { phase: 'ready', peers: [{ name: 'phone', os: 'iOS', online: false }] })
+  assert.equal(h.document.getElementById('anywhere-details').hidden, false)
+  assert.match(h.text('anywhere-waiting'), /No other devices are online/)
+  h.state.status.peers = []
+  h.poll(); await new Promise(setImmediate)
+  assert.equal(h.document.getElementById('anywhere-details').hidden, true, 'the page follows the payload')
+})
+
+test('a key expiring within two weeks is warned about on the desk, with the admin console link', (t) => {
+  const soon = render(t, { phase: 'ready', keyExpiry: days(10) })
+  const warning = soon.document.getElementById('anywhere-expiry-warning')
+  assert.equal(warning.hidden, false)
+  assert.match(warning.textContent, /expires .*\(in 10 days\)/)
+  assert.match(warning.textContent, /Disable key expiry for pinokio/)
+  assert.equal(warning.querySelector('a').getAttribute('href'), 'https://login.tailscale.com/admin/machines')
+  assert.equal(render(t, { phase: 'ready', keyExpiry: days(60) }).document.getElementById('anywhere-expiry-warning').hidden, true)
+  assert.equal(render(t, { phase: 'ready' }).document.getElementById('anywhere-expiry-warning').hidden, true, 'no expiry reported, no warning')
+})
+
+test('the approval opens in the external browser once per URL, without a click, and the button stays', async (t) => {
+  const approval = { url: 'https://login.tailscale.com/f/serve?node=1', text: 'Enable HTTPS certificates for your tailnet to continue.' }
+  const h = render(t, { phase: 'https', approval })
+  assert.deepEqual(h.state.opened, [[approval.url, '_blank', 'browser']])
+  assert.equal(h.document.getElementById('anywhere-approval-link').getAttribute('href'), approval.url)
+  assert.equal(h.text('anywhere-approval-text'), approval.text, "Tailscale's own text is the detail line")
+  h.poll(); await new Promise(setImmediate)
+  assert.equal(h.state.opened.length, 1, 'a poll with the same URL does not open it again')
+  assert.equal(h.document.defaultView.sessionStorage.getItem('anywhere-approval-opened'), approval.url, 'remembered for the window, so a reload does not open it again')
+  h.state.status.approval = { url: 'https://login.tailscale.com/f/serve?node=2', text: '' }
+  h.poll(); await new Promise(setImmediate)
+  assert.equal(h.state.opened.length, 2, 'a fresh approval URL opens once more')
+  assert.equal(h.text('anywhere-approval-text'), '')
+  const login = render(t, { phase: 'login', loginUrl: 'https://login.tailscale.com/a/1' })
+  assert.match(login.document.querySelector('[data-state=login]').textContent, /may be asked to approve one thing/)
+  assert.deepEqual(login.state.opened, [], 'sign-in itself still waits for the click')
+})