@leftoff/cli 0.9.7 → 0.9.8-beta.10

package/ui/live-wake.js

@@ -0,0 +1,96 @@
+// 0.9.8: the board stays live after a phone wakes up.
+//
+// iOS suspends a Home Screen app (and its live-update long-poll or event
+// stream) when you switch away or lock the screen. A request that was in
+// flight then may never settle, so the stream can go quiet forever while the
+// page still shows a confident "Working · 5m" timer. The pieces here are
+// pure (unit tested in test/unit/livewake-098.test.mjs); ui/app.js wires them:
+// - the daemon sends a ping on the stream every HEARTBEAT_MS (a long-poll
+//   answers at least that often), and a stream with nothing for STREAM_DEAD_MS
+//   is closed and opened again (with backoff), then the view refetches
+// - coming back (visible, pageshow, focus, online) refetches at once
+// - while a Live message on screen is still going, its thread is polled every
+//   POLL_MS, so a dead stream can't leave a Working bubble behind
+// - a pending bubble whose data is older than STALE_MS says "Reconnecting…"
+
+export const HEARTBEAT_MS = 15000 // the daemon's stream ping (src/server.js)
+export const STREAM_DEAD_MS = 2 * HEARTBEAT_MS + 5000
+export const POLL_MS = 5000
+export const STALE_MS = 15000
+export const AWAY_MS = 2000 // focus or visible after less than this in the background isn't a wake-up (unless the stream died)
+
+const PENDING = new Set(['sent', 'received', 'working'])
+
+// A board message whose turn is still going (its bubble spins or waits).
+export function isPending(m) {
+  const st = m && m.status
+  return !!(st && PENDING.has(st.phase))
+}
+export function anyPending(msgs) { return (msgs || []).some(isPending) }
+
+// Should the Live thread be polled right now?
+export function shouldPoll({ visible = true, onLive = false, pending = false } = {}) {
+  return !!(visible && onLive && pending)
+}
+
+// Has the stream been silent longer than a ping allows?
+export function streamDead(lastAt, now = Date.now(), limit = STREAM_DEAD_MS) {
+  if (!lastAt) return false
+  return now - lastAt > limit
+}
+
+// Is what the page shows too old to trust a running timer?
+export function isStale(okAt, now = Date.now(), limit = STALE_MS) {
+  if (!okAt) return false
+  return now - okAt > limit
+}
+
+// Reconnect delays: 1 s, 2 s, 4 s … at most 30 s.
+export function backoffMs(attempt) {
+  const n = Math.max(0, Math.floor(Number(attempt) || 0))
+  return Math.min(30000, 1000 * 2 ** Math.min(n, 5))
+}
+
+// What a refetch compares: has anything in the thread changed?
+export function liveSignature(msgs) {
+  return (msgs || []).map((m) => {
+    const st = m.status || {}
+    return [m.id || m.key || '', m.from || '', st.phase || '', st.tool ? st.tool.name : '', st.waiting ? 'w' : '', st.endedAt || '', m.text ? String(m.text).length : 0].join(':')
+  }).join('|')
+}
+
+// Which reasons to refetch: coming back to the page or the network.
+export function wakeReason(type, { visibilityState = 'visible', persisted = false } = {}) {
+  if (type === 'visibilitychange') return visibilityState === 'visible' ? 'visible' : null
+  if (type === 'pageshow') return persisted ? 'pageshow-bfcache' : null // a plain pageshow is the first load, already fetching
+  if (type === 'focus' || type === 'online') return type
+  return null
+}
+
+// Coalesce wake-ups (visible + focus + pageshow all fire together on iOS).
+export function createWake({ now = () => Date.now(), minGapMs = 1500 } = {}) {
+  let last = 0
+  return {
+    due() { const t = now(); if (t - last < minGapMs) return false; last = t; return true },
+    reset() { last = 0 },
+  }
+}
+
+// The stream watchdog: call seen() on every event or ping, check() on a timer.
+// check() answers 'ok', or 'dead' once (then waits for the reconnect's delay).
+export function createWatchdog({ now = () => Date.now(), limit = STREAM_DEAD_MS } = {}) {
+  let lastAt = now(), attempt = 0, nextAt = 0
+  return {
+    seen() { lastAt = now(); attempt = 0; nextAt = 0 },
+    opened() { lastAt = now() },
+    check() {
+      const t = now()
+      if (!streamDead(lastAt, t, limit)) return 'ok'
+      if (t < nextAt) return 'wait'
+      nextAt = t + backoffMs(attempt++)
+      return 'dead'
+    },
+    get lastAt() { return lastAt },
+    get attempt() { return attempt },
+  }
+}

package/ui/nav.js

@@ -0,0 +1,88 @@
+// The sidebar rail, the phone's bottom bar and Quick look (0.9.8). Pure functions
+// over the daemon's sessions (shared with the unit tests); app.js wires them.
+//
+// Quick look: hover (or long-press on a phone) the Needs you item for the count
+// and the five longest waits, with Allow once / Always / Deny on permission prompts
+// (Always only when the Needs you page offers "don't ask again"). Those
+// buttons are the Needs you page's own (data-action="ask-answer"): same request,
+// same checks, and nothing is ever answered without a click.
+
+import { esc, needsItems, needsLine, waitLabel, alwaysText, alwaysButton } from './needs.js'
+
+// The nav item a route lights up. A session page belongs to the board, a
+// catch-up to the digest.
+export function navKey(name) {
+  if (name === 's' || name === 'board' || !name) return 'board'
+  if (name === 'catchup') return 'digest'
+  return name
+}
+
+// On a phone the bar holds four sections and More; these live under More.
+export const MORE_KEYS = ['timeline', 'digest', 'whats-new', 'settings']
+export const moreActive = (key) => MORE_KEYS.includes(key)
+
+// The red count on Needs you: nothing at zero, 99+ past 99.
+export function badgeText(n) {
+  const v = Math.max(0, Math.floor(Number(n) || 0))
+  if (!v) return ''
+  return v > 99 ? '99+' : String(v)
+}
+
+export function qlTitle(total) {
+  if (!total) return 'Nothing needs you'
+  return total + (total === 1 ? ' thing needs' : ' things need') + ' you'
+}
+
+// "6m" from the need's wait, or from when it was asked when there's no wait clock.
+export function qlAge(n, now = Date.now()) {
+  if (!n) return ''
+  if (n.waitSec != null) return waitLabel(n.waitSec).replace('waiting ', '')
+  const t = Date.parse(n.since || n.at || '')
+  if (!Number.isFinite(t)) return ''
+  return waitLabel(Math.max(1, (now - t) / 1000)).replace('waiting ', '')
+}
+
+// The popover's items: the same order as the Needs you page (blocked first,
+// longest wait first), the first `limit` of them.
+export function quickLookItems(sessions = [], limit = 5) {
+  const all = needsItems(sessions)
+  return { total: all.length, items: all.slice(0, limit), more: Math.max(0, all.length - limit) }
+}
+
+// A permission prompt with an id is the one kind answered inline.
+export const qlAnswerable = (n) => !!(n && n.kind === 'permission' && n.ask && n.ask.id)
+
+// opts: { mayAnswer, pending: { [askId]: label }, now }
+export function qlRow(n, opts = {}) {
+  const s = n.session || {}
+  const askId = n.ask && n.ask.id ? n.ask.id : ''
+  const key = askId || 'reply:' + s.id
+  const mac = n.peer || s.machine || ''
+  const meta = [s.repoLabel, mac, qlAge(n, opts.now)].filter(Boolean).join(' · ')
+  const line = needsLine(n)
+  const always = qlAnswerable(n) ? alwaysText(n.ask) : ''
+  let h = '<li class="ql-item k-' + esc(n.kind) + (n.blocking ? ' blocking' : '') + (always ? ' has-always' : '') + '" data-id="' + esc(s.id) + '"' + (askId ? ' data-ask="' + esc(askId) + '"' : '') + ' data-key="' + esc(key) + '">' +
+    '<a class="ql-main" href="#/s/' + encodeURIComponent(s.id || '') + '">' +
+    '<span class="ql-t">' + esc(s.title || 'Untitled session') + '</span>' +
+    (line ? '<span class="ql-what" title="' + esc(line) + '">' + esc(line) + '</span>' : '') +
+    (meta ? '<span class="ql-meta mono">' + esc(meta) + '</span>' : '') + '</a>'
+  if (qlAnswerable(n)) {
+    const busy = opts.pending && opts.pending[key]
+    const dis = opts.mayAnswer === false || busy ? ' disabled' : ''
+    const off = opts.mayAnswer === false ? ' title="Answering from this device is off"' : ''
+    h += '<div class="ql-actions">' +
+      '<button type="button" class="btn allow" data-action="ask-answer" data-choice="allow"' + dis + off + ' aria-label="Allow once: ' + esc(line) + '">' + (busy ? esc(busy) : 'Allow once') + '</button>' +
+      (always ? alwaysButton(n.ask, dis, { label: 'Always', scope: 'ql', session: s, title: off }) : '') +
+      '<button type="button" class="btn deny" data-action="ask-answer" data-choice="deny"' + dis + off + ' aria-label="Deny: ' + esc(line) + '">Deny</button></div>'
+  }
+  return h + '</li>'
+}
+
+export function quickLookHtml(model = {}, opts = {}) {
+  const total = model.total || 0
+  const items = model.items || []
+  let h = '<div class="ql-head"><h2 id="qlTitle">' + esc(qlTitle(total)) + '</h2></div>'
+  if (!items.length) h += '<p class="ql-empty">When a session asks for permission or a question, it shows up here.</p>'
+  else h += '<ul class="ql-list">' + items.map((n) => qlRow(n, opts)).join('') + '</ul>' + (model.more ? '<p class="ql-more">+' + model.more + ' more</p>' : '')
+  return h + '<a class="ql-foot" href="#/waiting">Open Needs you <span aria-hidden="true">→</span></a>'
+}

package/ui/navhide.js

@@ -0,0 +1,35 @@
+// Hide the nav on scroll (phones, 0.9.8). Under 700px wide the top row and the
+// bottom tab bar slide away while you scroll down a page and come back when
+// you scroll up, reach the top or the very bottom, Safari style. Never while
+// you're typing, a menu or sheet is open, or the page barely scrolls. Pure
+// functions here (shared with the unit tests); app.js wires the scroll.
+
+export const NAVHIDE_DOWN = 10 // px scrolled down in one go before the bars go
+export const NAVHIDE_UP = 10 // px scrolled up in one go before they come back
+export const NAVHIDE_TOP = 56 // this near the top they always show
+export const NAVHIDE_BOTTOM = 8 // this near the very bottom they always show
+
+// What counts as typing: a focused field the keyboard is up for.
+export const NAVHIDE_TYPING = 'textarea, [contenteditable=""], [contenteditable="true"], input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"])'
+
+// One scroll reading → the next state. state: { hidden, anchor } where anchor
+// is where the current run of scrolling in one direction started. reading:
+// { y: scrollY, max: how far the page can scroll, blocked: typing / a menu
+// open / the bars held (a route change) }.
+export function navHideStep(state, { y = 0, max = 0, blocked = false } = {}) {
+  const at = Number(y) || 0
+  const prev = state && typeof state === 'object' ? state : { hidden: false, anchor: at } // no state yet: resting here
+  const room = Number(max) || 0
+  const show = { hidden: false, anchor: at }
+  if (blocked) return show
+  if (room < NAVHIDE_TOP + NAVHIDE_DOWN + NAVHIDE_BOTTOM) return show // too short to bother
+  if (at <= NAVHIDE_TOP) return show
+  if (at >= room - NAVHIDE_BOTTOM) return show
+  const anchor = Number.isFinite(prev.anchor) ? prev.anchor : at
+  if (prev.hidden) {
+    if (at > anchor) return { hidden: true, anchor: at } // still going down: follow it
+    return anchor - at >= NAVHIDE_UP ? show : { hidden: true, anchor }
+  }
+  if (at < anchor) return { hidden: false, anchor: at } // going up while shown: follow it
+  return at - anchor >= NAVHIDE_DOWN ? { hidden: true, anchor: at } : { hidden: false, anchor }
+}

package/ui/needs.js

@@ -2,12 +2,13 @@
 // 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),
+// Kinds: permission (Allow once / Always allow here ⓘ / 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.
 
 import { mdInline } from './changelog-md.js'
+import { tipHtml, tipId } from './tips.js'
 
 const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }
 export const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ESC[c])
@@ -56,6 +57,35 @@ export function cardBadge(n) {
 export const KBD_SUBMIT = 'Meta+Enter Control+Enter'
 const kbdHint = (opts) => '<span class="kbd-hint" aria-hidden="true">' + esc(opts.kbd || '⌘↵') + '</span>'
 
+// 0.9.8 "Always allow here" (Claude Code's "don't ask again"): offered only
+// when Leftoff can name the exact rule(s). One line on the button; the rule(s),
+// the file and the project are in its ⓘ tooltip and in its aria-label.
+export function alwaysText(ask) {
+  const a = ask && ask.always
+  if (!a || !Array.isArray(a.rules) || !a.rules.length) return ''
+  return 'adds ' + a.rules.join(', ') + ' to ' + (a.file || '.claude/settings.local.json')
+}
+// The tooltip's words: "Adds `Bash(x)` to .claude/settings.local.json in api, so
+// Claude won't ask for this again here." (markup; the rules in mono)
+export function alwaysTipHtml(ask, session = null) {
+  const a = ask && ask.always
+  if (!alwaysText(ask)) return ''
+  const where = a.project || (session && session.repoLabel) || ''
+  return 'Adds ' + a.rules.map((r) => '<code>' + esc(r) + '</code>').join(', ') + ' to <code>' + esc(a.file || '.claude/settings.local.json') + '</code>' +
+    (where ? ' in <b>' + esc(where) + '</b>' : ' in this project') + ', so Claude won’t ask for ' + (a.rules.length > 1 ? 'these' : 'this') + ' again here.'
+}
+// opts: { label ('Always allow here'; Quick look says 'Always'), scope (keeps the
+// tooltip's id unique when Quick look and the page show the same ask), session, title }
+export function alwaysButton(ask, dis = '', opts = {}) {
+  const t = alwaysText(ask)
+  if (!t) return ''
+  const label = opts.label || 'Always allow here'
+  const id = tipId(opts.scope || 'always', ask.id)
+  return '<span class="always-wrap">' +
+    '<button type="button" class="btn always" data-action="ask-answer" data-choice="allow_always"' + dis + (opts.title || '') + ' aria-label="' + esc(label + ': ' + t) + '" aria-describedby="' + esc(id) + '">' + esc(label) + '</button>' +
+    tipHtml({ id, label: 'What “' + label + '” does', html: alwaysTipHtml(ask, opts.session) }) + '</span>'
+}
+
 // opts: { mayAnswer, goButton(session) -> html, drafts: { [key]: text }, pending: { [key]: label }, compact, kbd }
 export function needPanel(n, opts = {}) {
   const s = n.session || {}
@@ -81,7 +111,8 @@ export function needPanel(n, opts = {}) {
     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>' +
+      alwaysButton(n.ask, dis, { session: s }) +
+      (n.ask.canAllowSession === false ? '' : '<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>') + // 0.9.8: Live link allows one call at a time
       '<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>'

package/ui/pull.js

@@ -0,0 +1,31 @@
+// Pull to refresh on phones (0.9.8). Pull down from the top of any page and let
+// go past the line: the page reads its data again (no full reload). Pure
+// functions here (shared with the unit tests); app.js wires the touches.
+
+export const PULL_TRIGGER = 70 // px of finger travel that arms a refresh
+export const PULL_MAX = 110 // how far the spinner travels at most
+
+// Where a pull never starts: text fields, the Live box, menus and sheets,
+// sideways scrollers, and anything open on top of the page.
+export const PULL_SKIP = 'input, textarea, [contenteditable=""], [contenteditable="true"], .live-box, lo-select, lo-combo, .lo-menu, .lo-backdrop, .cmdk, .quicklook, .moremenu, .statuspop, .doc-viewer, .emoji-sheet-wrap, .relay-screen, .tabs, pre, .scroll-x, [data-no-pull]'
+
+// The phone layout on a touch screen, at the very top of the page, from a
+// place that isn't a field or an overlay, and with no overlay open.
+export function canStartPull({ coarse, narrow, scrollY, target, overlayOpen } = {}) {
+  if (!coarse || !narrow || overlayOpen) return false
+  if (scrollY > 0) return false
+  if (target && typeof target.closest === 'function' && target.closest(PULL_SKIP)) return false
+  return true
+}
+
+// One finger movement: how far the spinner sits (with some resistance), how
+// far round it is, and whether letting go now refreshes. Sideways first means
+// it isn't a pull.
+export function pullStep(dy, dx = 0, { trigger = PULL_TRIGGER, max = PULL_MAX } = {}) {
+  if (!(dy > 0) || Math.abs(dx) > dy) return { pulling: false, dist: 0, progress: 0, armed: false }
+  const dist = Math.min(max, dy < trigger ? dy * 0.8 : trigger * 0.8 + (dy - trigger) * 0.35)
+  return { pulling: true, dist: Math.round(dist), progress: Math.min(1, dy / trigger), armed: dy >= trigger }
+}
+
+// What letting go does.
+export const pullRelease = (step) => (step && step.pulling && step.armed ? 'refresh' : 'cancel')

package/ui/push.js

@@ -0,0 +1,140 @@
+// Phone notifications (0.9.8): the one per-device button. No setting: the
+// button and the browser's own permission prompt are the opt-in, and the same
+// button turns them off for this device. The Mac that owns a session sends
+// the push (src/push.js); this file only subscribes this browser.
+//
+// iPhone: Web Push works for a board added to the Home Screen (iOS 16.4+), so
+// Safari in a tab gets one line saying how, and the button appears in the
+// Home Screen app. Pure parts (pushSupport, pushUi) are shared with the tests.
+
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => '&#' + c.charCodeAt(0) + ';')
+const BELL = '<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>'
+
+export const isIos = (ua = '', touch = 0) => /iPhone|iPad|iPod/.test(ua) || (/Macintosh/.test(ua) && touch > 1)
+
+// What this browser can do -> { state } : insecure | add_to_home | unsupported | denied | off
+export function pushSupport({ ua = '', touch = 0, standalone = false, hasPush = false, hasSW = false, secure = true, permission = 'default' } = {}) {
+  const ios = isIos(ua, touch)
+  if (!secure) return { state: 'insecure', ios }
+  if (ios && !standalone) return { state: 'add_to_home', ios }
+  if (!hasPush || !hasSW) return { state: 'unsupported', ios }
+  if (permission === 'denied') return { state: 'denied', ios }
+  return { state: 'off', ios }
+}
+
+// The block for a slot. st: pushSupport() plus { on, busy, note, noteBad }
+export function pushUi(st = {}) {
+  const note = st.note ? '<p class="push-note' + (st.noteBad ? ' bad' : '') + '" role="status">' + esc(st.note) + '</p>' : ''
+  const busy = st.busy ? ' disabled aria-busy="true"' : ''
+  const wrap = (inner) => '<div class="push-box">' + BELL + '<div class="push-main">' + inner + note + '</div></div>'
+  switch (st.on ? 'on' : st.state) {
+    case 'add_to_home': return wrap('<p class="push-line">Add Leftoff to your Home Screen first (Share → Add to Home Screen), then turn on notifications here.</p>')
+    case 'denied': return wrap('<p class="push-line">Notifications are blocked for Leftoff on this device. Allow them in ' + (st.ios ? 'Settings → Notifications → Leftoff' : 'the browser’s site settings') + ', then come back.</p>')
+    case 'on': return wrap('<p class="push-line"><strong>Notifications on for this device</strong></p><div class="push-acts"><button type="button" class="btn" data-push="test"' + busy + '>Send a test</button><button type="button" class="btn ghost" data-push="off"' + busy + '>Turn off</button></div>')
+    case 'off': return wrap('<p class="push-line">Get a notification when Claude needs you or a Live reply lands.</p><div class="push-acts"><button type="button" class="btn primary" data-push="on"' + busy + '>' + (st.busy ? 'Turning on…' : 'Turn on notifications') + '</button></div>')
+    default: return '' // no Push here (or not https): nothing to offer
+  }
+}
+
+const b64u = (buf) => btoa(String.fromCharCode(...new Uint8Array(buf))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+const unb64u = (s) => Uint8Array.from(atob(String(s).replace(/-/g, '+').replace(/_/g, '/') + '==='.slice((String(s).length + 3) % 4)), (c) => c.charCodeAt(0))
+
+const ui = { st: null, on: false, sub: null, busy: false, note: '', noteBad: false, api: null, refreshed: false }
+
+function env() {
+  return {
+    ua: navigator.userAgent, touch: navigator.maxTouchPoints || 0,
+    standalone: !!(window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) || navigator.standalone === true,
+    hasPush: 'PushManager' in window && 'Notification' in window, hasSW: 'serviceWorker' in navigator,
+    secure: !!window.isSecureContext, permission: 'Notification' in window ? Notification.permission : 'default',
+  }
+}
+
+async function registration() {
+  if (!('serviceWorker' in navigator)) return null
+  return (await navigator.serviceWorker.getRegistration('/')) || (await navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(() => null))
+}
+
+const keyOf = (sub) => { try { const k = sub.options && sub.options.applicationServerKey; return k ? b64u(k) : null } catch { return null } }
+
+async function load() {
+  const e = env()
+  ui.st = pushSupport(e)
+  ui.sub = null; ui.on = false
+  if (ui.st.state !== 'off') return
+  try { const reg = await registration(); ui.sub = reg && reg.pushManager ? await reg.pushManager.getSubscription() : null } catch { ui.sub = null }
+  ui.on = !!ui.sub && e.permission === 'granted'
+  // Once a page load: tell this Mac again (it shares with your other Macs), so a
+  // Mac that lost track, or a new one, knows this device.
+  if (ui.on && !ui.refreshed && ui.api) { ui.refreshed = true; ui.api('POST', '/v1/push/subscribe', { subscription: ui.sub.toJSON(), serverKey: keyOf(ui.sub), ua: navigator.userAgent }).catch(() => {}) }
+}
+
+export function paintPush() {
+  const slots = document.querySelectorAll('[data-push-slot]')
+  if (!slots.length) return
+  const html = ui.st ? pushUi({ ...ui.st, on: ui.on, busy: ui.busy, note: ui.note, noteBad: ui.noteBad }) : ''
+  for (const el of slots) { el.innerHTML = html; el.hidden = !html; el.setAttribute('data-pp', '1') }
+}
+
+async function turnOn() {
+  // The permission prompt first, straight from the tap (iOS asks only then).
+  const perm = await Notification.requestPermission()
+  if (perm !== 'granted') { ui.st = pushSupport(env()); ui.note = perm === 'denied' ? '' : 'Notifications weren’t allowed. Tap again to try.'; return }
+  await registration()
+  const reg = await navigator.serviceWorker.ready
+  const info = await ui.api('GET', '/v1/push')
+  let sub = await reg.pushManager.getSubscription()
+  // An existing subscription stays (the Mac that made it shares its key); a new one uses this Mac's key.
+  if (!sub) sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: unb64u(info.publicKey) })
+  await ui.api('POST', '/v1/push/subscribe', { subscription: sub.toJSON(), serverKey: keyOf(sub) || info.publicKey, ua: navigator.userAgent })
+  ui.sub = sub; ui.on = true; ui.refreshed = true
+  ui.note = 'You’ll get a notification when Claude needs you or a Live reply lands.'
+}
+
+async function turnOff() {
+  const sub = ui.sub
+  if (sub) {
+    const endpoint = sub.endpoint
+    try { await sub.unsubscribe() } catch {}
+    await ui.api('POST', '/v1/push/unsubscribe', { endpoint }).catch(() => {})
+  }
+  ui.sub = null; ui.on = false
+  ui.note = 'Notifications off for this device.'
+}
+
+async function sendTest() {
+  const r = await ui.api('POST', '/v1/push/test', { endpoint: ui.sub && ui.sub.endpoint })
+  if (r && r.ok) { ui.note = 'Sent from ' + (r.machine || 'your Mac') + '. It should show up in a few seconds.'; return }
+  if (r && r.error === 'not_subscribed') { ui.on = false; ui.sub = null; throw new Error('This Mac didn’t know this device. Turn notifications on again.') }
+  throw new Error('The push service didn’t take it' + (r && r.error ? ' (' + r.error + ')' : '') + '.')
+}
+
+// Wire it once: api is app.js's api(method, path, body).
+export function mountPush({ api }) {
+  ui.api = api
+  document.addEventListener('click', async (ev) => {
+    const b = ev.target.closest && ev.target.closest('[data-push]')
+    if (!b || ui.busy) return
+    ev.preventDefault(); ev.stopPropagation()
+    const what = b.getAttribute('data-push')
+    ui.busy = true; ui.note = ''; ui.noteBad = false; paintPush()
+    try {
+      if (what === 'on') await turnOn()
+      else if (what === 'off') await turnOff()
+      else if (what === 'test') await sendTest()
+    } catch (e) { ui.note = e && e.message ? e.message : String(e); ui.noteBad = true }
+    ui.busy = false
+    paintPush()
+  })
+  load().then(paintPush, paintPush)
+  // Settings is drawn on demand: paint a slot the moment one appears.
+  const app = document.getElementById('app')
+  if (app && window.MutationObserver) new MutationObserver(() => { if (document.querySelector('[data-push-slot]:not([data-pp])')) paintPush() }).observe(app, { childList: true, subtree: true })
+  // A tapped notification: the service worker asks the open board to show that session.
+  if ('serviceWorker' in navigator) navigator.serviceWorker.addEventListener('message', (ev) => {
+    const d = ev.data || {}
+    if (d.type !== 'leftoff-open' || typeof d.url !== 'string') return
+    try { const u = new URL(d.url, location.origin); if (u.origin === location.origin && location.hash !== u.hash) location.hash = u.hash } catch {}
+  })
+  document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible' && !ui.busy) load().then(paintPush, paintPush) })
+}

package/ui/relay-client.js

@@ -44,7 +44,7 @@ export async function forgetDeviceKey() {
 
 // ------------------------------------------------------------ state
 
-const relay = { user: RELAY_USER, device: null, key: null, status: null, mac: null, ready: null, latencyMs: null }
+const relay = { user: RELAY_USER, device: null, key: null, status: null, mac: null, ready: null, latencyMs: null, owners: new Map() }
 // ui/direct.js loads only on the board itself (never on pair.html, which the
 // relay serves before a browser is paired and where this file is imported too).
 let route = null, directOrRelay = null
@@ -140,6 +140,39 @@ function watchDirect() {
   document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') again(true) })
 }
 
+// ------------------------------------------------------------ auto-switch host (0.9.8)
+// On your leftoff.dev board, a session that lives on another Mac loads its own
+// data (Live, its transcript, Find lists, files...) straight from that Mac
+// through the relay, instead of from the Mac serving the board. The board says
+// which Mac each session lives on (leftoffRelay.owner); these decide where one
+// call goes. Pure and exported, so they are unit-tested.
+
+// /v1/sessions/<id>/<anything> -> <id>; the record itself (/v1/sessions/<id>) stays on
+// the board's Mac (it's the synced copy the board lists), and so does everything else.
+const SESSION_SUB = /^\/v1\/sessions\/([^/?#]+)\/[^?#]+$/
+export function sessionOfPath(pathname) {
+  const m = SESSION_SUB.exec(String(pathname || ''))
+  if (!m) return null
+  try { return decodeURIComponent(m[1]) } catch { return null }
+}
+
+// Which Mac a call should go to, or null for the board's own Mac.
+// owners: Map(sessionId -> machine) the board filled in; current: the Mac serving the board;
+// online: the Macs the relay says are connected now.
+export function ownerRoute(pathname, owners, { current = null, online = [] } = {}) {
+  const id = sessionOfPath(pathname)
+  if (!id || !owners || typeof owners.get !== 'function') return null
+  const m = owners.get(id)
+  if (!m || m === current) return null
+  return online.includes(m) ? m : null
+}
+
+// A failed hop to the owner falls back to the board's Mac (which reaches the
+// owner over the peer link, or says plainly that it's offline).
+export function fallBack({ status = 0, code = '' } = {}) {
+  return status === 0 || status === 401 || status === 403 && code === 'unknown_device' || status === 502 || status === 503 || status === 504 || code === 'mac_offline' || code === 'timeout'
+}
+
 // ------------------------------------------------------------ the tunnel
 
 async function tunnel(url, init = {}, retried = false) {
@@ -151,6 +184,9 @@ async function tunnel(url, init = {}, retried = false) {
   const hdrs = new Headers(init.headers || {})
   if (hdrs.get('content-type')) h['content-type'] = hdrs.get('content-type')
   const body = { m: method, p: url.pathname + url.search, b, h }
+  // 0.9.8: a session that lives on another Mac answers for itself (ui/owner-route.js)
+  const owner = ownerRoute(url.pathname, relay.owners, { current: relay.mac, online: onlineMacs() })
+  if (owner) { const r = await viaOwner(owner, body, init).catch(() => null); if (r) return r }
   if (!onDirect()) return viaRelay(body, init, retried)
   return directOrRelay({
     route,
@@ -164,6 +200,22 @@ async function tunnel(url, init = {}, retried = false) {
   })
 }
 
+function onlineMacs() { return ((relay.status && relay.status.macs) || []).filter((m) => m.online).map((m) => m.machine) }
+// Straight to the session's own Mac through the relay; null sends the call to the
+// board's Mac instead (the owner went away, or doesn't know this browser yet).
+async function viaOwner(machine, body, init) {
+  const env = await sealRequest(relay.key, { device: relay.device, machine, 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) {
+    const j = await res.json().catch(() => ({}))
+    if (j.code === 'mac_offline') refreshStatus().catch(() => {})
+    return null
+  }
+  const out = toResponse(await openResponse(relay.key, env, await res.json()))
+  if (out.status === 401 || out.status === 403) { const j = await out.clone().json().catch(() => ({})); if (fallBack({ status: out.status, code: j.code || '' }) || /device/.test(j.code || '')) return null }
+  return out
+}
+
 async function viaRelay(body, init, retried) {
   const gone = relay.mac
   const env = await sealRequest(relay.key, { device: relay.device, machine: gone, body })
@@ -196,6 +248,7 @@ function patchedFetch(input, init) {
 }
 
 // EventSource('/v1/stream') -> long-polls of GET /v1/events through the tunnel.
+export const POLL_WAIT_MS = 20000, POLL_MARGIN_MS = 12000
 class RelayEventSource extends EventTarget {
   constructor(url) {
     super()
@@ -207,11 +260,20 @@ class RelayEventSource extends EventTarget {
     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()
+        // 0.9.8: a poll that outlives its wait plus a margin is dead (iOS
+        // suspended the page mid-request, or the relay dropped it silently):
+        // abort it and poll again instead of waiting forever.
+        const ctrl = this.ctrl = new AbortController()
+        const timer = setTimeout(() => ctrl.abort(), POLL_WAIT_MS + POLL_MARGIN_MS)
+        let j
+        try {
+          const res = await patchedFetch('/v1/events?after=' + (this.seq == null ? -1 : this.seq) + '&ms=' + POLL_WAIT_MS, { signal: ctrl.signal })
+          if (!res.ok) throw new Error('HTTP ' + res.status)
+          j = await res.json()
+        } finally { clearTimeout(timer) }
+        if (this.readyState === 2) return
         if (this.readyState === 0) { this.readyState = 1; if (this.onopen) this.onopen(new Event('open')) }
+        this.dispatchEvent(new MessageEvent('ping', { data: '{}' })) // a poll that answered is the stream's heartbeat
         const first = this.seq == null
         this.seq = j.seq
         if (!first) for (const e of j.events || []) {
@@ -272,6 +334,9 @@ export const leftoffRelay = {
   get route() { return onDirect() ? 'direct' : 'relay' },
   get directLatencyMs() { return route ? route.latencyMs : null },
   status: () => refreshStatus(),
+  // 0.9.8: which Mac a session lives on (null: the board's own), so its calls go there
+  owner(id, machine) { if (!id) return; if (machine) relay.owners.set(String(id), String(machine)); else relay.owners.delete(String(id)) },
+  ownerOf(id) { const m = relay.owners.get(String(id)); return m && m !== relay.mac && onlineMacs().includes(m) ? m : null },
   // Switch Macs: the board reloads from the other one.
   pick(mac) { remember(mac); cookieMac(mac); location.reload() },
   // This browser revoked itself (0.6.6).

package/ui/restore-gate.js

@@ -11,11 +11,14 @@
 //   route     'direct' | 'relay' (leftoffRelay.route), routeMac: the Mac it is on
 //   machine   the Mac the restore card belongs to
 //   phone     a phone or tablet (never runs Leftoff)
-// -> { ok, how: 'local' | 'direct' | null, hint: text with `commands` or null }
-export function restoreAccess({ local = false, hosted = false, route = null, routeMac = null, machine = null, phone = false } = {}) {
+//   canAsk    0.9.8: that Mac takes Restore requests from other devices (GET /v1/restore has asks)
+// -> { ok, how: 'local' | 'direct' | 'ask' | null, hint: text with `commands` or null }
+//   'ask': the request goes to that Mac, where a person confirms before any tab opens.
+export function restoreAccess({ local = false, hosted = false, route = null, routeMac = null, machine = null, phone = false, canAsk = false } = {}) {
   if (local && !hosted) return { ok: true, how: 'local', hint: null }
   if (hosted && !phone && route === 'direct' && machine && routeMac === machine) return { ok: true, how: 'direct', hint: null }
   const m = machine || 'the Mac'
+  if (canAsk && machine) return { ok: true, how: 'ask', hint: 'Restore asks ' + m + ' first: someone at ' + m + ' confirms before the tabs open.' }
   if (phone) return { ok: false, how: null, hint: 'Restore opens Ghostty tabs on ' + m + ', so it can’t run from a phone yet. On ' + m + ', run `leftoff restore`.' }
   if (hosted) {
     return { ok: false, how: null, hint: 'Restore opens Ghostty tabs on ' + m + '. Open this board on ' + m + ', or run `leftoff restore` there. Already on ' + m + '? Run `leftoff setup` and turn on https://leftoff.localhost so this page can reach it.' }
@@ -23,6 +26,27 @@ export function restoreAccess({ local = false, hosted = false, route = null, rou
   return { ok: false, how: null, hint: 'Restore opens Ghostty tabs on ' + m + ', so it works from ' + m + '’s own browser. Or run `leftoff restore` there.' }
 }
 
+// 0.9.8: what the card says about a Restore it asked another Mac for.
+//   ask: { state, machine, count, expiresAt, result, error }  -> { text, tone: 'info' | 'ok' | 'warn' }
+export function askLine(ask, { clock = (iso) => iso } = {}) {
+  if (!ask) return null
+  const m = ask.machine || 'the Mac', n = ask.count || 0
+  const tabs = n + ' tab' + (n === 1 ? '' : 's')
+  switch (ask.state) {
+    case 'pending': return { text: 'Waiting for someone at ' + m + ' to confirm' + (ask.expiresAt ? ' (until ' + clock(ask.expiresAt) + ')' : '') + '…', tone: 'info' }
+    case 'confirming': return { text: 'Confirmed on ' + m + ': opening ' + tabs + '…', tone: 'info' }
+    case 'confirmed': {
+      const r = ask.result || {}
+      if (r.how === 'print') return { text: 'Confirmed on ' + m + ', but Ghostty didn’t open there: run `leftoff restore` on ' + m + '.', tone: 'warn' }
+      return { text: 'Confirmed on ' + m + ': ' + (r.opened || 0) + ' of ' + tabs + ' opened' + (r.failed ? ', ' + r.failed + ' didn’t' : '') + '.', tone: r.failed ? 'warn' : 'ok' }
+    }
+    case 'declined': return { text: 'Declined on ' + m + '. Nothing was opened.', tone: 'warn' }
+    case 'expired': return { text: 'Nobody confirmed on ' + m + ' in time. Nothing was opened.', tone: 'warn' }
+    case 'failed': return { text: 'It didn’t work on ' + m + ': ' + (ask.error || 'an error') + '.', tone: 'warn' }
+    default: return { text: ask.error || 'Couldn’t ask ' + m + '.', tone: 'warn' }
+  }
+}
+
 // The hint as HTML: escaped, `commands` in <code>.
 export function hintHtml(hint, esc) {
   return String(hint || '').split('`').map((part, i) => (i % 2 ? '<code>' + esc(part) + '</code>' : esc(part))).join('')