@leftoff/cli 0.9.17-beta.7 → 0.9.17-beta.8

package/mod/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.9.17-beta.7",
+  "version": "0.9.17-beta.8",
   "description": "Leftoff (formerly Checkpoints): WTF was I working on? Tracks every Claude Code session on this machine, writes a 3-line checkpoint when one goes quiet, and adds /cp (checkpoint now), /cp-name and a /leftoff pane. Talks to the local Leftoff daemon on 127.0.0.1:7429 and falls back to writing markdown in ~/checkpoints.",
   "author": {
     "name": "One Silly App"

package/mod/hooks/register.js

@@ -28,7 +28,7 @@ const END_TIMEOUT_MS = 1000
 const MODEL_TIMEOUT_MS = 20000
 
 // Module state. $.state is not used: the pane redraws with $.ui.invalidate.
-const MOD_VERSION = '0.9.17-beta.7' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.9.17-beta.8' // keep in step with .claude-plugin/plugin.json
 
 const st = {
   internal: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftoff/cli",
-  "version": "0.9.17-beta.7",
+  "version": "0.9.17-beta.8",
   "description": "Leftoff: WTF was I working on? Tracks every Claude Code session, writes a 3-line checkpoint when one goes quiet, and gives you a daily digest and a board, on your Mac and (optionally) your phone.",
   "keywords": [
     "claude",

package/ui/app.css

@@ -5102,3 +5102,33 @@ html.nav-drawer-open, html.nav-drawer-open body { overflow: hidden; }
 .ghost .ghost-k { flex: none; }
 .ghost .ghost-all { flex: none; margin-left: 4px; padding: 0 5px; border-radius: 5px; pointer-events: auto; cursor: help; line-height: 16px; font-size: 12px; border: 1px solid var(--line-strong); align-self: center; }
 .ghost .ghost-k { align-self: center; }
+
+/* 0.9.18 Hosted by (ui/hosted-by.js): which machine serves the board; state by shape + word */
+.hostedby { min-width: 0; }
+.hosts { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
+.host-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 44px; box-sizing: border-box; }
+.host-row + .host-row { border-top: 1px solid var(--line); }
+.host-row.is-host { background: var(--bg2); }
+.host-shape { width: 16px; text-align: center; flex: none; font-size: 14px; line-height: 1; color: var(--text2); }
+.host-row.on .host-shape { color: var(--text); }
+.host-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
+.host-sub { flex-basis: 100%; font-size: 12.5px; }
+.host-chip { font-weight: 600; }
+.pref-chip { border-style: dashed; }
+.host-make { flex: none; min-height: 44px; }
+.host-pref { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
+.hostedby > .hint { margin-top: 8px; }
+.host-pref-label { font-size: 12.5px; color: var(--text2); margin-right: 4px; }
+.hp-opt { border: 1px solid var(--line); background: none; color: var(--text2); border-radius: 8px; padding: 0 12px; min-height: 44px; font: inherit; font-size: 13px; cursor: pointer; }
+.hp-opt.on { border-color: var(--accent); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
+.hp-opt.on::before { content: '✓ '; }
+.hp-opt:disabled { opacity: .55; cursor: default; }
+.hp-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+@media (pointer: fine) { .host-row { min-height: 36px; padding: 6px 12px; } .host-make, .hp-opt { min-height: 30px; } }
+.relay-hosts { list-style: none; margin: 14px 0 0; padding: 0; text-align: left; }
+.relay-host { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; min-height: 44px; box-sizing: border-box; }
+.relay-host + .relay-host { border-top: 1px solid var(--line); }
+.relay-host-shape { width: 16px; text-align: center; flex: none; }
+.relay-host-word { color: var(--text2); font-size: 13px; flex: 1 0 auto; }
+.relay-use { min-height: 44px; margin-left: auto; }
+@media (pointer: fine) { .relay-host { min-height: 36px; } .relay-use { min-height: 30px; } }

package/ui/app.js

@@ -34,6 +34,7 @@ import { boardEmptyHtml, boardIsBrandNew, timelineEmptyHtml, digestFirstHtml, cp
 import { copyIconClick } from './copy-icon.js' // 0.9.15 Copy branch name // 0.9.9 the session page's info cards
 import { mountUpdateBar, takeCarry } from './update-bar.js' // 0.9.8 "Leftoff updated · Refresh"
 import { paintKeyed, forgetPaint, UNITS as PAINT_UNITS } from './keyed-paint.js'
+import { hostedByHtml } from './hosted-by.js' // 0.9.18 Settings → Use from anywhere → Hosted by
 import { createScrollKeep } from './scroll-keep.js' // 0.9.18 every scroll box keeps its place through redraws
 import { needsLine, needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer, turnsHtml, dismissedHtml, askDocked, askDockHtml, askSlimHtml, askRows, askBottom } from './needs.js'
 import { SUMMARY_EXAMPLES, LENGTH_CHOICES } from './summary-examples.js'
@@ -2381,6 +2382,10 @@ async function viewSession(id) {
 // 0.9.15 (ui/back-line.js): how long you'd been away when this visit first opened
 // each session, read before caughtUp folds its card; a new visit starts over.
 const openAway = new Map()
+// 2026-10-29 (Joel: a 30-minute-old session said "Away 12h"): a session that started
+// while you were away reads at least "day" depth (ui/away.js), but its label says
+// how long it has really gone unseen: never more than the session's own age.
+function awayShownMs(s, ms) { const st = Date.parse((s && s.startedAt) || ''); return Number.isFinite(st) && ms != null ? Math.max(60000, Math.min(ms, Date.now() - st)) : ms }
 function noteOpenAway(s) { if (s && !openAway.has(s.id)) openAway.set(s.id, presence.forSession(s).ms) }
 function backDismissed(id) { try { return sessionStorage.getItem(BACK_PREFIX + id) } catch { return null } }
 function backHtml(s) { noteOpenAway(s); return backLineHtml(s, backLine(s, { awayMs: openAway.get(s.id), dismissed: backDismissed(s.id) }), { esc, icon, ago }) }
@@ -2555,7 +2560,7 @@ function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {
   const cu = catchupButtonHtml(s, { esc, icon, busy: !!scuOf(s.id).loading })
   // 0.9.17: after time away the label is "Away 7h · Catch me up" on one line where the panel has room,
   // else "Catch me up" with "Away 7h" as a small line under it (app.css, the fsside container); never clipped
-  const cuBtn = cu ? cu.replace('class="btn scu-btn"', 'class="btn ' + (away ? 'primary ' : '') + 'scu-btn fs-cu" data-pop="cu"' + (away ? ' data-away="1"' : '')).replace('Catch me up</button>', '<span class="fs-cu-l">' + (away ? '<span class="fs-away">' + esc(shortAway(awayWords(awayMs))) + '<span class="fs-away-dot"> · </span></span>' : '') + '<span class="fs-cu-v">Catch me up</span></span></button>') : ''
+  const cuBtn = cu ? cu.replace('class="btn scu-btn"', 'class="btn ' + (away ? 'primary ' : '') + 'scu-btn fs-cu" data-pop="cu"' + (away ? ' data-away="1"' : '')).replace('Catch me up</button>', '<span class="fs-cu-l">' + (away ? '<span class="fs-away">' + esc(shortAway(awayWords(awayShownMs(s, awayMs)))) + '<span class="fs-away-dot"> · </span></span>' : '') + '<span class="fs-cu-v">Catch me up</span></span></button>') : ''
   const wtOn = wtUi.sid === s.id
   const wtBtn = s.agent ? '' : walkButtonHtml(s, { esc, icon, on: wtOn, size: wtSizeOf(s.id) }) // 0.9.17; 0.9.18: a diff glyph, the size under it, a popover (ui/walk-pop.js)
   // 0.9.17: Catch me up and Walk me through it side by side; Checkpoint now under them
@@ -2597,7 +2602,7 @@ function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {
   side += answeredList(s)
   const foot = '<div class="fs-foot"><button type="button" class="btn fs-term" data-term-toggle aria-label="Terminal" data-tip="Terminal (⌃`)">' + icon('terminal') + 'Terminal</button>' + termTabButtonHtml(s) + '</div>' // Open terminal (a window on the Mac): the head's ⋯
   const label = fsPeekWords(s)
-  return center + fsSideHtml({ id: s.id, side, foot, label, away: away ? shortAway(awayWords(awayMs)) : '', cpCount: s.checkpointCount || 0, cu: !!cu, wt: !s.agent, look: s.lookCount || 0, collapsed: fsSide.collapsed(), sheet: fsSheetUi.open === s.id, width: fsWidth.shown(fsViewport()), viewport: fsViewport() }, { esc, icon })
+  return center + fsSideHtml({ id: s.id, side, foot, label, away: away ? shortAway(awayWords(awayShownMs(s, awayMs))) : '', cpCount: s.checkpointCount || 0, cu: !!cu, wt: !s.agent, look: s.lookCount || 0, collapsed: fsSide.collapsed(), sheet: fsSheetUi.open === s.id, width: fsWidth.shown(fsViewport()), viewport: fsViewport() }, { esc, icon })
 }
 // The middle for a session with no Live thread: the same full-screen frame and bar, and what it can say there.
 // "Away 3 hours" → "Away 3h", so Catch me up and Checkpoint now share one row
@@ -4986,6 +4991,8 @@ function anywhereSection(r, adv = []) {
   if (r.enabled) {
     const st = r.connected ? '<span class="chip ok">Connected' + (r.latencyMs != null ? ' · ' + esc(r.latencyMs) + ' ms' : '') + '</span>' : '<span class="chip warn">' + (r.connecting && !r.problem ? 'Connecting…' : 'Not connected') + '</span>'
     h += '<label>Relay</label><div class="relaystat">' + st + (r.problem ? '<div class="hint warnish">' + esc(r.problem) + '</div>' : '') + '</div>'
+    // 0.9.18 Hosted by (ui/hosted-by.js): which machine serves the board, and swapping it
+    h += hostedByHtml(r.hosting, { esc, canChange: local || !!v.relay || !!v.device, viewing: window.leftoffRelay ? window.leftoffRelay.mac : null })
     if (r.boardUrl) h += '<label>Address</label><div class="remote-urls"><span class="chip mono">' + esc(r.boardUrl) + '</span><button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(r.boardUrl) + '">Copy</button></div>'
     // Pairing from a paired phone follows Trust my paired devices (0.6.6).
     const mayPair = v.mayPair != null ? !!v.mayPair : local
@@ -8265,6 +8272,18 @@ document.addEventListener('click', async (ev) => {
       refreshHealth().catch(() => {})
       return render()
     }
+    // 0.9.18 Hosted by: Make host (now) and Preferred (Automatic or a machine)
+    if (action === 'relay-host' || action === 'relay-host-pref') {
+      const machine = btn.dataset.machine || null
+      const prefer = action === 'relay-host-pref'
+      btn.disabled = true
+      let hz
+      try { hz = await api('POST', '/v1/relay/host', { machine, prefer }) } catch (e) { btn.disabled = false; toast(e.message, 5000); return }
+      const now = hz && hz.host && hz.host.machine
+      toast(prefer ? (machine ? machine + ' is your preferred host' : 'Hosting is automatic') + (now ? ' · ' + now + ' hosts now' : '') : machine + ' hosts the board now')
+      if (window.leftoffRelay && window.leftoffRelay.useHost && now) window.leftoffRelay.useHost(now)
+      return render()
+    }
     if (action === 'relay-user') {
       const user = (document.getElementById('f-anywhere-user').value || '').trim().toLowerCase()
       await api('POST', '/v1/relay/enable', { user }); toast('Saved: ' + user + '.leftoff.dev'); return render()

package/ui/hosted-by.js

@@ -0,0 +1,50 @@
+// 0.9.18 Hosted by (Settings → Use from anywhere): which of your machines serves
+// <user>.leftoff.dev. The relay decides (relay/src/hosting.js): your preferred host
+// whenever it's online, else the one already hosting, else an online one (Macs
+// first). Here: each machine with its state by shape and word, the host marked,
+// "Make host" per online machine, and Preferred (Automatic or a machine).
+// Pure (no DOM), so the check and the unit tests render it directly.
+const STATE = {
+  online: ['●', 'Online'],
+  not_answering: ['◐', 'Not answering'],
+  reconnecting: ['◌', 'Reconnecting'],
+  asleep: ['○', 'Offline'],
+}
+export function hostState(m) { return STATE[m && m.state] || (m && m.online ? STATE.online : STATE.asleep) }
+const kind = (p) => (p === 'darwin' ? 'Mac' : p === 'linux' ? 'Linux' : p ? p : '')
+
+export function hostedByHtml(h, { esc = (s) => String(s == null ? '' : s), canChange = true, viewing = null } = {}) {
+  if (!h || !Array.isArray(h.macs) || !h.macs.length) return ''
+  let out = '<label>Hosted by</label><div class="hostedby" id="hostedBy">'
+  if (!h.supported) {
+    out += '<div class="hint nomt">Your relay serves the board from the machine that connected last. Choosing a host needs a relay update.</div></div>'
+    return out
+  }
+  const host = h.host || {}
+  const pref = host.preferred || null
+  out += '<ul class="hosts" role="list">'
+  for (const m of h.macs) {
+    const [shape, word] = hostState(m)
+    const isHost = m.machine === host.machine
+    const k = kind(m.platform)
+    out += '<li class="host-row' + (isHost ? ' is-host' : '') + (m.online ? ' on' : ' off') + '" data-machine="' + esc(m.machine) + '">' +
+      '<span class="host-shape" aria-hidden="true">' + shape + '</span>' +
+      '<span class="host-main"><b>' + esc(m.machine) + '</b>' + (isHost ? ' <span class="chip host-chip">Host</span>' : '') + (m.machine === pref ? ' <span class="chip pref-chip">Preferred</span>' : '') +
+      '<span class="faint host-sub">' + word + (k ? ' · ' + esc(k) : '') + (viewing && viewing === m.machine && !isHost ? ' · this browser' : '') + (m.serves === 0 ? ' · can’t open your paired browsers’ keys' : '') + '</span></span>'
+    if (canChange && !isHost) {
+      out += '<button type="button" class="btn sm host-make" data-action="relay-host" data-machine="' + esc(m.machine) + '"' + (m.online ? '' : ' disabled data-tip="' + esc(m.machine) + ' is offline: it can host once it’s online"') + '>Make host</button>'
+    }
+    out += '</li>'
+  }
+  out += '</ul>'
+  if (host.pending) out += '<div class="hint nomt host-pending">' + esc(host.pending.machine) + ' is back and takes over in a few seconds.</div>'
+  if (!host.machine) out += '<div class="hint nomt warnish">None of your machines is online. The first one to connect hosts.</div>'
+  // Preferred: a segmented choice, Automatic first
+  out += '<div class="host-pref" role="radiogroup" aria-label="Preferred host"><span class="host-pref-label">Preferred</span>'
+  const opt = (val, label, tip) => '<button type="button" role="radio" class="hp-opt' + ((pref || '') === val ? ' on' : '') + '" aria-checked="' + ((pref || '') === val ? 'true' : 'false') + '" data-action="relay-host-pref" data-machine="' + esc(val) + '" data-tip="' + esc(tip) + '"' + (canChange ? '' : ' disabled') + '>' + esc(label) + '</button>'
+  out += opt('', 'Automatic', 'Any online machine; a Mac before Linux, and the host stays put while it’s online')
+  for (const m of h.macs) out += opt(m.machine, m.machine, m.machine + ' hosts whenever it’s online; when it’s closed another machine takes over, and it takes back when it returns')
+  out += '</div>'
+  out += '<div class="hint">' + (pref ? esc(pref) + ' hosts whenever it’s online. ' : '') + 'When the host closes or loses its network, another online machine takes over within about half a minute. Phones and browsers stay paired.</div>'
+  return out + '</div>'
+}

package/ui/relay-client.js

@@ -58,7 +58,30 @@ async function loadDirect() {
 const INIT_WAIT_MS = 1200 // how long the first paint waits for this Mac's own answer
 const RELOAD_KEY = 'leftoff.direct.reloaded'
 
-function pickedMac() { try { return localStorage.getItem(MAC_KEY) } catch { return null } }
+// 0.9.18: a pick from the reconnecting screen ("Use laptop instead") lasts this tab only
+const TEMP_KEY = 'leftoff.relay.mac.temp', REJECT_KEY = 'leftoff.relay.rejected', REJECT_MS = 10 * 60 * 1000
+function pickedMac() { try { return localStorage.getItem(MAC_KEY) || sessionStorage.getItem(TEMP_KEY) } catch { return null } }
+function tempPick(mac) { try { sessionStorage.setItem(TEMP_KEY, mac) } catch {} }
+// Machines that just refused this browser's key (unknown_device / not_ready): skipped for a while,
+// so the board doesn't keep going back to a host that can't open it (today's "Reconnecting" loop).
+function rejected(now = Date.now()) {
+  try { const o = JSON.parse(sessionStorage.getItem(REJECT_KEY) || '{}'); return Object.keys(o).filter((m) => now - o[m] < REJECT_MS) } catch { return [] }
+}
+function reject(mac, now = Date.now()) {
+  if (!mac) return
+  try { const o = JSON.parse(sessionStorage.getItem(REJECT_KEY) || '{}'); o[mac] = now; sessionStorage.setItem(REJECT_KEY, JSON.stringify(o)) } catch {}
+}
+function unreject(mac) { try { const o = JSON.parse(sessionStorage.getItem(REJECT_KEY) || '{}'); if (o[mac]) { delete o[mac]; sessionStorage.setItem(REJECT_KEY, JSON.stringify(o)) } } catch {} }
+// Which machine this browser uses: your own pick while it's online, else the relay's host
+// (relay/src/hosting.js), else the last one that answered, else any online one that hasn't
+// just refused this browser. Pure, unit-tested.
+export function pickMac({ picked = null, online = [], host = null, rejected = [], good = null } = {}) {
+  const ok = (m) => m && online.includes(m) && !rejected.includes(m)
+  if (picked && online.includes(picked)) return picked
+  if (ok(host)) return host
+  if (ok(good)) return good
+  return online.find((m) => !rejected.includes(m)) || host || null
+}
 function remember(mac) {
   try { if (mac) localStorage.setItem(MAC_KEY, mac); else localStorage.removeItem(MAC_KEY) } catch {}
 }
@@ -73,8 +96,7 @@ async function refreshStatus() {
   const online = relay.status.macs.filter((m) => m.online).map((m) => m.machine)
   // on this Mac's direct path the board stays on this Mac, whatever the relay sees
   if (!onDirect()) {
-    const want = pickedMac()
-    relay.mac = want && online.includes(want) ? want : relay.status.default
+    relay.mac = pickMac({ picked: pickedMac(), online, host: relay.status.default, rejected: rejected(), good: lastGood() })
     cookieMac(relay.mac)
   }
   return relay.status
@@ -252,8 +274,27 @@ async function viaRelay(body, init, retried) {
   const gone = relay.mac
   const env = await sealRequest(relay.key, { device: relay.device, machine: gone, body })
   const res = await realFetch('/_relay/api', { method: 'POST', credentials: 'same-origin', headers: { 'content-type': 'application/json' }, body: JSON.stringify(env), signal: init.signal, cache: 'no-store' })
-  if (res.status === 200) { good(gone); return toResponse(await openResponse(relay.key, env, await res.json())) }
+  if (res.status === 200) {
+    good(gone); unreject(gone)
+    const out = toResponse(await openResponse(relay.key, env, await res.json()))
+    // 0.9.18: the host changed (made elsewhere, or a preferred machine came back): follow it
+    const host = res.headers.get('x-leftoff-host')
+    if (host && host !== relay.mac && relay.mac === gone && !pickedMac() && !onDirect() && /^[\w.-]{1,64}$/.test(host)) followHost(host)
+    return out
+  }
   const j = await res.clone().json().catch(() => ({}))
+  if ((j.code === 'unknown_device' || j.code === 'not_ready') && !retried) {
+    // 0.9.18: this machine can't open this browser's key (a sandbox outside your synced
+    // folder, a Mac still starting): another online machine that can takes over
+    reject(gone)
+    await refreshStatus().catch(() => {})
+    if (relay.mac && relay.mac !== gone) { window.dispatchEvent(new CustomEvent('leftoff-relay', { detail: { mac: relay.mac, switched: true } })); return viaRelay(body, init, true) }
+  }
+  if (res.status === 504 && j.code === 'timeout' && !retried) {
+    // the host stopped answering (a closed lid before the relay notices): ask who hosts now
+    await refreshStatus().catch(() => {})
+    if (relay.mac && relay.mac !== gone) { window.dispatchEvent(new CustomEvent('leftoff-relay', { detail: { mac: relay.mac, switched: true } })); return viaRelay(body, init, true) }
+  }
   if (authVerdict(res.status, j.code) !== 'ok') {
     // 0.9.17: the Mac that took over while yours restarted may not know this browser:
     // stay with the one that does, and look again (never forget the key on this)
@@ -277,6 +318,16 @@ async function viaRelay(body, init, retried) {
   return res
 }
 
+// The relay says another machine hosts now. Once per few seconds at most; the board
+// hears leftoff-relay { switched } as it does after a failover.
+let followedAt = 0
+function followHost(host) {
+  if (Date.now() - followedAt < 5000) return
+  followedAt = Date.now()
+  relay.mac = host; cookieMac(host)
+  try { window.dispatchEvent(new CustomEvent('leftoff-relay', { detail: { mac: host, switched: true, followed: true } })) } catch {}
+}
+
 function patchedFetch(input, init) {
   try {
     const url = new URL(typeof input === 'string' ? input : input.url, location.href)
@@ -433,7 +484,40 @@ function trouble(code) {
 }
 function reconnecting() {
   if (document.querySelector('.relay-screen')) return
-  screen('Reconnecting to your board…', '<p class="relay-wait" role="status"><span class="relay-dot" aria-hidden="true"></span>' + esc(relay.mac || 'Your Mac') + ' may be restarting. This takes a few seconds.</p>')
+  screen('Reconnecting to your board…', reconnectHtml({ status: relay.status, mac: relay.mac, rejected: rejected() }))
+  wirePicker()
+}
+// 0.9.18: the reconnecting screen says where each machine is (shape + word) and, when the
+// host is out but another machine is online, that it's switching; with several online, a
+// "Use <name> instead" button each (this tab only). Pure, unit-tested.
+export function reconnectHtml({ status = null, mac = null, rejected = [] } = {}) {
+  const macs = (status && status.macs) || []
+  const online = macs.filter((m) => m.online).map((m) => m.machine)
+  const name = mac || 'Your Mac'
+  const hostOut = mac && (!online.includes(mac) || rejected.includes(mac))
+  const others = online.filter((m) => m !== mac && !rejected.includes(m))
+  const target = pickMac({ online: others, host: status && status.default, rejected })
+  let h = '<p class="relay-wait" role="status"><span class="relay-dot" aria-hidden="true"></span>'
+  if (hostOut && target) h += esc(name) + (online.includes(mac) ? ' can’t open this browser’s key.' : ' is offline.') + ' ' + esc(target) + ' is online: switching to it…</p>'
+  else h += esc(name) + ' may be restarting. This takes a few seconds.</p>'
+  if (macs.length > 1) {
+    h += '<ul class="relay-hosts" aria-label="Your machines">'
+    for (const m of macs) {
+      const st = m.online ? (rejected.includes(m.machine) ? ['◐', 'can’t open this browser’s key'] : ['●', 'online']) : m.state === 'reconnecting' ? ['◌', 'reconnecting'] : ['○', 'offline']
+      h += '<li class="relay-host ' + (m.online ? 'on' : 'off') + '"><span class="relay-host-shape" aria-hidden="true">' + st[0] + '</span><b>' + esc(m.machine) + '</b><span class="relay-host-word">' + st[1] + (m.machine === mac ? ' · was hosting' : '') + '</span>'
+      if (others.length > 1 && others.includes(m.machine)) h += '<button type="button" class="btn relay-use" data-mac="' + esc(m.machine) + '">Use ' + esc(m.machine) + ' instead</button>'
+      h += '</li>'
+    }
+    h += '</ul>'
+  }
+  return h
+}
+export function wirePicker() {
+  document.querySelectorAll('.relay-use').forEach((b) => b.addEventListener('click', () => {
+    const m = b.getAttribute('data-mac')
+    if (!m) return
+    stopTrouble(); tempPick(m); unreject(m); good(m); cookieMac(m); location.reload()
+  }))
 }
 // One sealed ping per candidate Mac (the one that last answered first): 'ok' (with
 // the Mac), 'revoked', or 'retry'.
@@ -443,7 +527,10 @@ async function pingMacs() {
   if (res0 && res0.status === 401) { const j = await res0.json().catch(() => ({})); return { verdict: authVerdict(401, j.code), code: j.code || 'not_paired' } }
   if (res0 && res0.ok) { st = await res0.json().catch(() => null); if (st) relay.status = st }
   const online = st ? st.macs.filter((m) => m.online).map((m) => m.machine) : []
-  const order = [...new Set([lastGood(), relay.mac, st && st.default, ...online].filter((m) => m && online.includes(m)))]
+  // 0.9.18: the relay's host first, machines that just refused this browser last
+  const rej = rejected()
+  const order = [...new Set([st && st.default, lastGood(), relay.mac, ...online].filter((m) => m && online.includes(m)))].sort((a, b) => rej.includes(a) - rej.includes(b))
+  if (document.querySelector('.relay-screen') && !lostShown && !notPairedShown) { const w = document.querySelector('.relay-screen .relay-card'); if (w) { w.innerHTML = '<div class="relay-logo">Leftoff</div><h1>Reconnecting to your board…</h1>' + reconnectHtml({ status: relay.status, mac: relay.mac, rejected: rej }); wirePicker() } }
   let last = { verdict: 'retry', code: online.length ? 'unknown_device' : 'mac_offline' }
   for (const machine of order) {
     try {
@@ -503,6 +590,9 @@ export const leftoffRelay = {
   online(mac) { return !!mac && onlineMacs().includes(String(mac)) },
   // Switch Macs: the board reloads from the other one.
   pick(mac) { remember(mac); cookieMac(mac); location.reload() },
+  // 0.9.18 Hosted by: the user's host changed (Settings): drop this browser's own pick and follow it.
+  useHost(mac) { remember(null); try { sessionStorage.removeItem(TEMP_KEY) } catch {} if (mac && mac !== relay.mac) { unreject(mac); cookieMac(mac); location.reload() } },
+  get pinned() { return pickedMac() },
   // This browser revoked itself (0.6.6).
   unpaired() { notPaired('self') },
 }