@leftoff/cli 0.0.0-stage → 0.6.3

package/ui/picker.js

@@ -0,0 +1,294 @@
+// Leftoff's own dropdowns (v0.5.9). The app never uses a native <select> or
+// <datalist>: their menus are the OS's (a grey popup on a Mac, a wheel or a
+// bare list with a stray "/" on an iPhone) and can't be styled. Two elements:
+//
+//   <lo-select id="f-tz" aria-label="Time zone"><option value="">…</option>…</lo-select>
+//     A button that opens a listbox. Like a select: .value, .selectedIndex,
+//     .options, .disabled, and a bubbling "change" event. More than 10 options
+//     get a filter box at the top of the menu.
+//   <lo-combo id="f-space-repo" placeholder="repo folder name"><option value="clutch_hunt" data-sub="~/src">…</lo-combo>
+//     A text field with suggestions that filter as you type; any text is allowed.
+//     .value is the text. "input" and "change" bubble from it.
+//
+// Both: arrows, Home/End, Enter, Escape, Tab; a click outside closes; the menu
+// never leaves the viewport, and under 600px wide it opens as a bottom sheet.
+// ARIA: combobox + listbox + option, aria-activedescendant, aria-selected.
+// Markup helpers: selectHtml() and comboHtml(). test/unit/ui-no-native-select.test.mjs
+// fails if any other file in ui/ writes a native select or datalist.
+
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])
+const CHEVRON = '<svg class="lo-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg>'
+const CHECK = '<svg class="lo-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>'
+const SHEET_MAX = 599.98
+const FILTER_AT = 10
+let uid = 0
+let open = null // { host, menu, list, items, active, filter, backdrop }
+
+const attrs = (o = {}) => Object.entries(o).filter(([, v]) => v != null && v !== false).map(([k, v]) => ' ' + k + (v === true ? '' : '="' + esc(v) + '"')).join('')
+
+// options: [{ value, label, sub, selected }] or [value, label] pairs or plain strings
+function normOpts(options) {
+  return (options || []).map((o) => (Array.isArray(o) ? { value: o[0], label: o[1] != null ? o[1] : o[0], sub: o[2] } : typeof o === 'object' && o ? o : { value: o, label: o }))
+}
+export function selectHtml({ id, value, options, label, cls, attrs: extra, disabled } = {}) {
+  const opts = normOpts(options)
+  const has = opts.some((o) => String(o.value) === String(value))
+  return '<lo-select' + attrs({ id, class: cls, 'aria-label': label, disabled: !!disabled, ...(extra || {}) }) + '>' +
+    opts.map((o, i) => '<option' + attrs({ value: o.value, 'data-sub': o.sub, selected: has ? String(o.value) === String(value) : (o.selected || (value == null && i === 0)) }) + '>' + esc(o.label) + '</option>').join('') + '</lo-select>'
+}
+export function comboHtml({ id, value, options, label, placeholder, cls, attrs: extra } = {}) {
+  return '<lo-combo' + attrs({ id, class: cls, 'aria-label': label, placeholder, value, ...(extra || {}) }) + '>' +
+    normOpts(options).map((o) => '<option' + attrs({ value: o.value, 'data-sub': o.sub }) + '>' + esc(o.label) + '</option>').join('') + '</lo-combo>'
+}
+
+const readOpts = (el) => [...el.querySelectorAll(':scope > option')].map((o) => ({ value: o.getAttribute('value') != null ? o.getAttribute('value') : o.textContent, label: o.textContent, sub: o.dataset.sub || '', selected: o.hasAttribute('selected') }))
+const narrow = () => window.innerWidth <= SHEET_MAX
+const fire = (el, type) => el.dispatchEvent(new Event(type, { bubbles: true }))
+
+// (a plain class under Node, so the unit tests can import the markup helpers)
+const Base = typeof HTMLElement === 'undefined' ? class {} : HTMLElement
+class LoSelect extends Base {
+  connectedCallback() {
+    if (this._ready) return
+    this._ready = true
+    this._opts = readOpts(this)
+    const sel = this._opts.findIndex((o) => o.selected)
+    this._index = sel >= 0 ? sel : (this._opts.length ? 0 : -1)
+    this._id = 'lo' + (++uid)
+    const lbl = this.getAttribute('aria-label') || ''
+    this.removeAttribute('aria-label')
+    this.innerHTML = '<button type="button" class="lo-sel-btn" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="' + this._id + '-list"' + (lbl ? ' aria-label="' + esc(lbl) + '"' : '') + (this.hasAttribute('disabled') ? ' disabled' : '') + '>' +
+      '<span class="lo-sel-val"></span>' + CHEVRON + '</button>'
+    this._btn = this.firstChild
+    if (!lbl && this.id) { const l = document.querySelector('label[for="' + CSS.escape(this.id) + '"]'); if (l) { if (!l.id) l.id = this._id + '-label'; this._btn.setAttribute('aria-labelledby', l.id + ' ' + this._id + '-val') } }
+    this._btn.querySelector('.lo-sel-val').id = this._id + '-val'
+    this._paint()
+    this._btn.addEventListener('click', () => (open && open.host === this ? closeMenu() : openMenu(this)))
+    this._btn.addEventListener('keydown', (e) => onKey(this, e))
+  }
+  _paint() { const o = this._opts[this._index]; const v = this._btn && this._btn.querySelector('.lo-sel-val'); if (v) v.textContent = o ? o.label : ''; if (this._btn) this._btn.title = o ? o.label : '' }
+  get options() { return (this._opts || readOpts(this)).map((o) => ({ ...o })) }
+  get value() { const o = (this._opts || readOpts(this))[this._ready ? this._index : Math.max(0, readOpts(this).findIndex((x) => x.selected))]; return o ? String(o.value) : '' }
+  set value(v) { if (!this._ready) this.connectedCallback(); const i = this._opts.findIndex((o) => String(o.value) === String(v)); if (i >= 0) { this._index = i; this._paint() } }
+  get selectedIndex() { return this._ready ? this._index : Math.max(0, readOpts(this).findIndex((x) => x.selected)) }
+  set selectedIndex(i) { if (!this._ready) this.connectedCallback(); if (i >= 0 && i < this._opts.length) { this._index = i; this._paint() } }
+  get disabled() { return this.hasAttribute('disabled') }
+  set disabled(v) { this.toggleAttribute('disabled', !!v); if (this._btn) this._btn.disabled = !!v }
+  focus() { if (this._btn) this._btn.focus() }
+  // the control a menu anchors to and returns focus to
+  get _anchor() { return this._btn }
+  _choose(i) {
+    if (i < 0 || i >= this._opts.length) return
+    const changed = i !== this._index
+    this._index = i; this._paint(); closeMenu(); this._btn.focus()
+    if (changed) { fire(this, 'input'); fire(this, 'change') }
+  }
+  _items(q) { return this._opts.map((o, i) => ({ ...o, i })).filter((o) => !q || (o.label + ' ' + o.value + ' ' + o.sub).toLowerCase().includes(q)) }
+}
+
+class LoCombo extends Base {
+  connectedCallback() {
+    if (this._ready) return
+    this._ready = true
+    this._opts = readOpts(this)
+    this._id = 'lo' + (++uid)
+    const a = (k) => this.getAttribute(k)
+    const inputId = this.id ? this.id + '-input' : this._id + '-input'
+    this.innerHTML = '<input type="text" class="lo-combo-input" id="' + esc(inputId) + '" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="' + this._id + '-list" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false"' +
+      (a('aria-label') ? ' aria-label="' + esc(a('aria-label')) + '"' : '') + (a('placeholder') ? ' placeholder="' + esc(a('placeholder')) + '"' : '') + '>' +
+      '<button type="button" class="lo-combo-btn" tabindex="-1" aria-label="Show suggestions">' + CHEVRON + '</button>'
+    this.removeAttribute('aria-label')
+    this._input = this.querySelector('input')
+    if (a('value')) this._input.value = a('value')
+    const btn = this.querySelector('.lo-combo-btn')
+    btn.addEventListener('mousedown', (e) => e.preventDefault())
+    btn.addEventListener('click', () => { if (open && open.host === this) closeMenu(); else { this._input.focus(); openMenu(this, { all: true }) } })
+    this._input.addEventListener('input', (e) => { e.stopPropagation(); fire(this, 'input'); if (this._items(this._q()).length) openMenu(this); else closeMenu() })
+    this._input.addEventListener('change', (e) => { e.stopPropagation(); fire(this, 'change') })
+    this._input.addEventListener('keydown', (e) => onKey(this, e))
+    this._input.addEventListener('focus', () => { if (narrow()) return; if (!this._input.value && this._opts.length) openMenu(this, { all: true }) })
+  }
+  _q() { return this._input ? this._input.value.trim().toLowerCase() : '' }
+  get options() { return (this._opts || readOpts(this)).map((o) => ({ ...o })) }
+  get value() { return this._input ? this._input.value : (this.getAttribute('value') || '') }
+  set value(v) { if (this._input) this._input.value = v == null ? '' : String(v); else this.setAttribute('value', v == null ? '' : String(v)) }
+  focus() { if (this._input) this._input.focus() }
+  get _anchor() { return this._input }
+  _choose(i) {
+    const o = this._opts[i]
+    if (!o) return
+    this._input.value = String(o.value); closeMenu(); this._input.focus()
+    fire(this, 'input'); fire(this, 'change')
+  }
+  _items(q, all) {
+    const list = this._opts.map((o, i) => ({ ...o, i }))
+    if (all || !q) return list
+    // names that start with the text first, then the rest that contain it
+    const starts = list.filter((o) => o.label.toLowerCase().startsWith(q))
+    return starts.concat(list.filter((o) => !starts.includes(o) && (o.label + ' ' + o.sub).toLowerCase().includes(q)))
+  }
+}
+
+function openMenu(host, { all = false } = {}) {
+  if (host.disabled) return
+  const combo = host instanceof LoCombo
+  if (open && open.host !== host) closeMenu()
+  // a select opens as a bottom sheet on a phone; a combo keeps its field in
+  // view (the keyboard is up), so its list is a full-width panel under it
+  const sheet = narrow() && !combo
+  if (!open) {
+    const menu = document.createElement('div')
+    menu.className = 'lo-menu' + (sheet ? ' sheet' : '')
+    const label = host.dataset.title || (host._anchor && (host._anchor.getAttribute('aria-label') || (host._anchor.getAttribute('aria-labelledby') && document.getElementById(host._anchor.getAttribute('aria-labelledby').split(' ')[0]) || {}).textContent)) || ''
+    const wantFilter = !combo && host._opts.length > FILTER_AT
+    menu.innerHTML = (sheet ? '<div class="lo-sheet-head"><span>' + esc(label) + '</span><button type="button" class="lo-sheet-done">Done</button></div>' : '') +
+      (wantFilter ? '<div class="lo-filter-wrap"><input type="search" class="lo-filter" placeholder="Filter…" aria-label="Filter ' + esc(label) + '" autocomplete="off" autocapitalize="off" spellcheck="false" aria-controls="' + host._id + '-list"></div>' : '') +
+      '<div class="lo-list" role="listbox" id="' + host._id + '-list"' + (label ? ' aria-label="' + esc(label) + '"' : '') + '></div>'
+    let backdrop = null
+    if (sheet) { backdrop = document.createElement('div'); backdrop.className = 'lo-backdrop'; document.body.appendChild(backdrop); backdrop.addEventListener('click', () => closeMenu()) }
+    document.body.appendChild(menu)
+    open = { host, menu, list: menu.querySelector('.lo-list'), filter: menu.querySelector('.lo-filter'), backdrop, active: -1, items: [] }
+    host._anchor.setAttribute('aria-expanded', 'true')
+    host.classList.add('open')
+    menu.addEventListener('mousedown', (e) => { if (!e.target.closest('.lo-filter')) e.preventDefault() })
+    menu.addEventListener('click', (e) => {
+      if (e.target.closest('.lo-sheet-done')) { closeMenu(); host._anchor.focus(); return }
+      const opt = e.target.closest('[role="option"]')
+      if (opt) host._choose(Number(opt.dataset.i))
+    })
+    menu.addEventListener('mousemove', (e) => { const opt = e.target.closest('[role="option"]'); if (opt) setActive(open.items.findIndex((x) => x.i === Number(opt.dataset.i)), { scroll: false }) })
+    if (open.filter) {
+      open.filter.addEventListener('input', () => fill(host, open.filter.value.trim().toLowerCase()))
+      open.filter.addEventListener('keydown', (e) => onKey(host, e))
+    }
+  }
+  fill(host, combo ? (all ? '' : host._q()) : '', { all })
+  if (open.filter && !sheet) open.filter.focus({ preventScroll: true })
+}
+
+function fill(host, q, { all = false } = {}) {
+  if (!open) return
+  const combo = host instanceof LoCombo
+  open.items = host._items(q, all)
+  const cur = combo ? -1 : host._index
+  const needle = q && !all ? q : ''
+  const mark = (s) => { if (!needle) return esc(s); const i = s.toLowerCase().indexOf(needle); return i < 0 ? esc(s) : esc(s.slice(0, i)) + '<mark>' + esc(s.slice(i, i + needle.length)) + '</mark>' + esc(s.slice(i + needle.length)) }
+  open.list.innerHTML = open.items.length ? open.items.map((o, k) => {
+    const sel = combo ? String(o.value) === host.value : o.i === cur
+    return '<div role="option" class="lo-opt' + (sel ? ' sel' : '') + '" id="' + host._id + '-o' + o.i + '" data-i="' + o.i + '" aria-selected="' + sel + '">' + CHECK +
+      '<span class="lo-opt-text"><span class="lo-opt-label">' + mark(o.label) + '</span>' + (o.sub ? '<span class="lo-opt-sub">' + esc(o.sub) + '</span>' : '') + '</span></div>'
+  }).join('') : '<div class="lo-empty">No match</div>'
+  const selPos = open.items.findIndex((o) => (combo ? String(o.value) === host.value : o.i === cur))
+  setActive(combo ? (q && !all && open.items.length ? 0 : selPos) : (selPos >= 0 ? selPos : 0), { scroll: true })
+  place()
+}
+
+function setActive(k, { scroll = true } = {}) {
+  if (!open) return
+  const { list, items, host } = open
+  open.active = k
+  list.querySelectorAll('.lo-opt.active').forEach((el) => el.classList.remove('active'))
+  const it = items[k]
+  const target = open.filter || host._anchor
+  if (!it) { host._anchor.removeAttribute('aria-activedescendant'); if (open.filter) open.filter.removeAttribute('aria-activedescendant'); return }
+  const el = document.getElementById(host._id + '-o' + it.i)
+  if (el) { el.classList.add('active'); if (scroll) el.scrollIntoView({ block: 'nearest' }) }
+  target.setAttribute('aria-activedescendant', host._id + '-o' + it.i)
+}
+
+// Desktop: under the control (above it when there is more room there), at
+// least as wide as the control, never past the viewport's edges.
+function place() {
+  if (!open) return
+  const { menu, host } = open
+  const vw = document.documentElement.clientWidth, vh = (window.visualViewport && window.visualViewport.height) || window.innerHeight
+  if (menu.classList.contains('sheet')) { menu.style.maxHeight = Math.round(vh * 0.72) + 'px'; return }
+  const r = host.getBoundingClientRect()
+  const pad = 8
+  const full = narrow()
+  menu.classList.toggle('wide', full)
+  menu.style.minWidth = (full ? vw - 2 * pad : Math.min(Math.max(r.width, 180), vw - 2 * pad)) + 'px'
+  menu.style.maxWidth = (full ? vw - 2 * pad : Math.min(440, vw - 2 * pad)) + 'px'
+  const below = vh - r.bottom - pad, above = r.top - pad
+  const up = below < 220 && above > below
+  const room = Math.max(120, Math.min(340, (up ? above : below) - 6))
+  menu.style.maxHeight = room + 'px'
+  const w = menu.offsetWidth, h = menu.offsetHeight
+  menu.style.left = Math.max(pad, Math.min(r.left, vw - pad - w)) + 'px'
+  menu.style.top = (up ? Math.max(pad, r.top - 6 - h) : r.bottom + 6) + 'px'
+  menu.classList.toggle('up', up)
+}
+
+export function closeMenu() {
+  if (!open) return
+  const { menu, backdrop, host } = open
+  open = null
+  menu.remove(); if (backdrop) backdrop.remove()
+  host.classList.remove('open')
+  if (host._anchor) { host._anchor.setAttribute('aria-expanded', 'false'); host._anchor.removeAttribute('aria-activedescendant') }
+}
+
+function typeahead(host, ch) {
+  host._ta = (Date.now() - (host._taAt || 0) < 700 ? host._ta || '' : '') + ch.toLowerCase()
+  host._taAt = Date.now()
+  const opts = open ? open.items : host._opts.map((o, i) => ({ ...o, i }))
+  const k = opts.findIndex((o) => o.label.toLowerCase().startsWith(host._ta))
+  if (k < 0) return
+  if (open) setActive(k); else host._choose(opts[k].i)
+}
+
+function onKey(host, e) {
+  const combo = host instanceof LoCombo
+  const isOpen = open && open.host === host
+  const n = isOpen ? open.items.length : 0
+  switch (e.key) {
+    case 'ArrowDown': case 'ArrowUp': {
+      e.preventDefault()
+      if (!isOpen) { openMenu(host, { all: combo && !host._q() }); if (e.altKey) return; return }
+      if (e.altKey && e.key === 'ArrowUp') { if (open.active >= 0) host._choose(open.items[open.active].i); return }
+      const d = e.key === 'ArrowDown' ? 1 : -1
+      setActive(n ? (open.active < 0 ? (d > 0 ? 0 : n - 1) : (open.active + d + n) % n) : -1)
+      return
+    }
+    case 'Home': case 'End':
+      if (!isOpen || (combo && !e.ctrlKey)) return
+      e.preventDefault(); setActive(e.key === 'Home' ? 0 : n - 1); return
+    case 'PageDown': case 'PageUp':
+      if (!isOpen) return
+      e.preventDefault(); setActive(Math.max(0, Math.min(n - 1, open.active + (e.key === 'PageDown' ? 8 : -8)))); return
+    case 'Enter':
+      if (isOpen && open.active >= 0 && open.items[open.active]) { e.preventDefault(); host._choose(open.items[open.active].i); return }
+      if (!combo) { e.preventDefault(); if (!isOpen) openMenu(host) }
+      return
+    case ' ':
+      if (combo || (open && e.target === open.filter)) return
+      e.preventDefault()
+      if (isOpen && open.active >= 0) host._choose(open.items[open.active].i); else if (!isOpen) openMenu(host)
+      return
+    case 'Escape':
+      if (isOpen) { e.preventDefault(); e.stopPropagation(); closeMenu(); host._anchor.focus() }
+      return
+    case 'Tab':
+      if (isOpen) closeMenu()
+      return
+    default:
+      if (!combo && e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && !(open && e.target === open.filter)) { e.preventDefault(); typeahead(host, e.key) }
+  }
+}
+
+if (typeof window !== 'undefined' && window.customElements && !customElements.get('lo-select')) {
+  customElements.define('lo-select', LoSelect)
+  customElements.define('lo-combo', LoCombo)
+  // a click outside (or a tap on the page behind a sheet) closes; so does the page moving under a desktop menu
+  document.addEventListener('pointerdown', (e) => { if (open && !open.menu.contains(e.target) && !open.host.contains(e.target)) closeMenu() }, true)
+  window.addEventListener('resize', () => { if (open) closeMenu() })
+  document.addEventListener('scroll', (e) => { if (open && !open.menu.contains(e.target)) place() }, true)
+  // <label for="f-tz"> focuses (and on a click, opens) the control, as it would a select
+  document.addEventListener('click', (e) => {
+    const l = e.target.closest && e.target.closest('label[for]')
+    if (!l) return
+    const host = document.getElementById(l.getAttribute('for'))
+    if (!host || !(host instanceof LoSelect || host instanceof LoCombo)) return
+    e.preventDefault(); host.focus()
+  })
+}

package/ui/relay-client.js

@@ -0,0 +1,187 @@
+// The board through the hosted relay (v0.6.0, "Use from anywhere").
+//
+// Loaded on every board page; it does nothing unless the relay marked the page
+// (<meta name="leftoff-relay">, added at <user>.leftoff.dev only). Then every
+// same-origin /v1/ call the board makes is sealed with this browser's device
+// key (made at pairing, kept in IndexedDB, not extractable) and sent to one of
+// your Macs through /_relay/api. The relay passes ciphertext. The live-update
+// stream becomes a long-poll over the same tunnel. Which Mac: the one you
+// picked in the status popover, else the most recently active one.
+import { sealRequest, openResponse } from './relay-crypto.js'
+
+const meta = typeof document !== 'undefined' && document.querySelector('meta[name="leftoff-relay"]')
+export const RELAY_USER = meta ? meta.getAttribute('content') : null
+const MAC_KEY = 'leftoff.relay.mac'
+const realFetch = typeof window !== 'undefined' ? window.fetch.bind(window) : null
+
+// ------------------------------------------------------------ key store
+
+function idb() {
+  return new Promise((resolve, reject) => {
+    const r = indexedDB.open('leftoff-relay', 1)
+    r.onupgradeneeded = () => r.result.createObjectStore('keys')
+    r.onsuccess = () => resolve(r.result)
+    r.onerror = () => reject(r.error)
+  })
+}
+export async function saveDeviceKey(rec) {
+  const db = await idb()
+  await new Promise((resolve, reject) => { const t = db.transaction('keys', 'readwrite'); t.objectStore('keys').put(rec, 'device'); t.oncomplete = resolve; t.onerror = () => reject(t.error) })
+}
+export async function loadDeviceKey() {
+  try {
+    const db = await idb()
+    return await new Promise((resolve) => { const t = db.transaction('keys', 'readonly'); const g = t.objectStore('keys').get('device'); g.onsuccess = () => resolve(g.result || null); g.onerror = () => resolve(null) })
+  } catch { return null }
+}
+export async function forgetDeviceKey() {
+  try { const db = await idb(); await new Promise((resolve) => { const t = db.transaction('keys', 'readwrite'); t.objectStore('keys').delete('device'); t.oncomplete = resolve; t.onerror = resolve }) } catch {}
+}
+
+// ------------------------------------------------------------ state
+
+const relay = { user: RELAY_USER, device: null, key: null, status: null, mac: null, ready: null, latencyMs: null }
+
+function pickedMac() { try { return localStorage.getItem(MAC_KEY) } catch { return null } }
+function remember(mac) {
+  try { if (mac) localStorage.setItem(MAC_KEY, mac); else localStorage.removeItem(MAC_KEY) } catch {}
+}
+function cookieMac(mac) { document.cookie = 'lo_mac=' + encodeURIComponent(mac || '') + '; Path=/; SameSite=Lax; Max-Age=' + (mac ? 31536000 : 0) + (location.protocol === 'https:' ? '; Secure' : '') }
+
+async function refreshStatus() {
+  const t0 = performance.now()
+  const res = await realFetch('/_relay/status', { credentials: 'same-origin', cache: 'no-store' })
+  if (res.status === 401) { notPaired(); throw new Error('not paired') }
+  relay.status = await res.json()
+  relay.latencyMs = Math.round(performance.now() - t0)
+  const online = relay.status.macs.filter((m) => m.online).map((m) => m.machine)
+  const want = pickedMac()
+  relay.mac = want && online.includes(want) ? want : relay.status.default
+  cookieMac(relay.mac)
+  return relay.status
+}
+
+async function init() {
+  const rec = await loadDeviceKey()
+  if (!rec || !rec.key || (rec.user && rec.user !== RELAY_USER)) { needsKey(); throw new Error('no device key') }
+  relay.device = rec.device; relay.key = rec.key
+  await refreshStatus()
+  if (!relay.mac) { asleep(); throw new Error('asleep') }
+}
+
+// ------------------------------------------------------------ the tunnel
+
+async function tunnel(url, init = {}, retried = false) {
+  await relay.ready
+  const method = String(init.method || 'GET').toUpperCase()
+  let b = init.body == null ? null : init.body
+  if (b != null && typeof b !== 'string') b = await new Response(b).text()
+  const h = {}
+  const hdrs = new Headers(init.headers || {})
+  if (hdrs.get('content-type')) h['content-type'] = hdrs.get('content-type')
+  const env = await sealRequest(relay.key, { device: relay.device, machine: relay.mac, body: { m: method, p: url.pathname + url.search, b, h } })
+  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) {
+    const out = await openResponse(relay.key, env, await res.json())
+    return new Response(out.b, { status: out.s, headers: out.h })
+  }
+  const j = await res.clone().json().catch(() => ({}))
+  if (res.status === 401) { notPaired(j.code === 'unknown_device'); return res }
+  if (res.status === 503 && j.code === 'mac_offline' && !retried) {
+    // the Mac you were on went to sleep: another one takes over, or the asleep page
+    if (j.default && j.default !== relay.mac) { relay.mac = j.default; cookieMac(relay.mac); window.dispatchEvent(new CustomEvent('leftoff-relay', { detail: { mac: relay.mac, switched: true } })); return tunnel(url, init, true) }
+    asleep()
+  }
+  return res
+}
+
+function patchedFetch(input, init) {
+  try {
+    const url = new URL(typeof input === 'string' ? input : input.url, location.href)
+    if (url.origin === location.origin && url.pathname.startsWith('/v1/')) return tunnel(url, typeof input === 'string' ? init : { method: input.method, headers: input.headers, body: init && init.body, ...(init || {}) })
+  } catch {}
+  return realFetch(input, init)
+}
+
+// EventSource('/v1/stream') -> long-polls of GET /v1/events through the tunnel.
+class RelayEventSource extends EventTarget {
+  constructor(url) {
+    super()
+    this.url = url; this.readyState = 0; this.onopen = null; this.onerror = null; this.onmessage = null
+    this.seq = null; this.ctrl = null
+    this.loop()
+  }
+  async loop() {
+    let fails = 0
+    while (this.readyState !== 2) {
+      try {
+        this.ctrl = new AbortController()
+        const res = await patchedFetch('/v1/events?after=' + (this.seq == null ? -1 : this.seq) + '&ms=20000', { signal: this.ctrl.signal })
+        if (!res.ok) throw new Error('HTTP ' + res.status)
+        const j = await res.json()
+        if (this.readyState === 0) { this.readyState = 1; if (this.onopen) this.onopen(new Event('open')) }
+        const first = this.seq == null
+        this.seq = j.seq
+        if (!first) for (const e of j.events || []) {
+          const ev = new MessageEvent(e.event, { data: JSON.stringify(e.data) })
+          this.dispatchEvent(ev)
+        }
+        fails = 0
+      } catch (e) {
+        if (this.readyState === 2) return
+        fails++
+        if (this.onerror) this.onerror(new Event('error'))
+        await new Promise((r) => setTimeout(r, Math.min(15000, 1000 * 2 ** Math.min(fails, 4))))
+      }
+    }
+  }
+  close() { this.readyState = 2; if (this.ctrl) this.ctrl.abort() }
+}
+
+// ------------------------------------------------------------ screens
+
+function screen(title, html) {
+  const el = document.createElement('div')
+  el.className = 'relay-screen'
+  el.setAttribute('role', 'dialog')
+  el.innerHTML = '<div class="relay-card"><div class="relay-logo">Leftoff</div><h1>' + title + '</h1>' + html + '</div>'
+  const put = () => { document.querySelectorAll('.relay-screen').forEach((x) => x.remove()); document.body.appendChild(el) }
+  if (document.body) put(); else document.addEventListener('DOMContentLoaded', put)
+}
+function needsKey() {
+  screen('Pair this browser again', '<p>This browser has a pass for ' + esc(RELAY_USER) + '.leftoff.dev but not the key that unlocks your board (it lives only in this browser, and it’s gone: private browsing, cleared website data, or another browser).</p>' +
+    '<p>On a Mac: Settings → Phone &amp; remote → <b>Pair a phone</b>, then scan the QR code.</p><p><a class="btn primary" href="/pair.html">I have a code</a></p>')
+}
+function notPaired(revoked) {
+  forgetDeviceKey()
+  screen('This browser isn’t paired anymore', '<p>' + (revoked ? 'It was revoked on one of your Macs.' : 'It was revoked, or its pass expired.') + ' Pair it again from a Mac: Settings → Phone &amp; remote → <b>Pair a phone</b>.</p><p><a class="btn primary" href="/pair.html">I have a code</a></p>')
+}
+let asleepShown = false
+function asleep() {
+  if (asleepShown) return
+  asleepShown = true
+  // the relay draws the asleep page (with when each Mac was last seen)
+  location.replace('/?asleep=' + Date.now())
+}
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (ch) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch]))
+
+// ------------------------------------------------------------ public
+
+export const leftoffRelay = {
+  user: RELAY_USER,
+  get mac() { return relay.mac },
+  get device() { return relay.device },
+  get latencyMs() { return relay.latencyMs },
+  status: () => refreshStatus(),
+  // Switch Macs: the board reloads from the other one.
+  pick(mac) { remember(mac); cookieMac(mac); location.reload() },
+}
+
+if (RELAY_USER) {
+  window.fetch = patchedFetch
+  window.EventSource = RelayEventSource
+  window.leftoffRelay = leftoffRelay
+  relay.ready = init()
+  relay.ready.catch(() => {})
+  document.documentElement.classList.add('via-relay')
+}

package/ui/relay-crypto.js

@@ -0,0 +1,155 @@
+// End-to-end encryption between a paired browser and your Macs, for
+// "Use from anywhere" (v0.6.0). The same file runs in the browser (served to
+// the page) and in the daemon (Node's WebCrypto), so both sides agree by
+// construction. Nothing here is secret: the security is in the keys.
+//
+// Pairing (docs/relay.md has the picture):
+//   code    16 Crockford base32 characters, XXXX-XXXX-XXXX-XXXX. The first 4
+//           are the pairing id the relay routes by; the whole code is the
+//           secret, and it reaches the phone only inside the QR code / link
+//           fragment (#…), which browsers never send to a server, or typed.
+//   browser makes a P-256 key pair, sends { pair, pub, name, mac } where
+//           mac = HMAC(code, "leftoff-pair-v1|browser|<pair>|<pub>")
+//   Mac     checks mac, makes its own P-256 key, answers { device, pub, mac }
+//           with mac = HMAC(code, "leftoff-pair-v1|mac|<pair>|<browserPub>|<macPub>|<device>")
+//   both    K = HKDF-SHA256(ECDH, salt = code, info = "leftoff-relay-device-v1|<device>")
+// The relay carries all of it and learns neither the code nor K: the ECDH
+// private halves never leave the browser and the Mac, and the two MACs stop
+// it from swapping in its own keys while the code is live (10 minutes).
+//
+// Requests: AES-256-GCM under K, a fresh 12-byte IV each, with the device,
+// the target Mac, the request id and the time bound in as additional data,
+// so a request can't be replayed, moved to the other Mac or answered with a
+// different response.
+const C = globalThis.crypto
+const subtle = C.subtle
+const te = new TextEncoder()
+const td = new TextDecoder()
+
+export const CODE_ALPHABET = '0123456789ABCDEFGHJKMNPQRSTVWXYZ'
+export const PAIR_TTL_MS = 10 * 60 * 1000
+export const REQ_WINDOW_MS = 2 * 60 * 1000
+
+export function b64u(bytes) {
+  const b = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes)
+  let s = ''
+  for (let i = 0; i < b.length; i++) s += String.fromCharCode(b[i])
+  return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+}
+export function unb64u(s) {
+  s = String(s || '').replace(/-/g, '+').replace(/_/g, '/')
+  while (s.length % 4) s += '='
+  const bin = atob(s)
+  const out = new Uint8Array(bin.length)
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i)
+  return out
+}
+export function randomBytes(n) { return C.getRandomValues(new Uint8Array(n)) }
+export function randomId(n = 16) { return b64u(randomBytes(n)) }
+
+// ------------------------------------------------------------ pairing codes
+
+export function newPairCode() {
+  const r = randomBytes(16)
+  let s = ''
+  for (let i = 0; i < 16; i++) s += CODE_ALPHABET[r[i] & 31]
+  return s.match(/.{4}/g).join('-')
+}
+// Typed by hand: case, dashes and spaces don't matter; O→0, I/L→1 as Crockford says.
+export function normalizeCode(code) {
+  const s = String(code || '').toUpperCase().replace(/[\s-]/g, '').replace(/O/g, '0').replace(/[IL]/g, '1')
+  if (s.length !== 16 || [...s].some((ch) => !CODE_ALPHABET.includes(ch))) return null
+  return s.match(/.{4}/g).join('-')
+}
+export function pairIdOf(code) { const n = normalizeCode(code); return n ? n.slice(0, 4) : null }
+// A link's fragment, #XXXX-XXXX-XXXX-XXXX (or #c=…): the code, or null.
+export function codeFromHash(hash) {
+  const h = String(hash || '').replace(/^#/, '')
+  const m = h.match(/(?:^|[&?])c=([^&]+)/)
+  return normalizeCode(decodeURIComponent(m ? m[1] : h))
+}
+export function pairExpired(record, now = Date.now()) { return !record || !(record.expiresAt > now) }
+
+async function hmacKey(code) {
+  return subtle.importKey('raw', te.encode(normalizeCode(code) || ''), { name: 'HMAC', hash: 'SHA-256' }, false, ['sign', 'verify'])
+}
+export async function pairMac(code, parts) {
+  const k = await hmacKey(code)
+  return b64u(await subtle.sign('HMAC', k, te.encode('leftoff-pair-v1|' + parts.join('|'))))
+}
+export async function pairMacOk(code, parts, mac) {
+  const k = await hmacKey(code)
+  try { return await subtle.verify('HMAC', k, unb64u(mac), te.encode('leftoff-pair-v1|' + parts.join('|'))) } catch { return false }
+}
+
+// P-256 because every Safari since 2017 has it.
+export async function newEcdh({ extractable = false } = {}) {
+  const kp = await subtle.generateKey({ name: 'ECDH', namedCurve: 'P-256' }, extractable, ['deriveBits'])
+  const pub = b64u(await subtle.exportKey('raw', kp.publicKey))
+  return { privateKey: kp.privateKey, pub }
+}
+// K as an AES-GCM key. In the browser it's non-extractable: page code can use
+// it but can't read it out. The Mac asks for the raw bytes to wrap them.
+export async function deriveDeviceKey({ privateKey, peerPub, code, device, extractable = false }) {
+  const peer = await subtle.importKey('raw', unb64u(peerPub), { name: 'ECDH', namedCurve: 'P-256' }, false, [])
+  const shared = await subtle.deriveBits({ name: 'ECDH', public: peer }, privateKey, 256)
+  const ikm = await subtle.importKey('raw', shared, 'HKDF', false, ['deriveKey', 'deriveBits'])
+  const params = { name: 'HKDF', hash: 'SHA-256', salt: te.encode(normalizeCode(code)), info: te.encode('leftoff-relay-device-v1|' + device) }
+  if (extractable) {
+    const raw = new Uint8Array(await subtle.deriveBits(params, ikm, 256))
+    return { raw, key: await importDeviceKey(raw) }
+  }
+  return { key: await subtle.deriveKey(params, ikm, { name: 'AES-GCM', length: 256 }, false, ['encrypt', 'decrypt']) }
+}
+export function importDeviceKey(raw) {
+  return subtle.importKey('raw', raw instanceof Uint8Array ? raw : unb64u(raw), { name: 'AES-GCM', length: 256 }, false, ['encrypt', 'decrypt'])
+}
+
+// ------------------------------------------------------------ envelopes
+
+const reqAad = (e) => te.encode(['leftoff-tunnel-v1', 'req', e.d, e.to, e.id, e.ts].join('|'))
+const resAad = (e, req) => te.encode(['leftoff-tunnel-v1', 'res', req.d, req.to, req.id].join('|'))
+
+// body: { m: method, p: path with query, b: body text or null, h: { content-type } }
+export async function sealRequest(key, { device, machine, body, now = Date.now(), id = randomId(16) }) {
+  const env = { v: 1, d: device, to: machine, id, ts: now }
+  const iv = randomBytes(12)
+  const ct = await subtle.encrypt({ name: 'AES-GCM', iv, additionalData: reqAad(env) }, key, te.encode(JSON.stringify(body)))
+  return { ...env, iv: b64u(iv), ct: b64u(ct) }
+}
+
+export class TunnelError extends Error { constructor(code, message) { super(message || code); this.code = code } }
+
+// The Mac's side. keyFor(device) -> CryptoKey or null (unknown or revoked).
+// seen: a ReplayCache (or anything with has/add).
+export async function openRequest(env, { keyFor, machine, seen, now = Date.now() }) {
+  if (!env || env.v !== 1 || typeof env.d !== 'string' || typeof env.id !== 'string' || typeof env.iv !== 'string' || typeof env.ct !== 'string' || typeof env.ts !== 'number') throw new TunnelError('bad_envelope')
+  if (env.to !== machine) throw new TunnelError('wrong_target', 'sealed for ' + env.to)
+  if (Math.abs(now - env.ts) > REQ_WINDOW_MS) throw new TunnelError('expired', 'the request is too old (or a clock is off)')
+  const key = await keyFor(env.d)
+  if (!key) throw new TunnelError('unknown_device', 'this browser isn’t paired with this Mac, or it was revoked')
+  if (seen && seen.has(env.d + '|' + env.id)) throw new TunnelError('replayed')
+  let body
+  try { body = JSON.parse(td.decode(await subtle.decrypt({ name: 'AES-GCM', iv: unb64u(env.iv), additionalData: reqAad(env) }, key, unb64u(env.ct)))) } catch { throw new TunnelError('decrypt_failed') }
+  if (seen) seen.add(env.d + '|' + env.id, env.ts + REQ_WINDOW_MS)
+  return body
+}
+
+// body: { s: status, h: { content-type }, b: text }
+export async function sealResponse(key, req, body) {
+  const iv = randomBytes(12)
+  const ct = await subtle.encrypt({ name: 'AES-GCM', iv, additionalData: resAad(null, req) }, key, te.encode(JSON.stringify(body)))
+  return { v: 1, re: req.id, iv: b64u(iv), ct: b64u(ct) }
+}
+export async function openResponse(key, req, env) {
+  if (!env || env.re !== req.id) throw new TunnelError('bad_response')
+  try { return JSON.parse(td.decode(await subtle.decrypt({ name: 'AES-GCM', iv: unb64u(env.iv), additionalData: resAad(null, req) }, key, unb64u(env.ct)))) } catch { throw new TunnelError('decrypt_failed') }
+}
+
+// Remembers request ids until they can no longer pass the time check.
+export class ReplayCache {
+  constructor() { this.m = new Map() }
+  has(k) { this.sweep(); return this.m.has(k) }
+  add(k, until) { this.m.set(k, until) }
+  sweep(now = Date.now()) { if (this.m.size < 500) return; for (const [k, t] of this.m) if (t < now) this.m.delete(k) }
+}