pinokiod 8.2.27 → 8.2.29

package/kernel/anywhere/index.js

@@ -46,6 +46,7 @@ class Anywhere {
     this.starting = null
     this.lastStatus = null
     this.lastStatusAt = 0
+    this.statusQuery = null
     this.lastServe = undefined     // last serve config we pushed (undefined = unknown)
     this.lastServeError = null
     this.portMap = null            // app key -> stable remote port (ports.json)
@@ -53,6 +54,8 @@ class Anywhere {
     this.feature = null            // cached query-feature result
     this.featureAt = 0
     this.error = null
+    this.statusError = null
+    this.featureError = null
     this.login = null
     this.stopping = null
   }
@@ -216,6 +219,9 @@ class Anywhere {
     }
     if (this.stopping) return false
     this.error = null
+    this.statusError = null
+    this.featureError = null
+    this.statusQuery = null
     if (this.api) this.api.cancel()
     if (this.syncing) await this.syncing.catch(() => {})
     const forceLogin = !!(this.login && this.login.error)
@@ -282,7 +288,7 @@ class Anywhere {
     this.lastServeError = null
     this.lastStatusAt = 0
     const status = await this.refreshStatus(true)
-    if (!status) throw new Error(this.error)
+    if (!status) throw new Error(this.error || this.statusError || 'Could not read Tailscale status.')
     if (status.BackendState !== 'Running') this.requestLogin(forceLogin)
     return true
   }
@@ -345,6 +351,7 @@ class Anywhere {
     return inspection ? this.ownedPid(inspection, execFileSync(inspection.file, inspection.args, inspection.options)) : null
   }
   async _stop() {
+    this.statusQuery = null
     if (this.api) this.api.cancel()
     if (this.starting) await this.starting.catch(() => {})
     if (this.syncing) await this.syncing.catch(() => {})
@@ -359,6 +366,8 @@ class Anywhere {
       await sleep(100)
     }
     this.error = null
+    this.statusError = null
+    this.featureError = null
     this.lastServeError = null
     this.child = null
     this.login = null
@@ -414,10 +423,13 @@ class Anywhere {
   }
   async logout() {
     if (!(await this.assertOwnership()) || this.stopping) return false
+    this.statusQuery = null
     if (this.api) this.api.cancel()
     this.login = null
     await this.client().logout()
     this.error = null
+    this.statusError = null
+    this.featureError = null
     this.lastStatus = null
     this.lastStatusAt = 0
     this.lastServe = undefined
@@ -429,24 +441,35 @@ class Anywhere {
 
   // ---------- status ----------
   async refreshStatus(force) {
+    if (!force && this.statusQuery && this.statusQuery.api === this.api) {
+      return this.statusQuery.promise
+    }
     const now = Date.now()
     if (!force && this.lastStatus && now - this.lastStatusAt < STATUS_CACHE_MS) {
       return this.lastStatus
     }
     const api = this.client()
-    try {
-      const status = await api.status()
-      if (this.api !== api) return null
-      this.lastStatus = status
-      this.lastStatusAt = Date.now()
-      return status
-    } catch (e) {
-      if (this.api !== api) return null
-      if (!e.cancelled) this.error = e.message
-      this.lastStatus = null
-      this.lastStatusAt = Date.now()
-      return null
-    }
+    const query = { api, promise: null }
+    this.statusQuery = query
+    query.promise = (async () => {
+      try {
+        const status = await api.status()
+        if (this.api !== api || this.statusQuery !== query) return null
+        this.lastStatus = status
+        this.statusError = null
+        this.lastStatusAt = Date.now()
+        return status
+      } catch (e) {
+        if (this.api !== api || this.statusQuery !== query) return null
+        if (!e.cancelled) this.statusError = e.message
+        this.lastStatus = null
+        this.lastStatusAt = Date.now()
+        return null
+      } finally {
+        if (this.statusQuery === query) this.statusQuery = null
+      }
+    })()
+    return query.promise
   }
   dnsNameFrom(status) {
     if (!status || !status.Self || !status.Self.DNSName) return null
@@ -457,6 +480,7 @@ class Anywhere {
     if (!status || status.BackendState !== 'Running') return null
     if (Array.isArray(status.CertDomains) && status.CertDomains.length > 0) {
       this.feature = { Complete: true }
+      this.featureError = null
       return this.feature
     }
     if (this.feature && Date.now() - this.featureAt < FEATURE_QUERY_CACHE_MS) {
@@ -470,9 +494,10 @@ class Anywhere {
         })
       }
       this.feature = await this.featureQuery
+      this.featureError = null
       this.featureAt = Date.now()
     } catch (e) {
-      if (!e.cancelled) this.error = e.message
+      if (!e.cancelled) this.featureError = e.message
       this.feature = null
       this.featureAt = 0
     } finally {
@@ -600,9 +625,10 @@ class Anywhere {
     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()
-    if (this.syncing || this.lastServe === undefined || this.lastServeError || apps.length !== this.targets.length ||
-        apps.some((app, i) => app.key !== this.targets[i].key || app.local !== this.targets[i].local || app.origin !== this.targets[i].origin)) {
-      await this.sync()
+    const targetsChanged = apps.length !== this.targets.length ||
+      apps.some((app, i) => app.key !== this.targets[i].key || app.local !== this.targets[i].local || app.origin !== this.targets[i].origin)
+    if (this.syncing || this.lastServe === undefined || this.lastServeError || targetsChanged) {
+      await this.sync({ recheck: targetsChanged })
     }
     const rewrite = (items) => {
       for (const item of items) {
@@ -623,10 +649,10 @@ class Anywhere {
   }
   // Regenerates the Serve config from the apps' published URLs. Called from
   // kernel.refresh() (same trigger as router.update()) and after start.
-  async sync() {
-    // Concurrent callers share one operation, with a further pass for new work.
+  async sync({ recheck = true } = {}) {
+    // Reads join the pending work; only changed targets request another pass.
     if (this.syncing) {
-      this.syncAgain = true
+      if (recheck) this.syncAgain = true
       return this.syncing
     }
     this.syncing = (async () => {
@@ -707,8 +733,8 @@ class Anywhere {
     if (this.stopping || !this.config.enabled) return inactive()
     if (!status) {
       return Object.assign(base, {
-        phase: this.error ? 'error' : 'starting',
-        error: this.error,
+        phase: this.error || this.statusError ? 'error' : 'starting',
+        error: this.error || this.statusError,
         running: false,
       })
     }
@@ -761,7 +787,7 @@ class Anywhere {
     if (this.stopping || !this.config.enabled) return inactive()
     if (!feature) {
       out.phase = 'error'
-      out.error = this.error || 'Could not query HTTPS approval.'
+      out.error = this.error || this.featureError || 'Could not query HTTPS approval.'
       return out
     }
     if (!feature.Complete) {
@@ -772,10 +798,10 @@ class Anywhere {
       }
       return out
     }
-    await this.sync()
+    await this.sync({ recheck: false })
     if (this.stopping || !this.config.enabled) return inactive()
-    out.phase = this.error || this.lastServeError || this.lastServe === undefined || !this.lastStatus || this.lastStatus.BackendState !== 'Running' ? 'error' : 'ready'
-    if (out.phase === 'error') out.error = this.error || this.lastServeError || 'Routes are not confirmed'
+    out.phase = this.error || this.statusError || this.featureError || this.lastServeError || this.lastServe === undefined || !this.lastStatus || this.lastStatus.BackendState !== 'Running' ? 'error' : 'ready'
+    if (out.phase === 'error') out.error = this.error || this.statusError || this.featureError || this.lastServeError || 'Routes are not confirmed'
     out.serveError = this.lastServeError
     out.serve = describeServeConfig(this.lastServe, dnsName, Object.fromEntries(this.targets.map(target => [target.listen, target.name])))
     return out

package/package.json

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

package/server/public/remote-nav.js

@@ -0,0 +1,84 @@
+(() => {
+  const trigger = document.querySelector('[data-remote-nav]')
+  if (!trigger || trigger.dataset.initialized) return
+  trigger.dataset.initialized = 'true'
+
+  let payload = null
+  let revision = 0
+  let inFlight = false
+  const labels = {
+    ready: 'Connected',
+    off: 'Off',
+    setup: 'Setup required',
+    starting: 'Connecting',
+    login: 'Sign-in required',
+    machine_auth: 'Device approval required',
+    https: 'HTTPS approval required',
+    error: 'Connection error'
+  }
+  const render = (data) => {
+    const phase = data && data.phase
+    const label = labels[phase] || 'Connection status unavailable'
+    const pending = ['starting', 'login', 'machine_auth', 'https', 'setup'].includes(phase)
+    trigger.dataset.remoteStatus = phase === 'ready' ? 'ready' : phase === 'error' ? 'error' : pending ? 'pending' : phase === 'off' ? 'off' : 'unknown'
+    const description = `Remote — ${label}`
+    trigger.setAttribute('title', description)
+    trigger.setAttribute('aria-label', description)
+    trigger.setAttribute('data-tippy-content', description)
+    if (trigger._tippy) trigger._tippy.setContent(description)
+
+    const tab = document.querySelector('[data-main-sidebar-anywhere-tab]')
+    const badge = document.querySelector('[data-main-sidebar-anywhere-status]')
+    if (!tab || !badge) return
+    tab.setAttribute('title', description)
+    tab.setAttribute('aria-label', description)
+    badge.hidden = !labels[phase] || phase === 'setup'
+    badge.textContent = phase === 'ready' ? 'ON' : phase === 'off' || phase === 'error' ? 'OFF' : '…'
+    badge.dataset.state = phase === 'ready' ? 'on' : 'off'
+  }
+  document.addEventListener('pinokio:anywhere-status', (event) => {
+    revision += 1
+    const detail = event.detail || {}
+    payload = detail.payload || detail
+    render(payload)
+  })
+
+  const refresh = async () => {
+    if (inFlight || document.hidden) return
+    inFlight = true
+    const requestRevision = revision
+    const controller = new AbortController()
+    const timeout = setTimeout(() => controller.abort(), 10000)
+    try {
+      const response = await fetch('/anywhere/status?light=1', { cache: 'no-store', signal: controller.signal })
+      if (!response.ok) throw new Error(`Remote status failed: ${response.status}`)
+      const data = await response.json()
+      if (revision === requestRevision) {
+        payload = data
+        render(payload)
+      }
+    } catch (_) {
+      if (revision === requestRevision) {
+        payload = {}
+        render(payload)
+      }
+    } finally {
+      clearTimeout(timeout)
+      inFlight = false
+    }
+  }
+  const init = () => {
+    if (payload) render(payload)
+    // The Remote page already polls and broadcasts its full status.
+    if (document.getElementById('anywhere-root')) return
+    refresh()
+    setInterval(refresh, 5000)
+    document.addEventListener('visibilitychange', refresh)
+    window.addEventListener('focus', refresh)
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init, { once: true })
+  } else {
+    init()
+  }
+})()

package/server/views/partials/home_server_popover.ejs

@@ -21,3 +21,4 @@
     </div>
   </div>
 </div>
+<%- include('remote_nav_button') %>

package/server/views/partials/home_server_popover_assets.ejs

@@ -1,4 +1,54 @@
 <style>
+.remote-nav-button {
+  position: relative;
+  width: 40px;
+  height: 30px;
+  min-width: 40px;
+  min-height: 30px;
+  padding: 0;
+  border-radius: 9px;
+  box-sizing: border-box;
+}
+.remote-nav-button__icon {
+  position: relative;
+  display: inline-flex;
+  width: 18px;
+  height: 18px;
+}
+.remote-nav-button__icon::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: currentColor;
+  -webkit-mask: url('/remote-control.svg') center / contain no-repeat;
+  mask: url('/remote-control.svg') center / contain no-repeat;
+}
+.remote-nav-button__dot {
+  position: absolute;
+  top: -4px;
+  right: -5px;
+  width: 7px;
+  height: 7px;
+  border: 1.5px solid var(--home-page-nav-bg, #fff);
+  border-radius: 999px;
+  background: #9aa1ad;
+}
+.remote-nav-button[data-remote-status="ready"] .remote-nav-button__dot {
+  background: #2db45c;
+}
+.remote-nav-button[data-remote-status="pending"] .remote-nav-button__dot {
+  background: #d98b1f;
+}
+.remote-nav-button[data-remote-status="error"] .remote-nav-button__dot {
+  background: #cf4545;
+}
+.remote-nav-button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+body.dark .remote-nav-button__dot {
+  border-color: var(--home-page-nav-bg, #1b1c1d);
+}
 .home-server-popover {
   position: relative;
   display: inline-flex;
@@ -15,6 +65,8 @@
   border-radius: 9px;
   box-sizing: border-box;
 }
+.remote-nav-button:hover,
+.remote-nav-button:focus-visible,
 .home-server-popover__trigger:hover,
 .home-server-popover__trigger:focus-visible,
 .home-server-popover[data-home-server-open="true"] .home-server-popover__trigger {
@@ -512,6 +564,8 @@ body.dark .home-server-popover__panel {
   box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
   color: rgba(239, 242, 247, 0.92);
 }
+body.dark .remote-nav-button:hover,
+body.dark .remote-nav-button:focus-visible,
 body.dark .home-server-popover__trigger:hover,
 body.dark .home-server-popover__trigger:focus-visible,
 body.dark .home-server-popover[data-home-server-open="true"] .home-server-popover__trigger {
@@ -1265,3 +1319,4 @@ body.dark .home-server-popover__qr-close:focus-visible {
   })
 })()
 </script>
+<script src="/remote-nav.js"></script>

package/server/views/partials/main_sidebar.ejs

@@ -122,43 +122,6 @@
 
     initHomeServerStatusBadge();
 
-    const initAnywhereStatusBadge = () => {
-      if (!sidebar || window.__pinokioMainSidebarAnywhereStatusInit) return;
-      const tab = sidebar.querySelector("[data-main-sidebar-anywhere-tab]");
-      const badge = sidebar.querySelector("[data-main-sidebar-anywhere-status]");
-      if (!tab || !badge) return;
-      window.__pinokioMainSidebarAnywhereStatusInit = true;
-      const render = (data) => {
-        const phase = data && data.phase ? String(data.phase) : "off";
-        if (phase === "setup") {
-          badge.hidden = true;
-          delete badge.dataset.state;
-          return;
-        }
-        const on = phase === "ready";
-        const label = on ? "ON" : (phase === "off" || phase === "error" ? "OFF" : "…");
-        badge.textContent = label;
-        badge.hidden = false;
-        badge.dataset.state = on ? "on" : "off";
-        tab.setAttribute("title", `Remote ${label}`);
-      };
-      document.addEventListener("pinokio:anywhere-status", (event) => {
-        const detail = event && event.detail ? event.detail : {};
-        render(detail.payload || detail);
-      });
-      fetch("/anywhere/status?light=1", { cache: "no-store" })
-        .then((response) => {
-          if (!response.ok) throw new Error(`Anywhere status failed: ${response.status}`);
-          return response.json();
-        })
-        .then(render)
-        .catch(() => {
-          badge.hidden = true;
-          delete badge.dataset.state;
-        });
-    };
-    initAnywhereStatusBadge();
-
     if (body && sidebar && headerToggle && !headerToggle.dataset.mainSidebarHeaderToggle) {
       headerToggle.dataset.mainSidebarHeaderToggle = "true";
       headerToggle.classList.add("sidebar-toggle", "main-sidebar-header-toggle");

package/server/views/partials/remote_nav_button.ejs

@@ -0,0 +1,5 @@
+<a class="btn2 remote-nav-button" href="/anywhere" data-remote-nav data-remote-status="loading" data-tippy-content="Remote — Checking connection" title="Remote — Checking connection" aria-label="Remote — Checking connection">
+  <span class="remote-nav-button__icon" aria-hidden="true">
+    <span class="remote-nav-button__dot"></span>
+  </span>
+</a>

package/test/anywhere.test.js

@@ -505,7 +505,6 @@ test('a failed HTTPS query surfaces an error instead of looping in starting', as
     assert.equal(snap.phase, 'error')
     assert.match(snap.error, /503 no netmap/)
     assert.equal(snap.approval, null)
-    anywhere.error = null
     feature = () => ({ Complete: false, Text: 'approve', URL: 'https://login.tailscale.com/f/serve?node=1' })
     anywhere.lastStatusAt = 0
     snap = await anywhere.snapshot()
@@ -1404,3 +1403,187 @@ test('cancelling a pending HTTPS approval during Stop keeps the result Off', asy
     assert.equal((await anywhere.snapshot()).approval.url, 'https://login.tailscale.com/f/fresh')
   } finally { fs.rmSync(tmp, { recursive: true, force: true }) }
 })
+
+test('a transient status failure recovers on the next snapshot without restarting Anywhere', async t => {
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'pk-status-recovery-'))
+  t.after(() => fs.rmSync(tmp, { recursive: true, force: true }))
+  const anywhere = new Anywhere(fakeKernel(tmp))
+  await anywhere.saveConfig({ enabled: true })
+  anywhere.readPid = () => 123
+  let failed = true, statusReads = 0
+  const routes = buildServeConfig({ dnsName: 'pinokio.tail1.ts.net', serverPort: 42000 })
+  anywhere.api = {
+    status: async () => {
+      statusReads++
+      if (failed) throw new Error('temporary CLI timeout')
+      return runningStatus()
+    },
+    serveConfig: async () => routes,
+    setServeConfig: async () => assert.fail('confirmed routes do not need rewriting'),
+    up: async () => assert.fail('recovery must not reauthenticate'),
+  }
+  const failure = await anywhere.snapshot()
+  assert.equal(failure.phase, 'error')
+  assert.equal(failure.error, 'temporary CLI timeout')
+  failed = false
+  const recovered = await anywhere.snapshot()
+  assert.equal(recovered.phase, 'ready')
+  assert.equal(recovered.error, null)
+  assert.equal(anywhere.statusError, null)
+  assert.equal(statusReads, 2)
+})
+
+test('successful status reads never clear a lifecycle failure', async () => {
+  const anywhere = new Anywhere(fakeKernel(os.tmpdir()))
+  anywhere.config = { enabled: true }
+  anywhere.error = 'could not stop the owned daemon'
+  anywhere.api = { status: async () => runningStatus() }
+  await anywhere.refreshStatus(true)
+  const snapshot = await anywhere.snapshot()
+  assert.equal(snapshot.phase, 'error')
+  assert.equal(snapshot.error, 'could not stop the owned daemon')
+})
+
+test('repeated status snapshots join Serve sync without extending its passes', async t => {
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'pk-status-sync-'))
+  t.after(() => fs.rmSync(tmp, { recursive: true, force: true }))
+  const anywhere = new Anywhere(fakeKernel(tmp))
+  await anywhere.saveConfig({ enabled: true })
+  anywhere.readPid = () => 123
+  anywhere.api = { status: async () => runningStatus() }
+  anywhere.lastServe = buildServeConfig({ dnsName: 'pinokio.tail1.ts.net', serverPort: 42000 })
+  let release, passes = 0
+  anywhere.pushServeConfig = async () => {
+    passes++
+    await new Promise(resolve => { release = resolve })
+    return false
+  }
+  const work = anywhere.sync()
+  // Actual target changes must still get their follow-up pass.
+  const changed = anywhere.sync()
+  const first = Array.from({ length: 6 }, () => anywhere.snapshot())
+  await new Promise(setImmediate)
+  release()
+  await new Promise(setImmediate)
+  assert.equal(passes, 2)
+  const later = Array.from({ length: 6 }, () => anywhere.snapshot())
+  await new Promise(setImmediate)
+  assert.equal(anywhere.syncAgain, false, 'polling does not queue a third pass')
+  release()
+  await Promise.all([work, changed])
+  for (const snapshot of await Promise.all([...first, ...later])) assert.equal(snapshot.phase, 'ready')
+  assert.equal(passes, 2)
+  assert.equal(anywhere.syncing, null)
+})
+
+test('unchanged menu reads join a slow Serve sync without requesting another pass', async () => {
+  const anywhere = new Anywhere(fakeKernel(os.tmpdir()))
+  anywhere.config = { enabled: true }
+  anywhere.lastStatus = runningStatus()
+  anywhere.lastServe = buildServeConfig({ dnsName: 'pinokio.tail1.ts.net', serverPort: 42000 })
+  let release, passes = 0
+  anywhere.pushServeConfig = async () => {
+    passes++
+    await new Promise(resolve => { release = resolve })
+    return false
+  }
+  const sync = anywhere.sync()
+  const menus = Array.from({ length: 10 }, () => anywhere.rewriteMenu('pinokio.tail1.ts.net', []))
+  assert.equal(anywhere.syncAgain, false)
+  release()
+  await Promise.all([sync, ...menus])
+  assert.equal(passes, 1)
+})
+
+test('startup preserves the cause of a failed initial status read and an explicit retry can recover', async t => {
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'pk-start-status-'))
+  t.after(() => fs.rmSync(tmp, { recursive: true, force: true }))
+  const anywhere = new Anywhere(fakeKernel(tmp))
+  anywhere.config = { enabled: true }
+  anywhere.readPid = () => 123
+  let failed = true
+  anywhere.api = {
+    cancel() {}, ping: async () => true, setPrefs: async () => {},
+    status: async () => {
+      if (failed) throw new Error('initial status unavailable')
+      return runningStatus()
+    },
+  }
+  await assert.rejects(anywhere.start(), /initial status unavailable/)
+  assert.equal((await anywhere.snapshot()).error, 'initial status unavailable')
+  failed = false
+  assert.equal(await anywhere.start(), true)
+  assert.equal(anywhere.error, null)
+  assert.equal(anywhere.statusError, null)
+})
+
+test('concurrent routine status reads share one CLI query and release it after success or failure', async () => {
+  const anywhere = new Anywhere(fakeKernel(os.tmpdir()))
+  let reads = 0, resolve, reject
+  anywhere.api = { status() {
+    reads++
+    return new Promise((ok, fail) => { resolve = ok; reject = fail })
+  } }
+  for (const failure of [false, true]) {
+    anywhere.lastStatusAt = 0
+    const pending = Array.from({ length: 8 }, () => anywhere.refreshStatus(false))
+    assert.equal(reads, failure ? 2 : 1, 'concurrent readers share one CLI process')
+    if (failure) reject(new Error('temporary read failure'))
+    else resolve(runningStatus())
+    const results = await Promise.all(pending)
+    assert.ok(results.every(result => failure ? result === null : result.BackendState === 'Running'))
+    assert.equal(anywhere.statusQuery, null)
+  }
+  const recovered = anywhere.refreshStatus(false)
+  resolve(runningStatus())
+  assert.equal((await recovered).BackendState, 'Running')
+  assert.equal(anywhere.statusError, null)
+})
+
+test('a forced status read supersedes older success and failure without letting their finalizers remove its query', async () => {
+  for (const oldFailure of [false, true]) {
+    const anywhere = new Anywhere(fakeKernel(os.tmpdir()))
+    const reads = []
+    anywhere.api = { status() {
+      return new Promise((resolve, reject) => reads.push({ resolve, reject }))
+    } }
+    const older = anywhere.refreshStatus(false)
+    const newer = anywhere.refreshStatus(true)
+    assert.equal(reads.length, 2, 'a forced read bypasses the pending routine query')
+    if (oldFailure) reads[0].reject(new Error('older CLI timeout'))
+    else reads[0].resolve({ BackendState: 'Stopped' })
+    assert.equal(await older, null)
+    const joining = anywhere.refreshStatus(false)
+    assert.equal(reads.length, 2, 'an old finalizer cannot drop the replacement query')
+    reads[1].resolve(runningStatus())
+    await Promise.all([newer, joining])
+    assert.equal(anywhere.lastStatus.BackendState, 'Running')
+    assert.equal(anywhere.statusError, null)
+    assert.equal(anywhere.statusQuery, null)
+    // Also check the reversed completion order: old errors must not erase recovery.
+    const late = anywhere.refreshStatus(true)
+    const latest = anywhere.refreshStatus(true)
+    reads[3].resolve(runningStatus())
+    await latest
+    if (oldFailure) reads[2].reject(new Error('late CLI timeout'))
+    else reads[2].resolve({ BackendState: 'Stopped' })
+    await late
+    assert.equal(anywhere.lastStatus.BackendState, 'Running')
+    assert.equal(anywhere.statusError, null)
+  }
+})
+
+test('a replaced CLI client has its own pending status query and ignores the former client', async () => {
+  const anywhere = new Anywhere(fakeKernel(os.tmpdir()))
+  let oldReply, newReply
+  anywhere.api = { status: () => new Promise(resolve => { oldReply = resolve }) }
+  const old = anywhere.refreshStatus(false)
+  anywhere.api = { status: () => new Promise(resolve => { newReply = resolve }) }
+  const fresh = anywhere.refreshStatus(false)
+  newReply(runningStatus())
+  await fresh
+  oldReply({ BackendState: 'Stopped' })
+  assert.equal(await old, null)
+  assert.equal(anywhere.lastStatus.BackendState, 'Running')
+  assert.equal(anywhere.statusQuery, null)
+})

package/test/remote-nav-ui.test.js

@@ -0,0 +1,124 @@
+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 } = require('jsdom')
+
+const root = path.resolve(__dirname, '..')
+const script = fs.readFileSync(path.join(root, 'server/public/remote-nav.js'), 'utf8')
+const render = (file, data = {}) => ejs.render(fs.readFileSync(file, 'utf8'), data, { filename: file })
+const tick = () => new Promise(resolve => setImmediate(resolve))
+
+async function harness(t, { remotePage = false, fetch } = {}) {
+  const header = render(path.join(root, 'server/views/partials/app_navheader.ejs'), { agent: 'electron' })
+  const sidebar = render(path.join(root, 'server/views/partials/main_sidebar.ejs'), { selected: 'home' })
+  const dom = new JSDOM(`<!doctype html><body>${header}${sidebar}${remotePage ? '<div id="anywhere-root"></div>' : ''}</body>`, {
+    url: 'http://localhost:42000/home', runScripts: 'outside-only', pretendToBeVisual: true
+  })
+  t.after(() => dom.window.close())
+  const state = { payload: { phase: 'ready', enabled: true }, requests: [], intervals: [] }
+  dom.window.fetch = async (...args) => {
+    state.requests.push(args)
+    return fetch ? fetch(...args) : { ok: true, json: async () => state.payload }
+  }
+  dom.window.setInterval = (callback, delay) => {
+    state.intervals.push({ callback, delay })
+    return state.intervals.length
+  }
+  await tick()
+  dom.window.eval(script)
+  await tick()
+  const document = dom.window.document
+  const trigger = document.querySelector('[data-remote-nav]')
+  const badge = document.querySelector('[data-main-sidebar-anywhere-status]')
+  const dispatch = (payload) => document.dispatchEvent(new dom.window.CustomEvent('pinokio:anywhere-status', { detail: { payload } }))
+  return { dom, document, state, trigger, badge, dispatch }
+}
+
+test('Remote links to the current-view page beside Home Server and shares live status with the sidebar', async t => {
+  const { document, state, trigger, badge, dispatch } = await harness(t)
+  assert.equal(document.querySelector('[data-home-server-popover]').nextElementSibling, trigger)
+  assert.equal(trigger.getAttribute('href'), '/anywhere')
+  assert.equal(trigger.getAttribute('target'), null)
+  assert.equal(trigger.dataset.remoteStatus, 'ready')
+  assert.equal(badge.textContent, 'ON')
+  assert.equal(state.requests.length, 1)
+  assert.equal(state.requests[0][0], '/anywhere/status?light=1')
+  assert.equal(state.requests[0][1].cache, 'no-store')
+
+  let tooltip
+  trigger._tippy = { setContent: value => { tooltip = value } }
+  const phases = [
+    ['off', 'off', 'Off', 'OFF'],
+    ['starting', 'pending', 'Connecting', '…'],
+    ['login', 'pending', 'Sign-in required', '…'],
+    ['machine_auth', 'pending', 'Device approval required', '…'],
+    ['https', 'pending', 'HTTPS approval required', '…'],
+    ['setup', 'pending', 'Setup required', '…'],
+    ['error', 'error', 'Connection error', 'OFF'],
+    ['ready', 'ready', 'Connected', 'ON']
+  ]
+  for (const [phase, status, label, badgeLabel] of phases) {
+    dispatch({ phase, enabled: true })
+    assert.equal(trigger.dataset.remoteStatus, status)
+    assert.equal(trigger.getAttribute('aria-label'), `Remote — ${label}`)
+    assert.equal(tooltip, `Remote — ${label}`)
+    assert.equal(badge.textContent, badgeLabel)
+    assert.equal(badge.hidden, phase === 'setup')
+    assert.equal(document.querySelector('[data-main-sidebar-anywhere-tab]').getAttribute('aria-label'), `Remote — ${label}`)
+  }
+})
+
+test('Remote status refreshes off-page, pauses when hidden, and recovers from a failed request', async t => {
+  let fail = false
+  const { dom, document, state, trigger, badge } = await harness(t, {
+    fetch: async () => {
+      if (fail) throw new Error('network unavailable')
+      return { ok: true, json: async () => ({ phase: 'off' }) }
+    }
+  })
+  assert.equal(state.intervals.length, 1)
+  assert.equal(state.intervals[0].delay, 5000)
+  fail = true
+  await state.intervals[0].callback()
+  assert.equal(trigger.dataset.remoteStatus, 'unknown')
+  assert.match(trigger.getAttribute('aria-label'), /status unavailable/)
+  assert.equal(badge.hidden, true)
+  Object.defineProperty(document, 'hidden', { configurable: true, value: true })
+  await state.intervals[0].callback()
+  assert.equal(state.requests.length, 2)
+  fail = false
+  Object.defineProperty(document, 'hidden', { configurable: true, value: false })
+  document.dispatchEvent(new dom.window.Event('visibilitychange'))
+  await tick()
+  assert.equal(trigger.dataset.remoteStatus, 'off')
+  assert.equal(badge.hidden, false)
+  assert.equal(badge.textContent, 'OFF')
+})
+
+test('an older status request cannot overwrite a Remote page action; duplicate initialization does not add polling', async t => {
+  let resolveResponse
+  const response = new Promise(resolve => { resolveResponse = resolve })
+  const { dom, state, trigger, dispatch } = await harness(t, { fetch: () => response })
+  await state.intervals[0].callback()
+  assert.equal(state.requests.length, 1)
+  dispatch({ phase: 'off' })
+  resolveResponse({ ok: true, json: async () => ({ phase: 'ready' }) })
+  await tick()
+  assert.equal(trigger.dataset.remoteStatus, 'off')
+  dom.window.eval(script)
+  assert.equal(state.intervals.length, 1)
+})
+
+test('the Remote page uses its existing status broadcasts without another poller', async t => {
+  const { state, trigger, badge, dispatch } = await harness(t, { remotePage: true })
+  assert.equal(state.requests.length, 0)
+  assert.equal(state.intervals.length, 0)
+  dispatch({ phase: 'ready' })
+  assert.equal(trigger.dataset.remoteStatus, 'ready')
+  assert.equal(badge.textContent, 'ON')
+  dispatch({ phase: 'login', enabled: true })
+  assert.equal(trigger.dataset.remoteStatus, 'pending')
+  assert.equal(badge.textContent, '…')
+})