@leftoff/cli 0.0.0-stage → 0.6.3

package/ui/changelog-md.js

@@ -0,0 +1,64 @@
+// The small markdown the What's new page and the board's text fields use
+// (0.6.2): **bold**, `code`, [text](url) links, bare https links and nested
+// "- " bullets. Pure functions, so the unit tests read this file too
+// (test/unit/changelog-md.test.mjs).
+//
+// Links: CHANGELOG.md ships inside the npm package and the repo is private,
+// so only an absolute https link becomes a real link (new tab). A relative
+// link (docs/relay.md, README.md#…) or any other scheme shows as its text.
+export const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])
+
+const httpsUrl = (u) => /^https:\/\/[^\s"'<>]+$/i.test(String(u || '').trim())
+const anchor = (href, inner) => '<a href="' + esc(href) + '" target="_blank" rel="noopener">' + inner + '</a>'
+
+// One line of inline markdown -> HTML. Everything that isn't markup is escaped.
+export function mdInline(s, { links = true } = {}) {
+  const held = []
+  const hold = (html) => '\u0000' + (held.push(html) - 1) + '\u0000'
+  const back = (t) => t.replace(/\u0000(\d+)\u0000/g, (_, i) => held[Number(i)])
+  const marks = (t) => esc(t).replace(/\*\*(.+?)\*\*/g, '<b>$1</b>')
+  let t = String(s == null ? '' : s)
+  // `code` first, so nothing inside it is read as markup.
+  t = t.replace(/`([^`]+)`/g, (_, c) => hold('<code>' + esc(c) + '</code>'))
+  // [text](url "title"): a real link only for https; otherwise just the text.
+  t = t.replace(/\[([^\]]+)\]\(\s*<?([^)\s>]*)>?(?:\s+"[^"]*")?\s*\)/g, (_, text, url) => {
+    const inner = back(marks(text))
+    return hold(links && httpsUrl(url) ? anchor(url, inner) : inner)
+  })
+  t = marks(t)
+  if (links) t = t.replace(/(^|[\s(])(https?:\/\/[^\s<)\u0000]+[^\s<).,\u0000])/g, (_, pre, url) => pre + anchor(url.replace(/&amp;/g, '&'), url))
+  return back(t)
+}
+
+// "- " / "* " bullets with indentation -> [{ text, children }]. A line indented
+// under an item without a bullet continues it (a wrapped line).
+export function parseList(md) {
+  const root = { indent: -1, children: [] }
+  const stack = [root]
+  let last = null
+  for (const line of String(md || '').split(/\r?\n/)) {
+    const m = line.match(/^(\s*)[-*+]\s+(.*)$/)
+    if (m) {
+      const indent = m[1].replace(/\t/g, '  ').length
+      while (stack.length > 1 && indent <= stack[stack.length - 1].indent) stack.pop()
+      last = { indent, text: m[2].trim(), children: [] }
+      stack[stack.length - 1].children.push(last)
+      stack.push(last)
+    } else if (last && /^\s+\S/.test(line)) last.text += ' ' + line.trim()
+    else if (!line.trim()) continue
+    else { last = null; stack.length = 1 }
+  }
+  const strip = (n) => n.map(({ text, children }) => ({ text, children: strip(children) }))
+  return strip(root.children)
+}
+
+export function renderList(items) {
+  if (!items || !items.length) return ''
+  return '<ul>' + items.map((it) => '<li>' + mdInline(it.text) + renderList(it.children) + '</li>').join('') + '</ul>'
+}
+
+// One changelog section ({ title, items, list? }) -> its HTML.
+export function renderSection(s) {
+  const list = s.list && s.list.length ? s.list : (s.items || []).map((text) => ({ text, children: [] }))
+  return '<h3 class="wn-sec s-' + esc(String(s.title || '').toLowerCase()) + '">' + esc(s.title) + '</h3>' + renderList(list)
+}

package/ui/favicon-badge.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><rect width="32" height="32" rx="7" fill="#FBBF24"/><path d="M8 2 H24 Q30 2 30 8 V18 Q30 24 24 24 H14 L6 30 V24 Q2 23 2 18 V8 Q2 2 8 2 Z" fill="#18181B"/><rect x="14" y="6" width="4" height="10" rx="1" fill="#FDE047"/><rect x="14" y="18" width="4" height="4" rx="1" fill="#FDE047"/><circle cx="25" cy="7" r="6.5" fill="#EF4444" stroke="#FFFFFF" stroke-width="2"/></svg>

package/ui/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><rect width="32" height="32" rx="7" fill="#FBBF24"/><path d="M8 2 H24 Q30 2 30 8 V18 Q30 24 24 24 H14 L6 30 V24 Q2 23 2 18 V8 Q2 2 8 2 Z" fill="#18181B"/><rect x="14" y="6" width="4" height="10" rx="1" fill="#FDE047"/><rect x="14" y="18" width="4" height="4" rx="1" fill="#FDE047"/></svg>

package/ui/go.js

@@ -0,0 +1,68 @@
+// The board's Go button, start to finish (v0.4.1). In v0.4.0 the button just
+// went grey until the daemon answered, then quietly came back, and a slow Go
+// looked like nothing happened. Now:
+//   click           "Switching…" on the button at once
+//   after 2 s       a toast: "Ghostty is taking a moment…"
+//   answer          a toast with the result and how long it took; the button
+//                   says "✓ Switched" or "✗ Didn't switch" for a few seconds
+//   no answer 25 s  the request is dropped and the toast says so
+// The board re-renders cards on every update, so the button's state lives in
+// goState (by session id) and goButton() in app.js draws from it.
+
+export const SLOW_NOTE_MS = 2000
+export const GIVE_UP_MS = 25000
+export const SETTLE_MS = 3000
+export const goState = new Map() // session id -> { label, disabled, cls }
+
+export function secs(ms) {
+  const n = Number(ms) || 0
+  return (n < 10000 ? (n / 1000).toFixed(1) : Math.round(n / 1000)) + ' s'
+}
+
+function stepsText(steps) {
+  return (steps || []).map((s) => s.step + ' ' + secs(s.ms) + (s.result && !['ok', 'true'].includes(s.result) ? ' (' + s.result + ')' : '')).join(', ')
+}
+
+// The daemon's answer -> what the person sees.
+export function goOutcome(r, { title, label, ms } = {}) {
+  const res = r || {}
+  const took = res.elapsedMs != null ? res.elapsedMs : ms
+  const name = title ? '“' + title + '”' : 'the session'
+  const where = res.label || label || 'its terminal'
+  // The breakdown only when it was slow, so a slow Go is something to send us.
+  const detail = took != null && took >= 1500 && res.steps && res.steps.length ? ' (' + stepsText(res.steps) + ')' : ''
+  if (res.ok) return { ok: true, label: '✓ Switched', cls: 'done', toast: 'Switched to ' + name + ' in ' + where + (took != null ? ' · ' + secs(took) : '') + detail, toastMs: detail ? 8000 : 4000 }
+  const msg = res.message || 'Couldn’t switch'
+  const slowNote = took != null && took >= 1500 && res.code !== 'timeout' ? ' (' + secs(took) + (detail ? ': ' + stepsText(res.steps) : '') + ')' : detail
+  return { ok: false, label: '✗ Didn’t switch', cls: 'failed', toast: msg + slowNote, toastMs: 10000 }
+}
+
+export function paintGo(btn, st) {
+  if (!btn) return
+  if (!btn.dataset.idle) btn.dataset.idle = btn.textContent
+  btn.textContent = st ? st.label : btn.dataset.idle
+  btn.disabled = !!(st && st.disabled)
+  btn.classList.remove('busy', 'done', 'failed')
+  if (st && st.cls) btn.classList.add(st.cls)
+}
+
+// post() -> the daemon's JSON (or throws). getBtn() -> the button as it is
+// on the page now (re-renders replace it). Returns the outcome.
+export async function goWithFeedback({ id, post, toast, getBtn, title, label, now = () => Date.now(), setTimer = setTimeout, clearTimer = clearTimeout }) {
+  const set = (st) => { if (st) goState.set(id, st); else goState.delete(id); paintGo(getBtn(), st) }
+  if (goState.get(id) && goState.get(id).cls === 'busy') return null // already switching
+  set({ label: 'Switching…', disabled: true, cls: 'busy' })
+  const t0 = now()
+  const slow = setTimer(() => toast((label || 'The terminal') + ' is taking a moment…', GIVE_UP_MS), SLOW_NOTE_MS)
+  let r
+  try { r = await post() } catch (e) {
+    const timedOut = e && (e.name === 'TimeoutError' || e.name === 'AbortError')
+    r = { ok: false, code: timedOut ? 'no_answer' : (e && e.code) || 'error', message: timedOut ? 'The Leftoff daemon didn’t answer in ' + secs(GIVE_UP_MS) + '. The tab may still switch.' : (e && e.message) || 'Couldn’t reach the daemon' }
+  }
+  clearTimer(slow)
+  const o = goOutcome(r, { title, label, ms: now() - t0 })
+  toast(o.toast, o.toastMs)
+  set({ label: o.label, disabled: true, cls: o.cls })
+  setTimer(() => set(null), SETTLE_MS)
+  return o
+}

package/ui/icons.js

@@ -0,0 +1,41 @@
+// A handful of Lucide icons (https://lucide.dev, v1.54.0, ISC license; the
+// notice is in ui/vendor/LUCIDE-LICENSE.txt). Stroke icons in currentColor,
+// so they follow light and dark; always aria-hidden next to a text label.
+// index.html carries the nav's copies inline (no script needed to draw them).
+export const ICONS = {
+  "clipboard": "<rect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\"/> <path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"/>",
+  "layout-dashboard": "<rect width=\"7\" height=\"9\" x=\"3\" y=\"3\" rx=\"1\"/> <rect width=\"7\" height=\"5\" x=\"14\" y=\"3\" rx=\"1\"/> <rect width=\"7\" height=\"9\" x=\"14\" y=\"12\" rx=\"1\"/> <rect width=\"7\" height=\"5\" x=\"3\" y=\"16\" rx=\"1\"/>",
+  "coffee": "<path d=\"M10 2v2\"/> <path d=\"M14 2v2\"/> <path d=\"M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1\"/> <path d=\"M6 2v2\"/>",
+  "history": "<path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"/> <path d=\"M3 3v5h5\"/> <path d=\"M12 7v5l4 2\"/>",
+  "newspaper": "<path d=\"M15 18h-5\"/> <path d=\"M18 14h-8\"/> <path d=\"M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2\"/> <rect width=\"8\" height=\"4\" x=\"10\" y=\"6\" rx=\"1\"/>",
+  "sparkles": "<path d=\"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z\"/> <path d=\"M20 2v4\"/> <path d=\"M22 4h-4\"/> <circle cx=\"4\" cy=\"20\" r=\"2\"/>",
+  "settings": "<path d=\"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915\"/> <circle cx=\"12\" cy=\"12\" r=\"3\"/>",
+  "rewind": "<path d=\"M12 6a2 2 0 0 0-3.414-1.414l-6 6a2 2 0 0 0 0 2.828l6 6A2 2 0 0 0 12 18z\"/> <path d=\"M22 6a2 2 0 0 0-3.414-1.414l-6 6a2 2 0 0 0 0 2.828l6 6A2 2 0 0 0 22 18z\"/>",
+  "download": "<path d=\"M12 15V3\"/> <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/> <path d=\"m7 10 5 5 5-5\"/>",
+  "qr-code": "<rect width=\"5\" height=\"5\" x=\"3\" y=\"3\" rx=\"1\"/> <rect width=\"5\" height=\"5\" x=\"16\" y=\"3\" rx=\"1\"/> <rect width=\"5\" height=\"5\" x=\"3\" y=\"16\" rx=\"1\"/> <path d=\"M21 16h-3a2 2 0 0 0-2 2v3\"/> <path d=\"M21 21v.01\"/> <path d=\"M12 7v3a2 2 0 0 1-2 2H7\"/> <path d=\"M3 12h.01\"/> <path d=\"M12 3h.01\"/> <path d=\"M12 16v.01\"/> <path d=\"M16 12h1\"/> <path d=\"M21 12v.01\"/> <path d=\"M12 21v-1\"/>",
+  "refresh-cw": "<path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\"/> <path d=\"M21 3v5h-5\"/> <path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\"/> <path d=\"M8 16H3v5\"/>",
+  "check": "<path d=\"M20 6 9 17l-5-5\"/>",
+  "folder-sync": "<path d=\"M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v.5\"/> <path d=\"M12 10v4h4\"/> <path d=\"m12 14 1.535-1.605a5 5 0 0 1 8 1.5\"/> <path d=\"M22 22v-4h-4\"/> <path d=\"m22 18-1.535 1.605a5 5 0 0 1-8-1.5\"/>",
+  "bell": "<path d=\"M10.268 21a2 2 0 0 0 3.464 0\"/> <path d=\"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326\"/>",
+  "x": "<path d=\"M18 6 6 18\"/> <path d=\"m6 6 12 12\"/>",
+  "rotate-ccw": "<path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"/> <path d=\"M3 3v5h5\"/>",
+  "list-checks": "<path d=\"M13 5h8\"/> <path d=\"M13 12h8\"/> <path d=\"M13 19h8\"/> <path d=\"m3 17 2 2 4-4\"/> <path d=\"m3 7 2 2 4-4\"/>",
+  "plus": "<path d=\"M5 12h14\"/> <path d=\"M12 5v14\"/>",
+  "play": "<path d=\"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z\"/>",
+  "sliders-horizontal": "<path d=\"M10 5H3\"/> <path d=\"M12 19H3\"/> <path d=\"M14 3v4\"/> <path d=\"M16 17v4\"/> <path d=\"M21 12h-9\"/> <path d=\"M21 19h-5\"/> <path d=\"M21 5h-7\"/> <path d=\"M8 10v4\"/> <path d=\"M8 12H3\"/>",
+  "layers": "<path d=\"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z\"/> <path d=\"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12\"/> <path d=\"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17\"/>",
+  "bot": "<path d=\"M12 8V4H8\"/> <rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\"/> <path d=\"M2 14h2\"/> <path d=\"M20 14h2\"/> <path d=\"M15 13v2\"/> <path d=\"M9 13v2\"/>",
+  "smartphone": "<rect width=\"14\" height=\"20\" x=\"5\" y=\"2\" rx=\"2\" ry=\"2\"/> <path d=\"M12 18h.01\"/>",
+  "shield": "<path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"/>",
+  "info": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <path d=\"M12 16v-4\"/> <path d=\"M12 8h.01\"/>",
+  "chevron-right": "<path d=\"m9 18 6-6-6-6\"/>",
+  "chevron-left": "<path d=\"m15 18-6-6 6-6\"/>",
+  "mail": "<rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"/> <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"/>",
+  "search": "<circle cx=\"11\" cy=\"11\" r=\"8\"/> <path d=\"m21 21-4.3-4.3\"/>"
+}
+
+export function icon(name, cls = 'ic') {
+  const body = ICONS[name]
+  if (!body) return ''
+  return '<svg class="' + cls + '" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">' + body + '</svg>'
+}

package/ui/index.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <title>Leftoff</title>
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#f5f6f9" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#0d1016" media="(prefers-color-scheme: dark)">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="application-name" content="Leftoff">
+  <link rel="icon" href="favicon.svg" type="image/svg+xml" id="favicon">
+  <link rel="icon" href="favicon-32.png" type="image/png" sizes="32x32" id="favicon-png">
+  <link rel="apple-touch-icon" href="apple-touch-icon.png">
+  <meta name="apple-mobile-web-app-title" content="Leftoff">
+  <meta name="color-scheme" content="dark light">
+  <script src="theme.js"></script>
+  <link rel="stylesheet" href="app.css">
+</head>
+<body>
+  <header class="top">
+    <a class="brand" href="#/" id="brand" title="Leftoff">
+      <img src="favicon.svg" class="logo" alt="" width="22" height="22">
+      <span>Leftoff</span>
+    </a>
+    <nav class="tabs" aria-label="Sections">
+      <a href="#/" data-route="board"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect width="7" height="9" x="3" y="3" rx="1"/> <rect width="7" height="5" x="14" y="3" rx="1"/> <rect width="7" height="9" x="14" y="12" rx="1"/> <rect width="7" height="5" x="3" y="16" rx="1"/></svg><span class="lbl">Board</span></a>
+      <a href="#/waiting" data-route="waiting" id="needsTab"><svg class="ic" 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="M10.268 21a2 2 0 0 0 3.464 0"/> <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg><span class="lbl">Needs you</span><span class="lbl-short">Needs</span><span class="navcount" id="needsCount" hidden></span></a>
+      <a href="#/lists" data-route="lists" id="listsTab"><svg class="ic" 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="M13 5h8"/> <path d="M13 12h8"/> <path d="M13 19h8"/> <path d="m3 17 2 2 4-4"/> <path d="m3 7 2 2 4-4"/></svg><span class="lbl">Lists</span><span class="navcount" id="listsCount" hidden></span></a>
+      <a href="#/timeline" data-route="timeline"><svg class="ic" 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="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/> <path d="M3 3v5h5"/> <path d="M12 7v5l4 2"/></svg><span class="lbl">Timeline</span></a>
+      <a href="#/digest" data-route="digest"><svg class="ic" 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="M15 18h-5"/> <path d="M18 14h-8"/> <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/> <rect width="8" height="4" x="10" y="6" rx="1"/></svg><span class="lbl">Digest</span></a>
+    </nav>
+    <div class="topright">
+      <button type="button" class="searchbtn" id="searchBtn" title="Search (⌘K)" aria-label="Search" aria-haspopup="dialog" aria-keyshortcuts="Meta+K Control+K /"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/> <path d="m21 21-4.3-4.3"/></svg><span class="sb-lbl">Search</span><kbd class="sb-kbd" id="searchKbd">⌘K</kbd></button>
+      <button type="button" class="health" id="health" title="Status" aria-haspopup="dialog" aria-expanded="false" aria-controls="statusPop"><span class="dot"></span><span class="label">connecting…</span></button>
+      <a href="#/whats-new" data-route="whats-new" id="wnTab" class="iconbtn" title="What’s new" aria-label="What’s new"><svg class="ic" 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="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/> <path d="M20 2v4"/> <path d="M22 4h-4"/> <circle cx="4" cy="20" r="2"/></svg><span class="newdot" hidden></span></a>
+      <a href="#/settings" data-route="settings" id="setTab" class="iconbtn" title="Settings" aria-label="Settings"><svg class="ic" 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="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/> <circle cx="12" cy="12" r="3"/></svg><span class="topdot" hidden></span></a>
+    </div>
+  </header>
+  <div class="statuspop" id="statusPop" role="dialog" aria-label="Status" hidden></div>
+  <div class="cmdk" id="cmdk" hidden>
+    <div class="cmdk-panel" role="dialog" aria-modal="true" aria-label="Search">
+      <form class="cmdk-field" id="searchForm" autocomplete="off" role="search"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/> <path d="m21 21-4.3-4.3"/></svg><input id="q" type="search" placeholder="Search sessions, checkpoints, files, settings…" aria-label="Search" role="combobox" aria-expanded="true" aria-controls="cmdkList" aria-autocomplete="list" autocomplete="off" spellcheck="false"><button type="button" class="cmdk-esc" data-cmdk-close aria-label="Close search">esc</button></form>
+      <div class="cmdk-list" id="cmdkList" role="listbox" aria-label="Results"></div>
+      <div class="cmdk-foot"><span><kbd>↑</kbd><kbd>↓</kbd> to move</span><span><kbd>↵</kbd> to open</span><span><kbd>esc</kbd> to close</span></div>
+    </div>
+  </div>
+  <main id="app"></main>
+  <div class="toast" id="toast" role="status" aria-live="polite"></div>
+  <script src="relay-client.js" type="module"></script>
+  <script src="app.js" type="module"></script>
+</body>
+</html>

package/ui/manifest.webmanifest

@@ -0,0 +1,37 @@
+{
+  "name": "Leftoff",
+  "short_name": "Leftoff",
+  "description": "WTF was I working on? Every Claude Code session and where you left off.",
+  "id": "/",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#0d1016",
+  "theme_color": "#0d1016",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-maskable-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    }
+  ]
+}

package/ui/needs.js

@@ -0,0 +1,197 @@
+// Needs you (v0.4.4): the strip at the top of the board, the badge on a card and
+// the panel on a session's page. Pure functions over the daemon's needsYou items
+// (shared with the unit tests); app.js wires the clicks.
+//
+// Kinds: permission (Allow once / Allow for this session / Deny with a note),
+// question (AskUserQuestion's options as buttons, plus Other…), terminal (only
+// the terminal can answer: Go), reply (the turn ended on a question: a reply box
+// when the mod can type it in). Nothing is ever answered without a click.
+
+const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }
+export const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ESC[c])
+
+export function waitLabel(sec) {
+  if (sec == null) return ''
+  if (sec < 60) return 'waiting ' + Math.max(1, Math.round(sec)) + 's'
+  if (sec < 3600) return 'waiting ' + Math.round(sec / 60) + 'm'
+  if (sec < 86400) return 'waiting ' + Math.round(sec / 3600) + 'h'
+  return 'waiting ' + Math.round(sec / 86400) + 'd'
+}
+
+// The items the strip shows, from /v1/sessions: blocked sessions first (longest
+// wait first), then turns that ended on a question.
+export function needsItems(sessions = []) {
+  return sessions.filter((s) => s.needsYou && !s.archived).map((s) => ({ ...s.needsYou, session: s }))
+    .sort((a, b) => (b.blocking - a.blocking) || ((b.waitSec || 0) - (a.waitSec || 0)))
+}
+
+// One line for a card or a notification.
+export function needsLine(n) {
+  if (!n) return ''
+  if (n.kind === 'permission' && n.ask && n.ask.describe) return n.ask.describe.verb + ': ' + n.ask.describe.detail
+  if (n.kind === 'question' && n.ask) return ((n.ask.questions || [])[0] || {}).question || 'Claude has a question'
+  if (n.kind === 'terminal') return n.message || 'waiting in the terminal'
+  if (n.kind === 'agent') return (n.items || []).map((x) => x.text).join(' · ') || n.message || ''
+  return n.question || ''
+}
+
+const KIND_LABEL = { permission: 'Needs your OK', question: 'Question', terminal: 'Waiting in the terminal', reply: 'Asked you', agent: 'Waiting on you' }
+
+export function cardBadge(n) {
+  if (!n) return ''
+  return '<div class="need-badge k-' + esc(n.kind) + (n.blocking ? ' blocking' : '') + '" title="' + esc(needsLine(n)) + '"><span class="nb-k">' + esc(KIND_LABEL[n.kind] || 'Needs you') + '</span>' +
+    '<span class="nb-t">' + esc(needsLine(n)) + '</span>' + (n.blocking && n.waitSec != null ? '<span class="nb-w">' + esc(waitLabel(n.waitSec).replace('waiting ', '')) + '</span>' : '') + '</div>'
+}
+
+// ⌘↵ / Ctrl+↵ in a Needs-you text box presses its button (v0.4.6, app.js
+// wires the key). The hint on the button; opts.kbd picks the platform's label.
+export const KBD_SUBMIT = 'Meta+Enter Control+Enter'
+const kbdHint = (opts) => '<span class="kbd-hint" aria-hidden="true">' + esc(opts.kbd || '⌘↵') + '</span>'
+
+// opts: { mayAnswer, goButton(session) -> html, drafts: { [key]: text }, pending: { [key]: label }, compact, kbd }
+export function needPanel(n, opts = {}) {
+  const s = n.session || {}
+  const drafts = opts.drafts || {}
+  const may = opts.mayAnswer !== false
+  const askId = n.ask ? n.ask.id : ''
+  const key = askId || 'reply:' + s.id
+  const busy = opts.pending && opts.pending[key]
+  const dis = !may || busy ? ' disabled' : ''
+  if (n.kind === 'agent') return agentNeedPanel(n, s)
+  const go = opts.goButton ? opts.goButton(s) : ''
+  let h = '<article class="need k-' + esc(n.kind) + (n.blocking ? ' blocking' : '') + '" data-id="' + esc(s.id) + '"' + (askId ? ' data-ask="' + esc(askId) + '"' : '') + ' data-key="' + esc(key) + '">'
+  h += '<div class="need-head"><span class="need-dot" aria-hidden="true"></span>' +
+    (opts.compact ? '' : '<a class="need-title" href="#/s/' + encodeURIComponent(s.id) + '">' + esc(s.title || 'Untitled session') + '</a>' + (s.repoLabel ? '<span class="chip mono">' + esc(s.repoLabel) + '</span>' : '')) +
+    (n.peer || (s.isLocal === false && s.machine) ? '<span class="chip machine remote" title="answered on that machine, through its Leftoff">⌂ ' + esc(n.peer || s.machine) + '</span>' : '') +
+    '<span class="need-kind">' + esc(KIND_LABEL[n.kind] || '') + '</span>' +
+    (n.waitSec != null ? '<span class="need-wait" title="since ' + esc(n.since || '') + '">' + esc(waitLabel(n.waitSec)) + '</span>' : '') + '</div>'
+  if (n.kind === 'permission' && n.ask) {
+    const d = n.ask.describe || {}
+    h += '<div class="need-what"><span class="verb">' + esc(d.verb || n.ask.tool) + '</span><code>' + esc(d.detail || '') + '</code></div>'
+    if (d.note) h += '<div class="need-note">' + esc(d.note) + '</div>'
+    if (n.more) h += '<div class="need-note">+' + n.more + ' more waiting after this one</div>'
+    h += '<div class="need-actions">' +
+      '<button type="button" class="btn allow" data-action="ask-answer" data-choice="allow"' + dis + '>Allow once</button>' +
+      '<button type="button" class="btn" data-action="ask-answer" data-choice="allow_session"' + dis + ' title="Allow this and calls like it until this Claude Code session ends (kept to the session, never saved to settings)">Allow for this session</button>' +
+      '<button type="button" class="btn deny" data-action="ask-deny-open"' + dis + '>Deny…</button>' + go + '</div>' +
+      '<div class="deny-form" hidden><input type="text" class="deny-note" maxlength="500" placeholder="Tell Claude why or what to do instead (optional)" value="' + esc(drafts['deny:' + askId] || '') + '" data-draft="deny:' + esc(askId) + '" data-submit="deny" aria-keyshortcuts="' + KBD_SUBMIT + '">' +
+      '<button type="button" class="btn deny" data-action="ask-answer" data-choice="deny" data-submit-for="deny"' + dis + '>Deny' + kbdHint(opts) + '</button><button type="button" class="btn" data-action="ask-deny-close">Cancel</button></div>'
+  } else if (n.kind === 'question' && n.ask) {
+    const qs = n.ask.questions || []
+    const oneTap = qs.length === 1 && !qs[0].multiSelect && qs[0].kind === 'choice' && qs[0].options.length
+    qs.forEach((q, qi) => {
+      h += '<div class="need-q" data-q="' + qi + '" data-multi="' + (q.multiSelect ? '1' : '') + '">' +
+        '<div class="qtext">' + (q.header ? '<span class="qhead">' + esc(q.header) + '</span>' : '') + esc(q.question) + '</div>'
+      if (q.options.length) {
+        h += '<div class="opts">' + q.options.map((o) => '<button type="button" class="btn opt" data-action="' + (oneTap ? 'ask-pick-send' : 'ask-pick') + '" data-label="' + esc(o.label) + '" aria-pressed="false"' + dis + (o.description ? ' title="' + esc(o.description) + '"' : '') + '>' + esc(o.label) + (o.description ? '<small>' + esc(o.description) + '</small>' : '') + '</button>').join('') + '</div>'
+      }
+      h += '<input type="text" class="qother" maxlength="500" placeholder="' + (q.options.length ? 'Or type your own answer' : 'Your answer') + '" value="' + esc(drafts['q:' + askId + ':' + qi] || '') + '" data-draft="q:' + esc(askId) + ':' + qi + '" data-submit="answer" aria-keyshortcuts="' + KBD_SUBMIT + '"' + (may ? '' : ' disabled') + '>'
+      h += '</div>'
+    })
+    h += '<div class="need-actions">' + (oneTap ? '' : '') + '<button type="button" class="btn primary" data-action="ask-answer" data-choice="answer" data-submit-for="answer"' + dis + '>' + (oneTap ? 'Send typed answer' : 'Send answers') + kbdHint(opts) + '</button>' +
+      '<button type="button" class="btn deny" data-action="ask-answer" data-choice="deny"' + dis + ' title="Decline to answer; Claude carries on without it">Skip</button>' + go + '</div>'
+  } else if (n.kind === 'terminal') {
+    h += '<div class="need-what"><span class="verb">Claude Code says</span><span>' + esc(n.message || '') + '</span></div>' +
+      '<div class="need-note">This one can only be answered in the terminal.' + (n.peerNote ? ' ' + esc(n.peerNote) + '.' : '') + '</div><div class="need-actions">' + go + '</div>'
+  } else if (n.kind === 'reply') {
+    h += '<blockquote class="need-question">' + esc(n.question || '') + '</blockquote>'
+    if (n.replyPending) h += '<div class="need-note ok">Reply sent ' + esc(opts.agoFn ? opts.agoFn(n.replyPending.at) : '') + ': “' + esc(n.replyPending.text) + '”. Claude reads it as its next prompt.</div>'
+    if (n.canReply) {
+      h += '<div class="reply-row"><textarea class="reply-text" rows="2" maxlength="4000" placeholder="Reply to Claude…" data-draft="reply:' + esc(s.id) + '" data-submit="reply" aria-keyshortcuts="' + KBD_SUBMIT + '"' + (may ? '' : ' disabled') + '>' + esc(drafts['reply:' + s.id] || '') + '</textarea>' +
+        '<button type="button" class="btn primary" data-action="reply-send" data-submit-for="reply"' + dis + '>Send' + kbdHint(opts) + '</button></div><div class="need-actions">' + go + '</div>'
+    } else {
+      h += '<div class="need-note">' + esc(n.why ? 'No reply box: ' + n.why + '.' : '') + '</div><div class="need-actions">' + go + '</div>'
+    }
+  }
+  if (!may && n.kind !== 'terminal') h += '<div class="need-note warn">Answering from this device is off. Turn it on in Settings → Privacy & security on the machine running Leftoff, or use Go there.</div>'
+  if (busy) h += '<div class="need-note">' + esc(busy) + '</div>'
+  return h + '</article>'
+}
+
+// External agents (v0.5.4; reply affordance v0.5.6): what an agent's feed
+// says is waiting on you. Read-only: nothing is answered here. The feed
+// decides whether there is a way to reply (agent.reply { label, url }); with
+// no agent.reply there is no button. A reply link may only be https:, sms:,
+// imessage:, mailto: or tel: (the daemon checks the same list; this is the
+// second check). agent.url only links the agent's chip.
+export const httpsOnly = (u) => { try { const x = new URL(String(u)); return x.protocol === 'https:' && !x.username && !x.password && x.hostname ? x.href : null } catch { return null } }
+export const REPLY_SCHEMES = ['https:', 'sms:', 'imessage:', 'mailto:', 'tel:']
+export function safeReplyUrl(u) {
+  if (typeof u !== 'string' || !u || u.length > 2048) return null
+  if (/[\s\u0000-\u001F\u007F<>"'`\\\u202A-\u202E\u2066-\u2069\u200E\u200F]/.test(u)) return null
+  const m = /^([a-z][a-z0-9+.-]*:)(.*)$/i.exec(u)
+  if (!m) return null
+  const scheme = m[1].toLowerCase()
+  if (!REPLY_SCHEMES.includes(scheme)) return null
+  if (scheme === 'https:') return httpsOnly(u)
+  const rest = m[2].replace(/^\/\//, '')
+  if (!rest || rest[0] === '?' || rest[0] === '/') return null
+  return scheme + m[2]
+}
+// The reply affordance of an agent, or null: { label, url, external }.
+export function agentReply(a) {
+  const r = a && a.reply
+  if (!r || typeof r !== 'object') return null
+  const url = safeReplyUrl(r.url)
+  const label = String(r.label == null ? '' : r.label).replace(/[\u0000-\u001F\u007F]+/g, ' ').trim().slice(0, 40)
+  if (!url || !label) return null
+  return { label, url, external: url.startsWith('https:') }
+}
+// The reply button (or ''). https opens a new tab; sms:/mailto:/tel: hand
+// off to the system app, so no target.
+export function agentReplyButton(a, cls = 'btn primary') {
+  const r = agentReply(a)
+  if (!r) return ''
+  return '<a class="' + esc(cls) + ' agent-reply" href="' + esc(r.url) + '"' + (r.external ? ' target="_blank" rel="noopener noreferrer"' : ' rel="noopener noreferrer"') + '>' + esc(r.label) + (r.external ? ' ↗' : '') + '</a>'
+}
+// The agent's chip; a link to agent.url when the feed gave one.
+export function agentChipHtml(a = {}, { title } = {}) {
+  const who = a.display || a.name || 'agent'
+  const inner = esc(a.icon || '◆') + ' ' + esc(who)
+  const t = esc(title || 'external agent · read-only')
+  const url = httpsOnly(a.url)
+  return url ? '<a class="chip machine agent" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer" title="' + t + '">' + inner + '</a>'
+    : '<span class="chip machine agent" title="' + t + '">' + inner + '</span>'
+}
+// "From Tab · reply by texting Tab", or "From Tab · Read-only here".
+export function agentReplyNote(a = {}) {
+  const who = a.display || a.name || 'the agent'
+  const hint = typeof a.replyHint === 'string' ? a.replyHint.replace(/[\u0000-\u001F\u007F]+/g, ' ').trim().slice(0, 120) : ''
+  return 'From ' + who + ' · ' + (hint || 'Read-only here')
+}
+export function agentNeedPanel(n, s = n.session || {}) {
+  const a = { ...((s && s.agent) || {}) }
+  if (!a.display) a.display = n.agent || 'the agent'
+  if (a.reply == null && n.reply) a.reply = n.reply
+  if (a.replyHint == null && n.replyHint) a.replyHint = n.replyHint
+  const btn = agentReplyButton(a)
+  let h = '<article class="need k-agent" data-id="' + esc(s.id) + '" data-key="' + esc('agent:' + s.id) + '">' +
+    '<div class="need-head">' + agentChipHtml(a) +
+    '<a class="need-title" href="#/s/' + encodeURIComponent(s.id) + '">' + esc(s.title || 'Untitled') + '</a>' +
+    '<span class="need-kind">' + esc(KIND_LABEL.agent) + '</span>' + (n.waitSec != null ? '<span class="need-wait">' + esc(waitLabel(n.waitSec)) + '</span>' : '') + '</div>' +
+    '<ul class="agent-needs">' + (n.items || []).map((x) => '<li class="plain">' + esc(x.text) + '</li>').join('') + '</ul>' +
+    (btn ? '<div class="need-actions">' + btn + '</div>' : '') +
+    '<div class="need-note">' + esc(agentReplyNote(a)) + '</div>'
+  return h + '</article>'
+}
+
+export function needsStrip(items, opts = {}) {
+  if (!items.length) return ''
+  const blocking = items.filter((i) => i.blocking).length
+  return '<section class="needs-strip" aria-label="Needs you"><div class="needs-head"><h2>Needs you <span class="count">' + items.length + '</span></h2>' +
+    '<span class="sub">' + (blocking ? blocking + ' waiting on an answer' : '') + (blocking && items.length > blocking ? ' · ' : '') + (items.length > blocking ? (items.length - blocking) + ' asked you something' : '') + '</span></div>' +
+    '<div class="needs-list">' + items.map((n) => needPanel(n, opts)).join('') + '</div></section>'
+}
+
+// The answer a question panel holds: picked options, else the typed text.
+// picks: [{ q: index, labels: [..] }], typed: { [index]: text }
+export function questionAnswer(questions = [], picks = {}, typed = {}) {
+  const answers = {}
+  let other = false
+  questions.forEach((q, i) => {
+    const t = String(typed[i] || '').trim()
+    const p = picks[i] || []
+    if (t) { answers[q.question] = q.multiSelect && p.length ? [...p, t] : t; other = true } else if (p.length) answers[q.question] = q.multiSelect ? p : p[0]
+  })
+  return { answers, allowOther: other }
+}

package/ui/offline.css

@@ -0,0 +1,11 @@
+:root { color-scheme: dark light; --bg: #0d1016; --text: #e6e9f0; --muted: #8b93a7; --accent: #7c9cff; --on-accent: #0b0f1a; --line: #252d3d; }
+@media (prefers-color-scheme: light) { :root { --bg: #f5f6f9; --text: #161a24; --muted: #5b6478; --accent: #4560e6; --on-accent: #fff; --line: #e1e5ed; } }
+html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
+main { max-width: 440px; margin: 0 auto; padding: max(48px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
+img { border-radius: 16px; display: block; }
+h1 { font-size: 24px; margin: 20px 0 8px; }
+p, li { color: var(--muted); }
+ul { padding-left: 20px; }
+code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; }
+.btn { display: inline-block; background: var(--accent); color: var(--on-accent); text-decoration: none; padding: 10px 18px; border-radius: 10px; font-weight: 600; margin-top: 8px; }
+.small { font-size: 13px; }

package/ui/offline.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="color-scheme" content="dark light">
+  <title>Leftoff · can't reach it right now</title>
+  <link rel="stylesheet" href="/offline.css">
+</head>
+<body>
+  <main>
+    <img src="/icon-192.png" alt="" width="72" height="72">
+    <h1>Can't reach Leftoff</h1>
+    <p>Leftoff runs on your Mac. A phone reaches it over Tailscale, and right now it can't get through.</p>
+    <ul>
+      <li>Is Tailscale on, on this phone?</li>
+      <li>Is the Mac awake and online?</li>
+      <li>Is Leftoff running there? <code>leftoff open</code> starts it.</li>
+    </ul>
+    <p><a class="btn" href="/">Try again</a></p>
+    <p class="small">Leftoff keeps nothing on the phone: the board always comes live from the Mac.</p>
+  </main>
+</body>
+</html>

package/ui/pair.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <title>Pair this browser · Leftoff</title>
+  <meta name="color-scheme" content="dark light">
+  <meta name="referrer" content="no-referrer">
+  <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="apple-touch-icon.png">
+  <script src="theme.js"></script>
+  <link rel="stylesheet" href="app.css">
+</head>
+<body class="pairpage">
+  <main class="pairbox">
+    <div class="relay-logo">Leftoff</div>
+    <h1>Pair this browser</h1>
+    <p class="faint">Your board, from anywhere, at <b id="host"></b>. Pair once; the key stays in this browser and on your Macs, never on the relay.</p>
+    <form id="form" autocomplete="off">
+      <label for="code">Code from your Mac</label>
+      <input id="code" class="mono" inputmode="text" autocapitalize="characters" spellcheck="false" placeholder="XXXX-XXXX-XXXX-XXXX" maxlength="24">
+      <label for="name">Name this device</label>
+      <input id="name" maxlength="60" spellcheck="false">
+      <button type="submit" id="go" class="btn primary">Pair</button>
+    </form>
+    <p id="msg" class="pmsg" role="status"></p>
+    <p class="hint">On a Mac: Leftoff → Settings → Phone &amp; remote → Use from anywhere → Pair a phone. Codes work once, for 10 minutes.</p>
+  </main>
+  <script src="relay-pair.js" type="module"></script>
+</body>
+</html>