pinokiod 8.2.33 → 8.2.35

package/kernel/anywhere/index.js

@@ -22,10 +22,8 @@ const crypto = require('crypto')
 const { spawn, execFile, execFileSync } = require('child_process')
 const TailscaleCLI = require('./cli')
 const writeJson = require('./state')
-const { buildServeConfig, describeServeConfig, sameServeConfig, rewriteHref, rewriteHrefForwarded, LOOPBACK_HOSTS } = require('./serve')
+const { buildServeConfig, describeServeConfig, sameServeConfig, rewriteHref, LOOPBACK_HOSTS } = require('./serve')
 const { loadPortMap, savePortMap, assignPorts } = require('./ports')
-const { Forwarders } = require('./forward')
-const net = require('net')
 const Util = require('../util')
 
 const DEFAULT_HOSTNAME = 'pinokio'
@@ -41,10 +39,6 @@ const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 class Anywhere {
   constructor(kernel) {
     this.kernel = kernel
-    // the daemon's outbound HTTP proxy, picked by pinokiod at each daemon start; null while down
-    this.proxyPort = null
-    this.ownedProxyPort = null     // the port on an adopted daemon's command line, set by ownedPid
-    this.forwarders = new Forwarders({ proxyUrl: () => this.proxyUrl(), serverPort: () => this.serverPort() })
     this.platform = kernel && kernel.platform ? kernel.platform : os.platform()
     this.child = null
     this.api = null
@@ -82,9 +76,6 @@ class Anywhere {
   pidPath() {
     return this.stateDir('tailscaled.pid')
   }
-  proxyUrl() {
-    return this.proxyPort ? `http://127.0.0.1:${this.proxyPort}` : null
-  }
   socketPath() {
     if (this._socketPath) return this._socketPath
     if (this.platform === 'win32') {
@@ -107,8 +98,7 @@ class Anywhere {
     }
     return null
   }
-  // proxyPort: the outbound proxy's loopback port; null describes a daemon from before the proxy existed
-  daemonArgs(proxyPort = this.proxyPort) {
+  daemonArgs() {
     const args = [
       '--tun=userspace-networking',
       '--state', this.stateDir('tailscaled.state'),
@@ -116,7 +106,6 @@ class Anywhere {
       '--socket', this.socketPath(),
       '--port', '0',
     ]
-    if (proxyPort) args.push(`--outbound-http-proxy-listen=127.0.0.1:${proxyPort}`)
     if (this.platform === 'win32') {
       // 1.104+: run as a per-user console process, no service / admin needed
       args.push('--windows-mode=dev')
@@ -245,17 +234,10 @@ class Anywhere {
     const alive = await this.daemonAlive()
     if (this.stopping) return false
     if (alive && (!(await this.assertOwnership()) || this.stopping)) return false
-    // a daemon this process started keeps its port; an adopted one gives the port on its command
-    // line, none for a daemon from before the proxy existed, so forwarding waits for its next start
-    if (alive) this.proxyPort = this.child ? this.proxyPort : this.ownedProxyPort
     if (!alive) {
       const pid = await this.readPid()
       if (this.stopping) return false
       if (pid) throw new Error('tailscaled is still running but its private endpoint is unavailable; no second daemon was started.')
-      // forwarders of a daemon that died relay to its proxy port; a new daemon gets new ones
-      await this.forwarders.stopAll()
-      // a free port now; the daemon fails to start if something takes it first, and Try again picks another
-      this.proxyPort = await freeLoopbackPort()
       const logFd = fs.openSync(this.logPath(), 'a')
       const env = Object.assign({}, process.env, {
         TS_LOGS_DIR: this.stateDir(),
@@ -273,7 +255,6 @@ class Anywhere {
         if (this.child === child) {
           // not a stop() of ours: surface it, the page offers "Try again"
           this.child = null
-          this.proxyPort = null   // its proxy went with it; the next start replaces the forwarders
           if (!this.stopping && !this.error) this.error = `tailscaled exited (code=${code} signal=${signal})`
           try { fs.rmSync(this.pidPath(), { force: true }) }
           catch (error) { this.error = `Could not remove tailscaled PID record: ${error.message}` }
@@ -344,18 +325,12 @@ class Anywhere {
   }
   ownedPid(inspection, command) {
     command = command.trim()
-    // the proxy port is whatever the running daemon was given; a daemon from before the
-    // proxy existed has none and is still ours. A match records the port for adoption.
-    const match = command.match(/--outbound-http-proxy-listen=127\.0\.0\.1:(\d+)/i)
-    const port = match ? Number(match[1]) : null
-    let expected = [this.binPath(), ...this.daemonArgs(port)].join(' ')
+    let expected = [this.binPath(), ...this.daemonArgs()].join(' ')
     if (this.platform === 'win32') {
       command = command.replace(/"/g, '').toLowerCase()
       expected = expected.toLowerCase()
     }
-    if (command !== expected) return null
-    this.ownedProxyPort = port
-    return inspection.pid
+    return command === expected ? inspection.pid : null
   }
   async readPid() {
     const inspection = this.pidInspection()
@@ -397,8 +372,6 @@ class Anywhere {
     this.child = null
     this.login = null
     this.api = null
-    this.proxyPort = null
-    await this.forwarders.stopAll()
     fs.rmSync(this.pidPath(), { force: true })
     this.lastStatus = null
     this.lastStatusAt = 0
@@ -545,7 +518,6 @@ class Anywhere {
       const generic = !hostName || /^(localhost|iphone|ipad|android)$/i.test(hostName)
       peers.push({
         name: (generic && dnsLabel) ? dnsLabel : (hostName || dnsLabel || key),
-        dnsName: p.DNSName ? String(p.DNSName).replace(/\.$/, '') : null,
         os: osName,
         mobile: MOBILE_OS.has(osName.toLowerCase()),
         online: !!p.Online,
@@ -641,24 +613,15 @@ class Anywhere {
     if (!dnsName || !this.config || !this.config.enabled) return false
     return String(host || '').toLowerCase().replace(/:443$/, '') === dnsName.toLowerCase()
   }
-  // A peer from `status --json` by the first label of its DNS name, the key
-  // of the peer routes; null for a name that is not a peer.
-  peerFor(label) {
-    if (!this.lastStatus || typeof label !== 'string') return null
-    const wanted = label.toLowerCase()
-    return this.peersFrom(this.lastStatus).find((p) => p.dnsName && p.dnsName.split('.')[0].toLowerCase() === wanted) || null
-  }
   // Rewrites one menu link for a visitor arriving through the Tailscale
   // address. Only a loopback link with a port is touched, and only when the
   // request's Host header is this node's name; any other request gets the
-  // href back unchanged. A visitor forwarded by another Pinokio gets the
-  // relative path its forwarder answers instead of this node's address.
-  rewriteHref(host, href, forwarded = false) {
+  // href back unchanged.
+  rewriteHref(host, href) {
     if (!this.isNodeHost(host)) return href
-    const routes = describeServeConfig(this.lastServe, this.dnsNameFrom(this.lastStatus))
-    return forwarded ? rewriteHrefForwarded(href, routes) : rewriteHref(href, routes)
+    return rewriteHref(href, describeServeConfig(this.lastServe, this.dnsNameFrom(this.lastStatus)))
   }
-  async rewriteMenu(host, menu, forwarded = false) {
+  async rewriteMenu(host, menu) {
     if (!Array.isArray(menu) || !this.isNodeHost(host)) return menu
     // Confirm new or changed routes on first render; refresh checks unchanged ones.
     const apps = this.appTargets()
@@ -671,7 +634,7 @@ class Anywhere {
       for (const item of items) {
         if (!item || typeof item !== 'object') continue
         if (typeof item.href === 'string') {
-          const next = this.rewriteHref(host, item.href, forwarded)
+          const next = this.rewriteHref(host, item.href)
           if (next !== item.href) {
             if (item.src === item.href) item.src = next
             if (item.target_full === item.href) item.target_full = next
@@ -779,7 +742,7 @@ class Anywhere {
     const dnsName = this.dnsNameFrom(status)
     const address = dnsName ? `https://${dnsName}` : null
     const account = this.accountFrom(status)
-    const peers = this.peersFrom(status).map(({ dnsName, ...peer }) => peer)   // DNS names serve the peer routes, not the payload
+    const peers = this.peersFrom(status)
     const out = Object.assign(base, {
       running: true,
       version: status.Version,
@@ -846,16 +809,4 @@ class Anywhere {
 }
 
 
-// A loopback port nothing is listening on right now, for the daemon's proxy.
-function freeLoopbackPort() {
-  return new Promise((resolve, reject) => {
-    const probe = net.createServer()
-    probe.once('error', reject)
-    probe.listen(0, '127.0.0.1', () => {
-      const { port } = probe.address()
-      probe.close(() => resolve(port))
-    })
-  })
-}
-
 module.exports = Anywhere

package/kernel/anywhere/serve.js

@@ -94,28 +94,12 @@ function sameServeConfig(a, b) {
   return isDeepStrictEqual(a || null, b || null)
 }
 
-// the path every forwarder answers itself (spec/requirements/pinokio-anywhere-api.md, Peers)
-const OPEN_PATH = '/.pinokio/open'
-
-// A loopback link with a port that a Serve route carries: its route and the
-// link's path, query and fragment; null for any other link.
-function routedLink(href, routes) {
+function rewriteHref(href, routes) {
   let url
-  try { url = new URL(String(href)) } catch (_) { return null }
-  if (!/^https?:$/.test(url.protocol) || !LOOPBACK_HOSTS.has(url.hostname) || !url.port) return null
+  try { url = new URL(String(href)) } catch (_) { return href }
+  if (!/^https?:$/.test(url.protocol) || !LOOPBACK_HOSTS.has(url.hostname) || !url.port) return href
   const route = routes.find((entry) => entry.local === Number(url.port))
-  return route ? { route, path: url.pathname + url.search + url.hash } : null
-}
-function rewriteHref(href, routes) {
-  const link = routedLink(href, routes)
-  return link ? link.route.url + link.path : href
-}
-// The same link for a visitor arriving through another Pinokio's forwarder: the
-// published port and the path on the relative path the forwarder answers, so
-// the caller maps the port on demand.
-function rewriteHrefForwarded(href, routes) {
-  const link = routedLink(href, routes)
-  return link ? `${OPEN_PATH}?port=${link.route.port}&to=${encodeURIComponent(link.path)}` : href
+  return route ? route.url + url.pathname + url.search + url.hash : href
 }
 
-module.exports = { buildServeConfig, describeServeConfig, sameServeConfig, rewriteHref, rewriteHrefForwarded, LOOPBACK_HOSTS, DEFAULT_HTTPS_PORT, OPEN_PATH }
+module.exports = { buildServeConfig, describeServeConfig, sameServeConfig, rewriteHref, LOOPBACK_HOSTS, DEFAULT_HTTPS_PORT }

package/package.json

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

package/server/index.js

@@ -35,8 +35,6 @@ const TerminalApi = require('../kernel/api/terminal')
 const PluginSources = require("../kernel/plugin_sources")
 const ManagedSkills = require("../kernel/managed_skills")
 const { rewriteHref: rewriteAnywhereHref, LOOPBACK_HOSTS: ANYWHERE_LOOPBACK_HOSTS } = require("../kernel/anywhere/serve")
-const { openPath: anywhereOpenPath, FORWARDED_HEADER: ANYWHERE_FORWARDED_HEADER } = require("../kernel/anywhere/forward")
-const { FIRST_PORT: ANYWHERE_FIRST_PORT, LAST_PORT: ANYWHERE_LAST_PORT } = require("../kernel/anywhere/ports")
 const { menuTargets: launcherMenuTargets, isWebUrl } = require("../kernel/api/launcher_target")
 const { isPathRemovalBlockedError, removePath } = require("../kernel/path_removal")
 
@@ -1051,122 +1049,6 @@ class Server {
     const dnsName = anywhere && typeof anywhere.dnsNameFrom === "function" ? anywhere.dnsNameFrom(anywhere.lastStatus) : null
     return !!dnsName && parsed.protocol === "https:" && host === dnsName.toLowerCase()
   }
-  // a Host header on this computer itself (localhost, 127.0.0.1, [::1], with or without a port)
-  isLoopbackHost(host) {
-    const name = String(host || "").toLowerCase().replace(/:\d+$/, "")
-    return name === "localhost" || name === "127.0.0.1" || name === "[::1]"
-  }
-  // A request from a browser on this computer, as opposed to one that came through Tailscale
-  // Serve or another Pinokio: those also arrive on loopback, and a tailnet client chooses its
-  // own Host, but it cannot strip the headers Serve adds on the way or the peer marker.
-  isLocalRequest(req) {
-    const socket = req.socket && req.socket.remoteAddress
-    const loopback = socket === "127.0.0.1" || socket === "::1" || socket === "::ffff:127.0.0.1"
-    return loopback && this.isLoopbackHost(req.get("host")) && !req.get("X-Forwarded-For") && !req.get("X-Pinokio-Peer")
-  }
-  // the peer routes act on this computer's behalf: served on this computer only, to its own
-  // page only. Their redirects end on 127.0.0.1, which mean nothing anywhere else.
-  anywherePeerAllowed(req) {
-    if (!this.isLocalRequest(req)) return false
-    const origin = req.get("Origin")
-    if (!origin || origin === "https://pinokio.co") return true
-    try { return new URL(origin).host.toLowerCase() === String(req.get("host")).toLowerCase() } catch (_) { return false }
-  }
-  // the reason the peer routes cannot work right now, or null
-  anywherePeerUnavailable() {
-    const anywhere = this.kernel.anywhere
-    if (anywhere.proxyUrl()) return null
-    return anywhere.lastStatus && !anywhere.error ? "Turn Remote off and on to reach your other Pinokios" : "Remote is not running on this computer"
-  }
-  // Remote from computer to computer (spec/requirements/pinokio-anywhere-api.md, Peers):
-  // the other Pinokios on the tailnet, found by asking each online computer for its status
-  // through the daemon's proxy, their running apps linked through this node's forwarders.
-  async composeAnywherePeers() {
-    const anywhere = this.kernel.anywhere
-    const unavailable = this.anywherePeerUnavailable()
-    if (unavailable) return { status: 502, body: { error: unavailable } }
-    const candidates = anywhere.peersFrom(anywhere.lastStatus).filter((peer) => peer.online && !peer.mobile && peer.dnsName)
-    const probes = await Promise.allSettled(candidates.map(async (peer) => {
-      const answer = await anywhere.forwarders.request(`https://${peer.dnsName}/anywhere/status`, { timeoutMs: 4000 })
-      if (answer.status !== 200) return null
-      let status
-      try { status = JSON.parse(answer.body) } catch (_) { return null }
-      if (!status || typeof status.phase !== "string") return null
-      const label = peer.dnsName.split(".")[0]
-      const apps = Array.isArray(status.apps) ? status.apps : []
-      return {
-        name: label,
-        address: `https://${peer.dnsName}`,
-        apps: apps.map((app) => {
-          const { remote, ...rest } = app
-          return Object.assign(rest, { open: this.anywherePeerOpenPath(label, remote) })
-        }),
-      }
-    }))
-    return { status: 200, body: { peers: probes.map((probe) => probe.status === "fulfilled" ? probe.value : null).filter(Boolean) } }
-  }
-  // this node's open route for a peer's published address, or null for no address
-  anywherePeerOpenPath(label, remote) {
-    if (typeof remote !== "string") return null
-    let url
-    try { url = new URL(remote) } catch (_) { return null }
-    return anywhereOpenPath(label, url.port ? Number(url.port) : 443, url.pathname + url.search + url.hash)
-  }
-  // GET /anywhere/peers/<name>/open?port=<n>&to=<path>: { status, headers } or { status, body }
-  async anywherePeerOpen(name, query = {}) {
-    const anywhere = this.kernel.anywhere
-    const peer = anywhere.peerFor(name)
-    if (!peer) return { status: 400, body: { error: `Not a computer on your network: ${name}` } }
-    const port = Number(query.port)
-    if (!(port === 443 || (Number.isInteger(port) && port >= ANYWHERE_FIRST_PORT && port <= ANYWHERE_LAST_PORT))) {
-      return { status: 400, body: { error: `Not a Remote port: ${query.port}` } }
-    }
-    const unavailable = this.anywherePeerUnavailable()
-    if (unavailable) return { status: 502, body: { error: unavailable } }
-    let local
-    try {
-      local = await anywhere.forwarders.open(peer.dnsName, port)
-    } catch (error) {
-      return { status: 500, body: { error: error && error.message ? error.message : String(error) } }
-    }
-    // `to` resolved against the forwarder: encoded for the header, and never another origin
-    const base = `http://127.0.0.1:${local}/`
-    let location
-    try { location = new URL(typeof query.to === "string" ? query.to : "/", base) } catch (_) { location = new URL(base) }
-    if (location.origin !== new URL(base).origin) location = new URL(base)
-    return { status: 302, headers: { Location: location.href, "Cache-Control": "no-store" } }
-  }
-  // /anywhere/peers/<name>/<path>: the peer's own API through the daemon's proxy (API spec, Relays).
-  // JSON routes get the peer's published addresses turned into this node's open routes, absolute,
-  // since the client may be pinokio.co on another origin; an asset is passed through as it is.
-  async relayAnywherePeer(name, method, relayPath, body = {}) {
-    const anywhere = this.kernel.anywhere
-    const peer = anywhere.peerFor(name)
-    if (!peer) return { status: 400, body: { error: `Not a computer on your network: ${name}` } }
-    const unavailable = this.anywherePeerUnavailable()
-    if (unavailable) return { status: 502, body: { error: unavailable } }
-    const json = relayPath.startsWith("anywhere/")
-    let answer
-    try {
-      answer = await anywhere.forwarders.request(`https://${peer.dnsName}/${relayPath}`, method === "POST"
-        ? { method, headers: { "Content-Type": "application/json" }, body: JSON.stringify(body || {}), timeoutMs: 30000 }
-        : { method, timeoutMs: 8000 })
-    } catch (error) {
-      return { status: 502, body: { error: `Could not reach ${peer.name}: ${error && error.message ? error.message : error}` } }
-    }
-    if (!json) return { status: answer.status, raw: answer.raw, contentType: answer.headers["content-type"] || "application/octet-stream" }
-    let parsed
-    try { parsed = JSON.parse(answer.body) } catch (_) {
-      return { status: 502, body: { error: `${peer.name} did not answer with JSON (HTTP ${answer.status})` } }
-    }
-    const own = (url) => { try { return new URL(url).hostname.toLowerCase() === peer.dnsName.toLowerCase() } catch (_) { return false } }
-    const route = (url) => `http://127.0.0.1:${anywhere.serverPort()}${this.anywherePeerOpenPath(peer.dnsName.split(".")[0], url)}`
-    if (parsed && Array.isArray(parsed.apps)) {
-      for (const app of parsed.apps) if (app && typeof app.remote === "string" && own(app.remote)) app.remote = route(app.remote)
-    }
-    if (parsed && parsed.action === "open" && typeof parsed.url === "string" && own(parsed.url)) parsed.url = route(parsed.url)
-    return { status: answer.status, body: parsed }
-  }
   // the app's menu as launch targets: scripts and web addresses, never interface links;
   // text is plain: a launcher may write HTML, which the desktop renders and the phone does not
   async anywhereMenu(api, repoPath) {
@@ -5194,8 +5076,7 @@ class Server {
       // published app's fixed https address; any other host is left for the
       // Home Server rewrite below, exactly as before.
       if (this.kernel.anywhere) {
-        // a visitor forwarded by another Pinokio gets links its forwarder answers (API spec, Peers)
-        await this.kernel.anywhere.rewriteMenu(req.$source && req.$source.host, config.menu, req.get(ANYWHERE_FORWARDED_HEADER) === "1")
+        await this.kernel.anywhere.rewriteMenu(req.$source && req.$source.host, config.menu)
       }
       config = Util.rewrite_localhost(this.kernel, config, req.$source)
       return config
@@ -7007,12 +6888,6 @@ class Server {
         this.kernel.vault.automaticScans.supported)
       next()
     })
-    // pinokio.co's Remote tab reaches the peer routes from a browser on this computer; Chrome's
-    // local network access wants this on the preflight, which the cors middleware below answers
-    this.app.use("/anywhere/peers", (req, res, next) => {
-      if (req.get("Access-Control-Request-Private-Network")) res.set("Access-Control-Allow-Private-Network", "true")
-      next()
-    })
     this.app.use(cors({
       origin: '*'
     }));
@@ -14485,8 +14360,6 @@ class Server {
         status,
         theme: this.theme,
         agent: req.agent,
-        // Your other Pinokios links end on 127.0.0.1, which mean nothing to a phone reading this page
-        loopback: this.isLocalRequest(req),
       })
     }))
     this.app.get("/anywhere/status", ex(async (req, res) => {
@@ -14513,32 +14386,6 @@ class Server {
     })
     this.app.post("/anywhere/apps/launch", anywhereAppAction((body) => this.composeAnywhereLaunch(body)))
     this.app.post("/anywhere/apps/stop", anywhereAppAction((body) => this.composeAnywhereStop(body)))
-    // the other Pinokios on the tailnet, for this computer's own Remote page (API spec, Peers)
-    const anywherePeerRoute = (fn) => ex(async (req, res) => {
-      res.set("Cache-Control", "no-store")
-      if (!this.anywherePeerAllowed(req)) {
-        res.status(403).json({ error: "Allowed only on this computer" })
-        return
-      }
-      try {
-        const answer = await fn(req)
-        if (answer.headers) res.set(answer.headers)
-        if (answer.raw) res.status(answer.status).type(answer.contentType).send(answer.raw)
-        else if (answer.body === undefined) res.status(answer.status).end()
-        else res.status(answer.status).json(answer.body)
-      } catch (error) {
-        res.status(500).json({ error: error && error.message ? error.message : String(error) })
-      }
-    })
-    this.app.get("/anywhere/peers", anywherePeerRoute(() => this.composeAnywherePeers()))
-    this.app.get("/anywhere/peers/:name/open", anywherePeerRoute((req) => this.anywherePeerOpen(req.params.name, req.query)))
-    // the peer's own API under its prefix: a client swaps the peer's address for this prefix and changes nothing else
-    const anywhereRelay = (method, relayPath) => anywherePeerRoute((req) => this.relayAnywherePeer(req.params.name, method, relayPath(req), req.body))
-    this.app.get("/anywhere/peers/:name/anywhere/status", anywhereRelay("GET", () => "anywhere/status"))
-    this.app.get("/anywhere/peers/:name/anywhere/apps", anywhereRelay("GET", () => "anywhere/apps"))
-    this.app.post("/anywhere/peers/:name/anywhere/apps/launch", anywhereRelay("POST", () => "anywhere/apps/launch"))
-    this.app.post("/anywhere/peers/:name/anywhere/apps/stop", anywhereRelay("POST", () => "anywhere/apps/stop"))
-    this.app.get("/anywhere/peers/:name/asset/*", anywhereRelay("GET", (req) => "asset/" + encodeURI(req.params[0])))
     const anywhereAction = (label, fn) => ex(async (req, res) => {
       const anywhere = this.kernel.anywhere
       if (!anywhere) {

package/server/views/anywhere.ejs

@@ -38,31 +38,15 @@ body.dark .anywhere-card { border-color: rgba(255,255,255,0.1); background: rgba
 .anywhere-card h3 { margin: 18px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
 .anywhere-card p { margin: 6px 0; line-height: 1.5; }
 .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-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-connect { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
+@media (max-width: 900px) { .anywhere-connect { grid-template-columns: 1fr; } }
+.anywhere-device-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; text-align: center; padding: 22px 24px 24px; }
+.anywhere-device-icon { font-size: 32px; line-height: 1; opacity: 0.7; margin-bottom: -2px; }
+.anywhere-device-card h2 { font-size: 17px; margin: 0; }
+.anywhere-device-card p { margin: 0; max-width: 360px; font-size: 15px; line-height: 1.5; }
+.anywhere-device-card img { width: 212px; height: 212px; border-radius: 14px; background: white; padding: 12px; border: 1px solid rgba(0,0,0,0.08); }
+body.dark .anywhere-device-card img { border-color: transparent; }
+.anywhere-account-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 18px; }
 .anywhere-address {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 15px; word-break: break-all;
@@ -225,31 +209,29 @@ document.addEventListener('DOMContentLoaded', function() {
 
         <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 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 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 class='anywhere-connect' id='anywhere-connect'>
+            <div class='anywhere-card anywhere-device-card'>
+              <i class='fa-solid fa-mobile-screen anywhere-device-icon' aria-hidden='true'></i>
+              <h2>Connect a phone or tablet</h2>
+              <p>Scan with your phone. It walks you through the rest.</p>
+              <img id='anywhere-qr' alt='QR code to connect' src=''>
+            </div>
+            <div class='anywhere-card anywhere-device-card'>
+              <i class='fa-solid fa-laptop anywhere-device-icon' aria-hidden='true'></i>
+              <h2>Connect another computer</h2>
+              <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>
+          <div class='anywhere-account-line'>
+            <span class='anywhere-muted'>signed in as <b id='anywhere-account'></b> · <button type='button' class='anywhere-signout' data-action='logout'>Sign out</button></span>
+            <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>
             <div id='anywhere-details' hidden>
               <div class='anywhere-card'>
                 <h2>Running apps</h2>
@@ -258,13 +240,6 @@ 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>
@@ -282,7 +257,6 @@ document.addEventListener('DOMContentLoaded', function() {
                 </p>
               </div>
             </div>
-          </div>
         </div>
 
       </div>
@@ -477,56 +451,6 @@ 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)}/anywhere/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' })
@@ -535,7 +459,6 @@ 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)
@@ -583,9 +506,6 @@ 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')
@@ -595,7 +515,6 @@ document.addEventListener('DOMContentLoaded', function() {
   })
 
   render(current)
-  refreshOthers()
   setTimeout(poll, 1500)
 })()
 </script>