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

package/ui/needs.js

@@ -434,9 +434,6 @@ export function prCardHtml(pr) {
     : '<div class="need-pr">' + inner + '</div>'
 }
 
-export const GENERIC_REPLIES = ['Yes, go ahead', 'No', 'Show me the diff first']
-const cap = (t) => t.charAt(0).toUpperCase() + t.slice(1)
-
 // "Should I also add Google sign-in, or keep it email-only?" -> the two choices.
 export function orChoices(question) {
   const q = String(question || '').replace(/\s+/g, ' ').trim()
@@ -462,29 +459,78 @@ export function listChoices(question) {
   return items.map(cap)
 }
 
-// 3–4 replies to pick from: a question's own options when it has them
-// (AskUserQuestion choices, "…: A, B, or C?", numbered options, "X, or Y?"),
-// else generic ones. A pick fills the answer box; you send it.
+// 2026-10-29 (beta feedback: "a lot of the time the suggestions on Needs you are
+// bad"): a suggestion is either one of the question's own choices, word for word,
+// or a plain answer to a yes/no question. Anything else gets no suggestions: the
+// old fallback ("Yes, go ahead" / "No" / "Show me the diff first") showed up under
+// questions that need a specific answer ("What should the timeout be?"), and
+// "Show me the diff first" was added to every either/or question.
+export const GENERIC_REPLIES = ['Yes, go ahead', 'No'] // a yes/no question's answers (the name is kept for older imports)
+export const YES_NO = GENERIC_REPLIES
+export const REPLY_MAX_CHARS = 100 // a suggestion longer than this isn't a quick reply
+export const REPLY_MAX = 6 // at most this many (a numbered menu can have six)
+const cap = (t) => t.charAt(0).toUpperCase() + t.slice(1)
+
+// The sentence that asks: the last one ending in "?" (markup off, one space).
+export function askingSentence(question) {
+  const parts = String(question || '').replace(/[*_`]+/g, '').replace(/\s+/g, ' ').trim().split(/(?<=[.!?])\s+(?=\S)/)
+  return (parts.filter((p) => /\?\s*$/.test(p)).pop() || '').trim()
+}
+// What kind of answer a question wants: 'yesno' (Should I…? Want me to…? Does
+// this plan look good? Ready to merge? (y/n)), 'open' (What / Which / How… with
+// no choices to pick from), or 'unknown'. Either/or questions are neither: their
+// choices are the answers (orChoices / listChoices).
+const OPEN_RE = /^(?:so,?\s+|and\s+|also,?\s+|ok(?:ay)?,?\s+)?(?:what|which|how|where|when|who|whom|whose|why|any\s+(?:idea|preference|thoughts)|anything\s+else|is\s+there\s+anything)\b/i
+const YESNO_START = /^(?:should|shall|do|does|did|is|are|was|were|can|could|may|might|would|will|want|ready|ok(?:ay)?|sound|sounds|look|looks|happy|good|proceed|continue|go\s+ahead|all\s+good|fine|alright|cool|safe|mind\s+if)\b/i
+const YESNO_ANY = /\b(?:want me to|should i|shall i|ok(?:ay)? (?:if i|to)|good to go|go ahead|look(?:s)? good|sound(?:s)? good|look(?:s)? right|approve|proceed|ready (?:to|for)|(?:do|would) you like me to)\b/i
+export function questionShape(question) {
+  const raw = String(question || '')
+  if (/\(\s*y\s*\/\s*n\s*\)|\byes or no\b|\[y\/n\]/i.test(raw)) return 'yesno'
+  const q = askingSentence(raw)
+  if (!q) return 'unknown'
+  // the clause that asks ("If the tests pass, want me to push?" -> "want me to push?")
+  const clause = q.split(/,\s+|;\s+|\s[—–-]\s/).pop().trim()
+  if (OPEN_RE.test(q) || OPEN_RE.test(clause)) return 'open'
+  if (/\bor\b/i.test(clause)) return 'unknown' // either/or: yes isn't an answer
+  if (YESNO_START.test(q) || YESNO_START.test(clause) || YESNO_ANY.test(clause)) return 'yesno'
+  return 'unknown'
+}
+
+// Kept to quick-reply size, duplicates out, at most REPLY_MAX.
+function tidyReplies(list) {
+  const out = []
+  for (const t of list || []) {
+    const v = String(t == null ? '' : t).replace(/\s+/g, ' ').trim()
+    if (!v || v.length > REPLY_MAX_CHARS || out.includes(v)) continue
+    out.push(v)
+  }
+  return out.slice(0, REPLY_MAX)
+}
+
+// The suggestions for a waiting question. A question's own choices first, word
+// for word (AskUserQuestion's options, "…: A, B, or C?", a numbered menu the
+// question follows, "X, or Y?"); then Yes / No for a yes/no question; else none.
+// A pick fills the answer box; you send it.
 export function quickReplies(n) {
   if (!n) return []
+  let question = ''
   if (n.kind === 'question' && n.ask) {
     const qs = n.ask.questions || []
     if (qs.length !== 1) return []
     const q = qs[0]
-    if (q.options && q.options.length) return q.multiSelect ? [] : q.options.map((o) => o.label).slice(0, 4)
-    const inl = listChoices(q.question)
-    if (inl.length) return inl.slice(0, 4)
-    return orChoices(q.question).length ? [...orChoices(q.question), GENERIC_REPLIES[2]] : GENERIC_REPLIES
-  }
-  if (n.kind !== 'reply') return []
-  const inl = listChoices(n.question) // a peer's older daemon may still send a list's items
-  if (inl.length) return inl.slice(0, 4)
-  const listed = (n.context && n.context.options) || []
-  if (listed.length >= 2) return listed.slice(0, 4)
-  const alt = orChoices(n.question)
-  if (alt.length) return [...alt, GENERIC_REPLIES[2]]
-  if (/\(\s*y\s*\/\s*n\s*\)|\byes or no\b/i.test(String(n.question || ''))) return ['Yes', 'No']
-  return GENERIC_REPLIES
+    if (q.options && q.options.length) return q.multiSelect ? [] : tidyReplies(q.options.map((o) => o.label)).slice(0, 4)
+    question = q.question
+  } else if (n.kind === 'reply') {
+    question = n.question
+  } else return []
+  const inl = listChoices(question) // the question's own list (a peer's older daemon may still send a list's items)
+  if (inl.length) return tidyReplies(inl)
+  const listed = n.kind === 'reply' ? ((n.context && n.context.options) || []) : []
+  if (listed.length >= 2) return tidyReplies(listed)
+  const alt = orChoices(question)
+  if (alt.length) return tidyReplies(alt)
+  if (questionShape(question) === 'yesno') return /\(\s*y\s*\/\s*n\s*\)|\[y\/n\]/i.test(String(question || '')) ? ['Yes', 'No'] : YES_NO.slice()
+  return []
 }
 
 // The draft a card's quick replies fill (the Reply box, or a question's "Other").

package/ui/prs.js

@@ -28,15 +28,41 @@ export function checksHtml(ck, { compact = false } = {}) {
   return '<span class="pr-checks ' + cls + '"' + (compact ? ' title="' + esc(full) + '" aria-label="' + esc(full) + '"' : '') + '><span aria-hidden="true">' + ic + '</span> ' + esc(compact ? short : full) + '</span>'
 }
 const STATE = { open: 'Open', draft: 'Draft', merged: 'Merged', closed: 'Closed' }
+// 2026-10-29 State by shape plus the word (never colour alone): open ⟟ a PR glyph, draft one with a
+// dashed head, merged the merge glyph, closed the PR glyph with an ✕; not checked a dashed ring.
+const svg = (d) => '<svg class="pr-st-ic" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">' + d + '</svg>'
+export const STATE_IC = {
+  open: svg('<circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M13 6h3a2 2 0 0 1 2 2v7"/><path d="M6 9v12"/>'),
+  draft: svg('<circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M18 6V5"/><path d="M18 11v-1"/><path d="M6 9v12"/>'),
+  merged: svg('<circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M6 21V9a9 9 0 0 0 9 9"/>'),
+  closed: svg('<circle cx="6" cy="6" r="3"/><path d="M6 9v12"/><path d="m21 3-6 6"/><path d="m21 9-6-6"/><path d="M18 11.5V15"/><circle cx="18" cy="18" r="3"/>'),
+  unchecked: svg('<circle cx="12" cy="12" r="8" stroke-dasharray="3 3.3"/>'),
+}
 export function stateHtml(state) {
   if (!state) return ''
-  return '<span class="pr-state ' + esc(state) + '">' + esc(STATE[state] || state) + '</span>'
+  return '<span class="pr-state ' + esc(state) + '">' + (STATE_IC[state] || '') + esc(STATE[state] || state) + '</span>'
+}
+// 2026-10-29 A short ref that couldn't be checked: why, for its data-tip.
+export function uncheckedTip(p) {
+  const what = p.label || ((p.repo ? p.repo.split('/')[1] : p.name || '') + '#' + p.number)
+  const name = String(what).split('#')[0]
+  if (p.unchecked === 'ambiguous') return 'Named in this session, but “' + name + '” is more than one GitHub repo here' + (p.options && p.options.length ? ' (' + p.options.join(', ') + ')' : '') + ', so it wasn’t checked. Link the right one below.'
+  if (p.unchecked === 'unknown') return 'Named in this session, but Leftoff doesn’t know which GitHub repo “' + name + '” is yet (this session has no GitHub remote), so it wasn’t checked. It links once a session in that repo runs on one of your machines, or link it below.'
+  if (p.unchecked === 'no_gh') return 'Named in this session (' + (p.repo || name) + '). No machine with gh signed in has answered yet, so it wasn’t checked.'
+  if (p.unchecked === 'failed') return 'Named in this session (' + (p.repo || name) + '), but gh couldn’t read it just now, so it wasn’t checked. It tries again in a few minutes.'
+  return 'Named in this session (' + (p.repo || name) + '). Checking it with gh…'
+}
+export function uncheckedHtml(p) {
+  const what = p.label || ((p.repo ? p.repo.split('/')[1] : p.name || '') + '#' + p.number)
+  const word = p.unchecked === 'checking' ? 'checking' : 'not checked'
+  const tip = uncheckedTip(p)
+  return '<span class="pr-unchecked" tabindex="0" role="note" data-tip="' + esc(tip) + '" aria-label="' + esc(what + ', ' + word + '. ' + tip) + '">' + STATE_IC.unchecked + '<span class="pr-un-ref">' + esc(what) + '</span><span class="pr-un-word"> · ' + esc(word) + '</span></span>'
 }
 const REVIEW = { approved: 'Approved', changes_requested: 'Changes requested', review_required: 'Review needed' }
 
 // A session card's PRs: one compact line each (#, title, state, checks), three at most.
 export function cardPrsHtml(prs) {
-  const list = (prs || []).filter((p) => p && p.number)
+  const list = (prs || []).filter((p) => p && p.number && !p.unchecked)
   if (!list.length) return ''
   const shown = list.slice(0, 3)
   const more = list.length - shown.length
@@ -80,8 +106,12 @@ export function prActionsHtml(p, { unlinkId = null } = {}) {
 
 // The session page: its PRs with Unlink, and "Link a PR" (a text box: a URL or #number).
 export function sessionPrsSection(s, { mayEdit = true, open = null, details = {} } = {}) {
-  const list = (s.prs || []).filter((p) => p && p.number)
-  let h = '<h2>Pull requests' + (list.length ? ' <span class="count">' + list.length + '</span>' : '') + '</h2>'
+  // 2026-10-29 + prsMore: closed PRs (a card leaves them out) and refs that couldn't be checked
+  const more = (s.prsMore || []).filter((p) => p && p.number)
+  const list = (s.prs || []).filter((p) => p && p.number).concat(more.filter((p) => !p.unchecked && p.url && !(s.prs || []).some((x) => x && x.url === p.url)))
+  const unchecked = more.filter((p) => p.unchecked)
+  const n = list.length + unchecked.length
+  let h = '<h2>Pull requests' + (n ? ' <span class="count">' + n + '</span>' : '') + '</h2>'
   if (list.length) {
     h += '<div class="prlist">' + list.map((p) => {
       // 0.9.8: tap the title (or More…) for the same details as the PRs page, in place; GitHub ↗ still goes out
@@ -93,13 +123,28 @@ export function sessionPrsSection(s, { mayEdit = true, open = null, details = {}
         (isOpen ? prDetailHtml(p, details && details[p.url], {}) : '') + '</div>' +
         prActionsHtml(p, { unlinkId: mayEdit ? s.id : null }) + '</article>'
     }).join('') + '</div>'
-  } else h += '<div class="nocp">No pull requests linked yet. They link on their own from gh pr create, PR links in the chat, or the branch.</div>'
-  if (mayEdit) h += '<form class="prlink addform sess-add" data-pr-link="' + esc(s.id) + '" autocomplete="off"><input name="ref" type="text" inputmode="url" placeholder="Link a PR: paste its link or #number" aria-label="Link a PR: paste its link or #number" autocapitalize="off" spellcheck="false" enterkeyhint="done"><button type="submit" class="btn sm">Link</button></form>'
+  }
+  if (unchecked.length) h += '<div class="pr-unlist">' + unchecked.map(uncheckedHtml).join('') + '</div>'
+  if (!n) h += '<p class="nocp pr-none" data-tip="' + esc(PR_HOW) + '">No PR found for this session' + (noPrWhy(s) ? '<span class="pr-none-why"> · ' + esc(noPrWhy(s)) + '</span>' : '') +
+    (mayEdit ? ' · <label class="linkish pr-none-link" for="' + esc(prInputId(s.id)) + '">Link a PR…</label>' : '') + '</p>'
+  if (mayEdit) h += '<form class="prlink addform sess-add" data-pr-link="' + esc(s.id) + '" autocomplete="off"><input id="' + esc(prInputId(s.id)) + '" name="ref" type="text" inputmode="url" placeholder="Link a PR: paste its link or #number" aria-label="Link a PR: paste its link or #number" autocapitalize="off" spellcheck="false" enterkeyhint="done"><button type="submit" class="btn sm">Link</button></form>'
   return h
 }
+// 2026-10-28 No PR: one quiet line saying why, then Link a PR… (it focuses the box below).
+const PR_HOW = 'PRs link on their own from gh pr create, a PR link or number in your messages or the title, gh pr checkout, a push to a PR’s branch, or the branch itself.'
+const prInputId = (id) => 'prref-' + String(id || '').replace(/[^A-Za-z0-9_-]/g, '_')
+const DEFAULTS = ['main', 'master', 'trunk', 'develop']
+export function noPrWhy(s) {
+  const r = (s && s.repo) || {}
+  if (!r.root && !r.name && !(s && s.repoName && s.repoName !== 'no-repo')) return 'not in a git repo'
+  if (r.branch && DEFAULTS.includes(r.branch)) return 'it ran on ' + r.branch + ' and named no PR'
+  if (r.branch) return 'no open PR for ' + r.branch
+  return ''
+}
 // 0.8.5: why a PR is linked, in words (the daemon sends created / you / branch / manual).
-export const WHY = { created: 'created here', you: 'you mentioned it', branch: 'same branch', mentioned: 'same branch', manual: 'linked by you' }
-const WHY_ORDER = ['manual', 'created', 'you', 'branch', 'mentioned']
+// 2026-10-28: + gh (worked on it with gh), pushed, title, commits, ghview.
+export const WHY = { named: 'named in this session', suggested: 'named in this session', created: 'created here', gh: 'worked on here', pushed: 'pushed to its branch', you: 'you mentioned it', title: 'named in the title', commits: 'has this session’s commits', branch: 'same branch', ghview: 'looked up here', mentioned: 'same branch', manual: 'linked by you' }
+const WHY_ORDER = ['manual', 'created', 'gh', 'pushed', 'you', 'suggested', 'title', 'commits', 'branch', 'ghview', 'named', 'mentioned']
 export function whyText(r) { const v = r && (r.why || (Array.isArray(r.via) ? WHY_ORDER.find((k) => r.via.includes(k)) : r.via)); return v ? WHY[v] || '' : '' }
 
 // gh missing or signed out: the 0.6.5 status line with the fix to copy.

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') },
 }

package/ui/scroll-keep.js

@@ -0,0 +1,247 @@
+// 0.9.18 Scroll, focus and open <details> kept through every redraw (Joel, Oct 28: "the right
+// sidebar ... is doing the scroll jump thing too. It seems to be a bug that's in a lot of places").
+//
+// A live update (session.updated over SSE -> soon() -> render()) repaints whole pages with
+// innerHTML (paintSession, the board, Settings, PRs ...) and polls repaint parts of them. A box
+// that is rebuilt starts at scroll 0, and one taken out and put back in is reset to 0, so
+// whatever you had scrolled jumped to the top. Rather than patch each panel, this watches the
+// page itself: it records where every scroll box is as you scroll (keyed by a stable path:
+// an id or data-scroll-key, then tag.class:index below it), and right after any DOM change
+// (a MutationObserver, which runs before the browser paints, so there's no visible jump) puts a
+// box that came back at 0 where it was. It never moves a box the app itself positioned since
+// (its own scrollTop / scrollTo / scrollIntoView: the chat's stick-to-bottom, a jump to a file),
+// never carries a place over to another page (records belong to the route they were made on),
+// and only ever moves a box away from 0, never to the top. A box whose content came back
+// shorter for a moment (a placeholder, a late image) is put back as the content grows.
+// Focus and the caret in a field come back when a redraw removed the focused element; a
+// <details> you opened or closed stays that way.
+
+// (whole class names that come and go with state; is-* and has-* too)
+const STATE = /^(?:(?:is|has)-.*|on|off|cur|current|open|shut|closed|active|sel|selected|hide|hidden|show|shown|stuck|fold|folded|live|busy|err|warn|dim|faint|new|seen|away|up|down|sheet-up|collapsed|wide|narrow|empty|loading|ready|copied|pinned|exited|done)$/
+
+// One step of an element's path: its own key, or tag + first non-state class + index among like siblings
+export function scrollSeg(el) {
+  const k = el.getAttribute && el.getAttribute('data-scroll-key')
+  if (k) return '[' + k + ']'
+  if (el.id) return '#' + el.id
+  const tag = String(el.tagName || '').toLowerCase()
+  let cls = ''
+  for (const c of el.classList || []) if (!STATE.test(c)) { cls = c; break }
+  let i = 0
+  for (let p = el.previousElementSibling; p; p = p.previousElementSibling) if (p.tagName === el.tagName && (!cls || (p.classList && p.classList.contains(cls)))) i++
+  return tag + (cls ? '.' + cls : '') + (i ? ':' + i : '')
+}
+// The path up to the nearest id / data-scroll-key (or the body)
+export function scrollKey(el) {
+  const parts = []
+  for (let e = el; e && e.nodeType === 1; e = e.parentElement) {
+    const tag = String(e.tagName || '').toLowerCase()
+    if (tag === 'html') { parts.unshift('html'); break }
+    parts.unshift(scrollSeg(e))
+    if (tag === 'body' || e.id || (e.getAttribute && e.getAttribute('data-scroll-key'))) break
+  }
+  return parts.join('>')
+}
+// Back from a path to the element in the page now (null when it isn't there)
+export function findByKey(doc, key) {
+  const parts = String(key || '').split('>')
+  if (!parts[0]) return null
+  let el
+  const a = parts[0]
+  if (a === 'html') el = doc.documentElement
+  else if (a === 'body') el = doc.body
+  else if (a[0] === '#') el = doc.getElementById(a.slice(1))
+  else if (a[0] === '[') { const v = a.slice(1, -1); el = [...doc.querySelectorAll('[data-scroll-key]')].find((e) => e.getAttribute('data-scroll-key') === v) || null }
+  else return null
+  for (let i = 1; el && i < parts.length; i++) {
+    let next = null
+    for (const c of el.children) if (scrollSeg(c) === parts[i]) { next = c; break }
+    el = next
+  }
+  return el || null
+}
+// Whether to put a box back: it came back at 0 (rebuilt or put back in) where it had been further on,
+// and nothing (the app, you) moved it since the record. -> { top, left } to set, or null
+export function restoreFor(rec, cur, { wroteAt = 0 } = {}) {
+  if (!rec || wroteAt > rec.at) return null
+  const t = rec.top > 1 && cur.top === 0 && Math.abs(cur.top - rec.top) > 1
+  const l = rec.left > 1 && cur.left === 0 && Math.abs(cur.left - rec.left) > 1
+  if (!t && !l) return null
+  return { top: t ? rec.top : null, left: l ? rec.left : null }
+}
+
+export function createScrollKeep({ win = window, doc = document, now = () => performance.now(), maxRecords = 80 } = {}) {
+  const recs = new Map() // route|key -> { top, left, at, el: WeakRef }
+  const wrote = new WeakMap() // element -> when the app itself last positioned it
+  const pending = new Map() // element -> { top, left, until, set } a restore the content wasn't tall enough for yet
+  const details = new Map() // route|key -> open, the <details> you opened or closed
+  let lastInput = -1e9, appUntil = -1e9, quietUntil = -1e9, restoring = 0
+  let focus = null // { el, key, start, end, dir } what has focus (kept when a redraw removed it)
+  const stats = { restored: 0, refocused: 0, reopened: 0 }
+  const route = () => win.location.pathname + win.location.hash
+  const se = () => doc.scrollingElement || doc.documentElement
+  const W = typeof WeakRef === 'function' ? (x) => new WeakRef(x) : (x) => ({ deref: () => x })
+  const keyFor = (el) => el === se() ? 'doc' : scrollKey(el)
+  const elFor = (key) => key === 'doc' ? se() : findByKey(doc, key)
+  const user = () => now() - lastInput < 800
+
+  function record(el, t = now()) {
+    if (!el || !el.isConnected) return
+    const k = route() + '|' + keyFor(el)
+    recs.delete(k)
+    recs.set(k, { top: el.scrollTop, left: el.scrollLeft, at: t, el: W(el) })
+    if (recs.size > maxRecords) recs.delete(recs.keys().next().value)
+  }
+  function set(el, top, left) {
+    restoring++
+    try { if (top != null && el.scrollTop !== top) el.scrollTop = top; if (left != null && el.scrollLeft !== left) el.scrollLeft = left } finally { restoring-- }
+    quietUntil = now() + 250
+  }
+
+  // -- as you scroll
+  function onScroll(e) {
+    const el = e.target === doc || e.target === win ? se() : e.target
+    if (!el || el.nodeType !== 1 || !el.isConnected) return
+    const p = pending.get(el)
+    const t = now()
+    if (p) {
+      // still short of where it was and nobody moved it (our own set, or the browser clamping it): keep waiting
+      if (!user() && t < p.until && (el.scrollTop === p.set || el.scrollTop < (p.top || 0))) return
+      pending.delete(el)
+    }
+    const k = route() + '|' + keyFor(el)
+    const r = recs.get(k)
+    const app = t - (wrote.get(el) || -1e9) < 1500 || t < appUntil
+    if (r && !user() && !app && el.scrollTop < r.top - 1 && t - r.at > 0) {
+      // moved up with no hand on it: content came back shorter (clamped) or the box was reset; put it back as it grows
+      const max = el.scrollHeight - el.clientHeight
+      if (el.scrollTop === 0 || el.scrollTop >= max - 1) { pending.set(el, { top: r.top, left: null, until: t + 2000, set: el.scrollTop }); tick(); return }
+    }
+    record(el, t)
+  }
+
+  // -- the app positioning a box itself (never undone)
+  function mark(el) { if (!restoring && el && el.nodeType === 1) { wrote.set(el, now()); pending.delete(el) } }
+  function patchProto() {
+    const E = win.Element && win.Element.prototype
+    if (!E || E.__scrollKeep) return
+    E.__scrollKeep = true
+    for (const prop of ['scrollTop', 'scrollLeft']) {
+      const d = Object.getOwnPropertyDescriptor(E, prop)
+      if (!d || !d.set) continue
+      Object.defineProperty(E, prop, { configurable: true, enumerable: d.enumerable, get: d.get, set(v) { d.set.call(this, v); if (!restoring) { mark(this); record(this) } } })
+    }
+    for (const m of ['scrollTo', 'scroll', 'scrollBy']) {
+      const f = E[m]; if (typeof f !== 'function') continue
+      E[m] = function (...a) { const r = f.apply(this, a); if (!restoring) { mark(this); if (a[0] && a[0].behavior === 'smooth') appUntil = now() + 1500; record(this) } return r }
+    }
+    const siv = E.scrollIntoView
+    if (typeof siv === 'function') E.scrollIntoView = function (...a) {
+      const r = siv.apply(this, a)
+      if (!restoring) { appUntil = now() + (a[0] && a[0].behavior === 'smooth' ? 1500 : 300); for (let p = this.parentElement; p; p = p.parentElement) { mark(p); record(p) } }
+      return r
+    }
+    for (const m of ['scrollTo', 'scroll', 'scrollBy']) {
+      const f = win[m]; if (typeof f !== 'function') continue
+      win[m] = function (...a) { const r = f.apply(win, a); if (!restoring) { mark(se()); if (a[0] && a[0].behavior === 'smooth') appUntil = now() + 1500; record(se()) } return r }
+    }
+  }
+
+  // -- focus and the caret
+  function caret(el) {
+    try { if (el && /^(INPUT|TEXTAREA)$/.test(el.tagName) && el.selectionStart != null) return { start: el.selectionStart, end: el.selectionEnd, dir: el.selectionDirection } } catch {}
+    return null
+  }
+  function onFocusIn(e) { const el = e.target; if (!el || el.nodeType !== 1 || restoring) return; focus = { el, key: scrollKey(el), route: route(), ...(caret(el) || {}) } }
+  function onFocusOut(e) {
+    const el = e.target
+    // a real blur (you clicked away) leaves the element in the page; one a redraw caused takes it out
+    win.setTimeout(() => { if (focus && focus.el === el && el.isConnected && doc.activeElement !== el) focus = null }, 0)
+  }
+  function onSel() { const a = doc.activeElement; if (focus && a === focus.el) Object.assign(focus, caret(a) || {}) }
+
+  // -- right after any change to the page
+  function restoreAll() {
+    const r = route() + '|'
+    for (const [k, rec] of recs) {
+      if (!k.startsWith(r)) continue
+      let el = rec.el.deref()
+      if (!el || !el.isConnected) el = elFor(k.slice(r.length))
+      if (!el) continue
+      if (el !== rec.el.deref()) rec.el = W(el)
+      const cur = { top: el.scrollTop, left: el.scrollLeft }
+      const want = restoreFor(rec, cur, { wroteAt: wrote.get(el) || 0 })
+      if (!want) continue
+      set(el, want.top, want.left)
+      stats.restored++
+      if (want.top != null && el.scrollTop < want.top - 1) { pending.set(el, { top: want.top, left: want.left, until: now() + 2000, set: el.scrollTop }); tick() }
+    }
+    for (const [k, open] of details) {
+      if (!k.startsWith(r)) continue
+      const d = findByKey(doc, k.slice(r.length))
+      if (d && d.tagName === 'DETAILS' && d.open !== open && !d.__skSeen) { d.__skSeen = true; restoring++; try { d.open = open } finally { restoring-- }; stats.reopened++ }
+      if (d) d.__skSeen = true
+    }
+    const a = doc.activeElement
+    if (focus && focus.route !== route()) focus = null // another page: what had focus there stays there
+    if (focus && !focus.el.isConnected && (!a || a === doc.body)) {
+      const el = findByKey(doc, focus.key)
+      if (el && typeof el.focus === 'function' && !el.disabled) {
+        restoring++
+        try {
+          el.focus({ preventScroll: true })
+          if (focus.start != null && caret(el) && el.value.length >= focus.end) el.setSelectionRange(focus.start, focus.end, focus.dir || 'none')
+        } catch {} finally { restoring-- }
+        if (doc.activeElement === el) { focus = { ...focus, el }; stats.refocused++ }
+      } else focus = null
+    }
+  }
+  // a box the content wasn't tall enough for yet: try again for a moment as it grows
+  let ticking = false
+  function tick() {
+    if (ticking) return
+    ticking = true
+    const step = () => {
+      const t = now()
+      for (const [el, p] of pending) {
+        if (t > p.until || !el.isConnected || user() || el.scrollTop !== p.set) { pending.delete(el); continue }
+        set(el, p.top, p.left)
+        p.set = el.scrollTop
+        if (Math.abs(el.scrollTop - p.top) <= 1) { pending.delete(el); record(el) }
+      }
+      if (pending.size) win.requestAnimationFrame(step); else ticking = false
+    }
+    win.requestAnimationFrame(step)
+  }
+  function onMutations(list) {
+    for (const m of list) if (m.addedNodes.length || m.removedNodes.length) { restoreAll(); for (const [el] of pending) if (el.isConnected && el.scrollTop !== pending.get(el).set) pending.delete(el); return }
+  }
+  function onToggle(e) {
+    const d = e.target
+    if (!d || d.tagName !== 'DETAILS' || restoring) return
+    d.__skSeen = true
+    if (now() - lastInput < 600) details.set(route() + '|' + scrollKey(d), d.open)
+  }
+
+  function start() {
+    patchProto()
+    const input = () => { lastInput = now() }
+    for (const ev of ['wheel', 'touchstart', 'touchmove', 'keydown', 'pointerdown', 'mousedown']) win.addEventListener(ev, input, { capture: true, passive: true })
+    doc.addEventListener('scroll', onScroll, { capture: true, passive: true })
+    doc.addEventListener('focusin', onFocusIn, true)
+    doc.addEventListener('focusout', onFocusOut, true)
+    doc.addEventListener('selectionchange', onSel)
+    doc.addEventListener('keyup', onSel, true)
+    doc.addEventListener('input', onSel, true)
+    doc.addEventListener('toggle', onToggle, true)
+    new win.MutationObserver(onMutations).observe(doc.body, { childList: true, subtree: true })
+  }
+  return {
+    start,
+    restoreNow: restoreAll,
+    // our own restore scrolls: a tip that hides on scroll stays up for these
+    quiet: () => now() < quietUntil,
+    stats,
+    _recs: recs,
+  }
+}

package/ui/walk-pop.js

@@ -61,7 +61,7 @@ export function popHtml(c, { esc, icon }) {
 }
 
 // the popover itself: one element on <body>, anchored under the button it explains
-export function initPops({ esc, icon, contentFor, doc = document, win = window }) {
+export function initPops({ esc, icon, contentFor, doc = document, win = window, quiet = () => false }) {
   const pop = doc.createElement('div')
   pop.className = 'lo-pop'; pop.id = 'loPop'; pop.setAttribute('role', 'tooltip'); pop.hidden = true
   doc.body.appendChild(pop)
@@ -129,7 +129,7 @@ export function initPops({ esc, icon, contentFor, doc = document, win = window }
   }, true)
   doc.addEventListener('keydown', (e) => { if (e.key === 'Escape' && cur) { hide(); e.stopPropagation() } }, true)
   for (const ev of ['resize', 'hashchange']) win.addEventListener(ev, () => { if (cur) hide() }, true)
-  // a scroll that moves the button closes it (the thread scrolling beside it doesn't)
-  win.addEventListener('scroll', (e) => { const t = e.target; if (cur && t && (t === doc || t === win || (t.contains && t.contains(cur)))) hide() }, true)
+  // a scroll that moves the button closes it (the thread scrolling beside it doesn't; 0.9.18 nor a redraw putting a box back, quiet())
+  win.addEventListener('scroll', (e) => { const t = e.target; if (cur && !quiet() && t && (t === doc || t === win || (t.contains && t.contains(cur)))) hide() }, true)
   return { hide, refresh, el: pop }
 }