@leftoff/cli 0.9.8-beta.1 → 0.9.8-beta.2

package/ui/live-status.js

@@ -0,0 +1,89 @@
+// 0.9.8 Live link: what a message sent from the board is doing right now,
+// shared by the daemon (src/live-link.js keeps it per message) and the board
+// (which draws it with a spinner and the time since Send).
+//
+// Channels can't stream tokens: Claude answers in one go. What we do see is
+// the channel's delivery (received), the mod's hooks for that session (a turn
+// started, a turn ended), the session's transcript as it is written (each
+// tool call and each block of text) and permission prompts. Those move one
+// message through:
+//
+//   sent ─► received ─► working (running Bash: ls · waiting for your OK) ─► replied
+//     └─► failed                       └─► stopped (the turn ended with no answer)
+//   received/working with nothing new for LIVE_QUIET_MS reads "quiet" until
+//   something happens again; replied and failed are final.
+
+export const LIVE_QUIET_MS = 3 * 60 * 1000
+export const LIVE_PHASES = ['sent', 'received', 'working', 'replied', 'stopped', 'failed']
+const FINAL = new Set(['replied', 'failed'])
+
+const clip = (s, n) => { const t = String(s == null ? '' : s).replace(/\s+/g, ' ').trim(); return t.length > n ? t.slice(0, n - 1) + '…' : t }
+
+export function initStatus(at = 0) { return { phase: 'sent', at, last: at, tool: null, waiting: null, ran: [], endedAt: null } }
+
+// One thing that happened to the message. ev: { type, at, tool?, detail?, asked?, text? }
+//   delivered | failed | started | tool | tool_done | ask | ask_done | text | reply | ended
+export function stepStatus(st, ev = {}) {
+  const s = { ...(st || initStatus(ev.at || 0)), ran: [...((st && st.ran) || [])] }
+  const at = ev.at || s.last
+  if (FINAL.has(s.phase) && !(s.phase === 'replied' && ev.type === 'tool_done')) return s
+  switch (ev.type) {
+    case 'delivered': if (s.phase === 'sent') s.phase = 'received'; break
+    case 'failed': if (s.phase === 'sent') { s.phase = 'failed'; s.error = ev.error || null; s.endedAt = at } break
+    case 'started': case 'text': if (s.phase !== 'replied') s.phase = 'working'; if (ev.type === 'text') s.waiting = null; break
+    case 'tool': s.phase = 'working'; s.tool = { name: clip(ev.tool, 40), detail: clip(ev.detail, 80) }; s.waiting = null; break
+    case 'tool_done': {
+      const name = clip(ev.tool || (s.tool && s.tool.name), 40)
+      if (name) s.ran.push({ tool: name, detail: clip(ev.detail || (s.tool && s.tool.detail), 80), asked: !!ev.asked })
+      if (s.ran.length > 20) s.ran = s.ran.slice(-20)
+      s.tool = null; s.waiting = null
+      break
+    }
+    case 'ask': s.phase = 'working'; s.waiting = { tool: clip(ev.tool, 40), detail: clip(ev.detail, 80) }; break
+    case 'ask_done': s.waiting = null; break
+    case 'reply': s.phase = 'replied'; s.tool = null; s.waiting = null; s.endedAt = at; break
+    case 'ended': s.tool = null; s.waiting = null; s.endedAt = at; s.phase = ev.text ? 'replied' : 'stopped'; break
+    default: return s
+  }
+  s.last = at
+  return s
+}
+
+// The line under the message: { label, steps, spin, tone, elapsedMs }
+export function statusView(st, now = Date.now()) {
+  if (!st) return null
+  const quiet = (st.phase === 'received' || st.phase === 'working') && now - (st.last || st.at) >= LIVE_QUIET_MS
+  const elapsedMs = Math.max(0, (st.endedAt || now) - (st.at || now))
+  let label
+  if (st.phase === 'sent') label = 'Sent, waiting for the session'
+  else if (st.phase === 'received') label = quiet ? 'Received · no word from Claude yet' : 'Received · Claude is starting…'
+  else if (st.phase === 'working') {
+    if (st.waiting) label = 'Waiting for your OK' + (st.waiting.tool ? ' (' + st.waiting.tool + (st.waiting.detail ? ': ' + st.waiting.detail : '') + ')' : '')
+    else if (st.tool) label = 'Claude is working… (running ' + st.tool.name + (st.tool.detail ? ': ' + st.tool.detail : '') + ')'
+    else label = quiet ? 'Claude has been quiet for a while (check the terminal)' : 'Claude is working…'
+  } else if (st.phase === 'replied') label = 'Replied'
+  else if (st.phase === 'stopped') label = 'Stopped without a reply'
+  else label = 'Didn’t arrive'
+  const at = { sent: 0, received: 1, working: 2, replied: 3, stopped: 3, failed: 0 }[st.phase] || 0
+  const steps = ['Sent', 'Received', st.phase === 'stopped' ? 'Stopped' : 'Working', st.phase === 'stopped' ? null : 'Replied'].filter(Boolean)
+    .map((name, i) => ({ name, state: st.phase === 'failed' ? (i === 0 ? 'bad' : 'todo') : i < at ? 'done' : i === at ? (FINAL.has(st.phase) || st.phase === 'stopped' ? 'done' : 'now') : 'todo' }))
+  const spin = !quiet && (st.phase === 'sent' || st.phase === 'received' || st.phase === 'working') && !st.waiting
+  const tone = st.phase === 'failed' ? 'bad' : st.phase === 'stopped' || quiet || st.waiting ? 'warn' : st.phase === 'replied' ? 'good' : 'busy'
+  return { label, steps, spin, tone, quiet, elapsedMs, final: FINAL.has(st.phase) || st.phase === 'stopped' }
+}
+
+// 4s, 1m 05s, 12m
+export function elapsedText(ms) {
+  const s = Math.max(0, Math.round(Number(ms || 0) / 1000))
+  if (s < 60) return s + 's'
+  const m = Math.floor(s / 60)
+  return m < 10 ? m + 'm ' + String(s % 60).padStart(2, '0') + 's' : m + 'm'
+}
+
+// The tools that ran in this turn without a permission prompt: a note under the reply.
+export function ranWithoutAsking(st) {
+  const seen = new Set()
+  const out = []
+  for (const r of (st && st.ran) || []) { if (r.asked || seen.has(r.tool)) continue; seen.add(r.tool); out.push(r.tool) }
+  return out
+}

package/ui/live-view.js

@@ -0,0 +1,171 @@
+// 0.9.8 Live link on the board: the pieces of the Live box and the live card
+// that are pure (and unit tested), plus the small DOM keeper that lets the Live
+// thread survive the board's re-renders: the same list element stays on the
+// page, messages are diffed in, and it sticks to the bottom only when you are
+// already there.
+import { statusView, elapsedText, ranWithoutAsking } from './live-status.js'
+
+const clip = (s, n) => { const t = String(s == null ? '' : s).replace(/\s+/g, ' ').trim(); return t.length > n ? t.slice(0, n - 1) + '…' : t }
+export const isLiveSession = (s) => !!(s && s.liveLink && s.liveLink.on && !s.endedAt && s.live !== 'closed')
+
+// The name a session goes by. A live session is never "Untitled": until it has
+// a title (its first prompt, Claude Code's /rename, a generated one) it goes by
+// its repo and branch.
+export function sessionTitle(s, { untitled = 'Untitled session' } = {}) {
+  if (!s) return untitled
+  if (s.title) return s.title
+  if (isLiveSession(s)) {
+    const repo = s.repoLabel || s.repoName || (s.repo && s.repo.name) || null
+    const branch = s.branch || (s.repo && s.repo.branch) || null
+    const where = [repo, branch && branch !== repo ? branch : null].filter(Boolean).join(' · ')
+    if (where) return where
+    return 'Live session'
+  }
+  return untitled
+}
+
+// Which pills a card shows: a live session that is just waiting for you shows
+// one Live pill (never "dormant"); one that is working or needs you shows that too.
+export function cardPills(s) {
+  const live = isLiveSession(s)
+  const st = s && s.status
+  if (!live) return { status: st || null, live: false }
+  return { status: ['active', 'needs_input', 'background'].includes(st) ? st : null, live: true }
+}
+
+// The "N empty sessions" fold never takes a live session.
+export function foldsAsEmpty(s) { return !!(s && s.empty && !s.pinned && !(s.needsYou && s.needsYou.blocking) && !isLiveSession(s)) }
+
+// Who sent a message: "You · from <device>". The path (relay, direct,
+// Tailscale) is added only when it explains something: the message didn't arrive.
+const PATHS = { relay: 'through the relay', direct: 'direct', tailscale: 'over Tailscale', peer: 'through another Mac', local: null }
+export function senderLabel(m) {
+  if (!m) return ''
+  if (m.from === 'claude') return 'Claude'
+  if (m.from === 'event') return 'Event' + (m.source ? ' · ' + m.source : '')
+  const by = m.by || {}
+  let device = by.device || null
+  if (!device && by.transport === 'local') device = 'this Mac'
+  if (!device && m.where) { // older entries: just the where line
+    const w = String(m.where)
+    device = /^on this machine/.test(w) ? 'this Mac' : (w.match(/ as ([^(·]+?)(?: \(|$| ·)/) || [])[1] || (w.match(/^from (.+?)’s board/) || [])[1] || null
+  }
+  let label = 'You' + (device ? ' · from ' + device : '')
+  const path = PATHS[by.transport] || null
+  if (path && m.state === 'failed') label += ' (' + path + ')'
+  return label
+}
+export function senderTitle(m) {
+  const by = (m && m.by) || {}
+  const path = PATHS[by.transport] || null
+  return [by.device ? 'From ' + by.device : null, path ? 'Path: ' + path : by.transport === 'local' ? 'Path: this Mac' : null].filter(Boolean).join(' · ') || (m && m.where) || ''
+}
+
+// Stick to the bottom? Only when you are already within `slack` px of it.
+export function atBottom({ scrollTop = 0, scrollHeight = 0, clientHeight = 0 } = {}, slack = 80) {
+  return scrollHeight - clientHeight - scrollTop <= slack
+}
+// After new content: follow it, or leave the view where it is and count what is new.
+export function scrollDecision({ wasAtBottom, newCount = 0, unseen = 0 }) {
+  if (wasAtBottom) return { follow: true, unseen: 0 }
+  return { follow: false, unseen: unseen + Math.max(0, newCount) }
+}
+
+// #/s/<id>/live: the session page, scrolled to the Live box with its input ready.
+export function liveHref(id) { return '#/s/' + encodeURIComponent(String(id)) + '/live' }
+export function parseLiveRoute(hash) {
+  const h = String(hash || '').replace(/^#\/?/, '').split('?')[0]
+  const p = h.split('/').filter(Boolean)
+  return p[0] === 's' && p[1] && p[2] === 'live' ? decodeURIComponent(p[1]) : null
+}
+
+// An unread dot on the Chat button: Claude replied after you last looked.
+export function hasUnread(lastReplyAt, seenAt) {
+  const r = Date.parse(lastReplyAt || '')
+  if (isNaN(r)) return false
+  const s = Date.parse(seenAt || '')
+  return isNaN(s) || r > s
+}
+
+// ------------------------------------------------------------ the thread's HTML
+
+// opts: { esc, ago, md (markdown -> html), now }
+export function entryKey(m) { return String(m.id || '') + ':' + m.from }
+export function entryHtml(m, { esc, ago, md, now = Date.now() }) {
+  const who = senderLabel(m)
+  const title = m.from === 'you' ? senderTitle(m) : ''
+  let body
+  if (m.from === 'claude') body = '<div class="lv-text lv-md">' + (md ? md(m.text || '') : esc(m.text || '')) + '</div>'
+  else body = '<div class="lv-text">' + esc(m.text || '') + '</div>'
+  let foot = ''
+  if (m.from === 'claude') {
+    const ran = (m.ranWithoutAsking || []).length ? m.ranWithoutAsking : []
+    if (!m.done) foot += '<div class="lv-note">Still writing…</div>'
+    if (ran.length) foot += '<div class="lv-note">Ran without asking: ' + esc(ran.join(', ')) + ' <span class="faint">(read-only or allowed in your Claude Code settings, so no Allow/Deny)</span></div>'
+  } else if (m.status) {
+    foot = statusHtml(m.status, { esc, now, error: m.errorText })
+  } else if (m.state) {
+    foot = '<div class="lv-status ' + (m.state === 'failed' ? 'bad' : '') + '">' + esc(m.state === 'failed' ? (m.errorText || 'Didn’t arrive') : m.state === 'received' ? 'Received by the session' : 'Sent, waiting for the session') + '</div>'
+  }
+  return '<li class="lv lv-' + esc(m.from) + '" data-key="' + esc(entryKey(m)) + '" data-sig="' + esc(sigHash(entrySig(m))) + '"><div class="lv-who"' + (title ? ' title="' + esc(title) + '"' : '') + '>' + esc(who) + ' <span class="faint">' + esc(ago(m.at)) + '</span></div>' + body + foot + '</li>'
+}
+
+export function statusHtml(st, { esc, now = Date.now(), error = null }) {
+  const v = statusView(st, now)
+  if (!v) return ''
+  const label = st.phase === 'failed' && error ? error : v.label
+  const steps = v.steps.map((x) => '<span class="lvs-step ' + x.state + '">' + esc(x.name) + '</span>').join('<span class="lvs-arrow" aria-hidden="true">→</span>')
+  return '<div class="lv-status ' + v.tone + '" data-since="' + esc(String(st.at || '')) + '"' + (v.final ? ' data-final="' + esc(String(st.endedAt || '')) + '"' : '') + ' role="status">' +
+    (st.phase === 'replied' // done: the steps say it all, with the time it took
+      ? '<div class="lvs-steps">' + steps + '<span class="lvs-time">' + esc(elapsedText(v.elapsedMs)) + '</span></div></div>'
+      : '<div class="lvs-steps">' + steps + '</div>' +
+        '<div class="lvs-line">' + (v.spin ? '<span class="lv-spin" aria-hidden="true"></span>' : '') + '<span class="lvs-label">' + esc(label) + '</span><span class="lvs-time">' + esc(elapsedText(v.elapsedMs)) + '</span></div></div>')
+}
+
+export { ranWithoutAsking }
+
+// A content signature, to replace only the entries that changed (the time-ago
+// text is left out so a minute ticking over doesn't redraw a reply).
+function sigHash(s) { let h = 5381; for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) | 0; return (h >>> 0).toString(36) }
+export function entrySig(m) { return JSON.stringify([m.text, m.state, m.status && [m.status.phase, m.status.tool, m.status.waiting, (m.status.ran || []).length, m.status.endedAt], m.done, m.ranWithoutAsking, m.errorText]) }
+
+// ------------------------------------------------------------ the DOM keeper
+
+// Keeps the thread's <ol> across re-renders of the session page.
+export function createLiveKeeper() {
+  const kept = { sid: null, wrap: null, unseen: 0 }
+  return {
+    // Before the page is replaced: hold on to the current thread.
+    before(root) {
+      const w = root && root.querySelector('.live-thread')
+      if (w) { kept.wrap = w; kept.sid = w.dataset.sid; w.remove() } else { kept.wrap = null; kept.sid = null }
+    },
+    // After: put the old thread back in place of the new one and diff the new entries in.
+    after(root) {
+      const fresh = root && root.querySelector('.live-thread')
+      if (!fresh) { kept.wrap = null; return null }
+      const old = kept.wrap
+      if (!old || old.dataset.sid !== fresh.dataset.sid) { kept.unseen = 0; const ol = fresh.querySelector('.live-log'); if (ol) ol.scrollTop = ol.scrollHeight; return { thread: fresh, follow: true, first: true } }
+      const oldOl = old.querySelector('.live-log'), newOl = fresh.querySelector('.live-log')
+      fresh.replaceWith(old)
+      if (!oldOl || !newOl) { if (newOl && !oldOl) old.replaceWith(fresh); return { thread: oldOl ? old : fresh, follow: true } }
+      const wasAtBottom = atBottom(oldOl)
+      const have = new Map([...oldOl.children].map((li) => [li.dataset.key, li]))
+      let added = 0
+      let prev = null
+      for (const li of [...newOl.children]) {
+        const cur = have.get(li.dataset.key)
+        have.delete(li.dataset.key)
+        if (!cur) { added++; prev ? prev.after(li) : oldOl.prepend(li); prev = li; continue }
+        if (cur.dataset.sig !== li.dataset.sig) { cur.replaceWith(li); prev = li } else prev = cur
+      }
+      for (const li of have.values()) li.remove()
+      const d = scrollDecision({ wasAtBottom, newCount: added, unseen: kept.unseen })
+      kept.unseen = d.unseen
+      if (d.follow) oldOl.scrollTop = oldOl.scrollHeight
+      return { thread: old, follow: d.follow, unseen: d.unseen }
+    },
+    seen() { kept.unseen = 0 },
+    get unseen() { return kept.unseen },
+  }
+}

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/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,6 +111,7 @@ 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>' +
+      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 + '">' +

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/sw.js

@@ -22,13 +22,26 @@ self.addEventListener('fetch', (event) => {
   if (req.mode === 'navigate') {
     // A 502/503/504 is Tailscale Serve saying the daemon behind it is down.
     // (The relay's own "Your Macs are asleep" page, x-leftoff-page, shows as is.)
-    event.respondWith(fetch(req).then((res) => (res.status >= 502 && res.status <= 504 && !res.headers.get('x-leftoff-page') ? offline() : res)).catch(offline))
+    // 0.9.7: never an endless blank page. The relay answers within a second
+    // (the board, or its own connecting page); anything slower than NAV_TIMEOUT_MS
+    // gets a page that says so, with Try again.
+    const net = fetch(req).then((res) => (res.status >= 502 && res.status <= 504 && !res.headers.get('x-leftoff-page') ? offline() : res)).catch(offline)
+    event.respondWith(Promise.race([net, new Promise((resolve) => setTimeout(() => resolve(slow(req.url)), NAV_TIMEOUT_MS))]))
     return
   }
   // The offline page's own files, so it renders with no network.
   if (OFFLINE.includes(url.pathname)) event.respondWith(fetch(req).catch(() => caches.match(url.pathname)))
 })
 
+const NAV_TIMEOUT_MS = 12000
+function slow(url) {
+  const esc = (s) => String(s).replace(/[&<>"']/g, (c) => '&#' + c.charCodeAt(0) + ';')
+  const body = '<!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="light dark"><title>Leftoff · still waiting</title>' +
+    '<style>body{margin:0;font:16px/1.45 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;background:Canvas;color:CanvasText}main{max-width:460px;margin:0 auto;padding:max(48px,env(safe-area-inset-top)) 20px 40px}h1{font-size:26px;margin:0 0 10px}p{opacity:.75}a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;background:#d9622b;color:#fff;font-weight:600;text-decoration:none;margin-top:20px}</style></head>' +
+    '<body><main><h1>Leftoff is taking too long</h1><p>Your Mac hasn’t sent the board yet. It may be waking up.</p><a href="' + esc(url) + '">Try again</a></main></body></html>'
+  return new Response(body, { status: 504, headers: { 'content-type': 'text/html; charset=utf-8', 'cache-control': 'no-store' } })
+}
+
 function offline() {
   return caches.match('/offline.html').then((r) => r || new Response('Leftoff is offline', { status: 503, headers: { 'content-type': 'text/plain' } }))
 }

package/ui/tips.js

@@ -0,0 +1,117 @@
+// 0.9.8 info tips: a small ⓘ button beside a control, with the details in a
+// tooltip. Hover or keyboard focus on the ⓘ shows it (desktop); a tap pins it
+// open as a small popover (touch); a second tap, Escape or a click outside
+// closes it. The tip is a role="tooltip" the control and the ⓘ both point at
+// with aria-describedby, so screen readers get the words without opening it.
+// tipHtml() is pure (the unit tests read it); wireTips() runs once in the board.
+
+import { icon } from './icons.js'
+
+const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ESC[c])
+
+// A DOM id from any string (an ask id can carry anything).
+export const tipId = (scope, key) => 'tip-' + String(scope || 't').replace(/[^A-Za-z0-9_-]/g, '_') + '-' + String(key || 'x').replace(/[^A-Za-z0-9_-]/g, '_')
+
+// The ⓘ button and its (hidden) tooltip. `html` is already escaped markup.
+export function tipHtml({ id, label, html }) {
+  return '<button type="button" class="tip-btn" aria-label="' + esc(label) + '" aria-expanded="false" aria-controls="' + esc(id) + '" aria-describedby="' + esc(id) + '">' + icon('info') + '</button>' +
+    '<span class="tip" role="tooltip" id="' + esc(id) + '" hidden>' + html + '</span>'
+}
+
+const OPEN_DELAY = 120
+const CLOSE_DELAY = 180
+
+export function wireTips(doc = document) {
+  const win = doc.defaultView
+  let cur = null // { btn, tip, pinned }
+  let timer = 0
+  const later = (fn, ms) => { win.clearTimeout(timer); timer = win.setTimeout(fn, ms) }
+  const tipOf = (btn) => btn && doc.getElementById(btn.getAttribute('aria-controls'))
+
+  function place(btn, tip) {
+    const r = btn.getBoundingClientRect()
+    const vh = win.innerHeight
+    // kept on screen, and inside a small popover (Quick look) when it sits in one
+    const box = btn.closest('.quicklook')
+    const b = box ? box.getBoundingClientRect() : { left: 0, right: doc.documentElement.clientWidth }
+    const lo = b.left + 8
+    const hi = b.right - 8
+    tip.style.maxWidth = Math.min(320, hi - lo) + 'px'
+    const w = tip.offsetWidth
+    const h = tip.offsetHeight
+    let left = r.right - w // right-aligned with the ⓘ
+    left = Math.max(lo, Math.min(left, hi - w))
+    let top = r.bottom + 6
+    let up = false
+    if (top + h > vh - 8 && r.top - 6 - h >= 8) { top = r.top - 6 - h; up = true }
+    tip.style.left = Math.round(left) + 'px'
+    tip.style.top = Math.round(top) + 'px'
+    tip.classList.toggle('up', up)
+  }
+
+  function show(btn, pinned) {
+    const tip = tipOf(btn)
+    if (!tip) return
+    win.clearTimeout(timer)
+    if (cur && cur.btn !== btn) hide()
+    tip.hidden = false
+    btn.setAttribute('aria-expanded', 'true')
+    place(btn, tip)
+    cur = { btn, tip, pinned: !!pinned || !!(cur && cur.btn === btn && cur.pinned) }
+  }
+  function hide() {
+    win.clearTimeout(timer)
+    if (!cur) return
+    cur.tip.hidden = true
+    if (cur.btn.isConnected) cur.btn.setAttribute('aria-expanded', 'false')
+    cur = null
+  }
+  const inside = (t) => !!(cur && t && t.closest && (cur.btn.contains(t) || cur.tip.contains(t)))
+
+  doc.addEventListener('click', (e) => {
+    if (cur && !cur.tip.isConnected) cur = null // the list was redrawn under it
+    const btn = e.target.closest && e.target.closest('.tip-btn')
+    if (btn) {
+      e.preventDefault(); e.stopPropagation()
+      if (cur && cur.btn === btn && cur.pinned) return hide()
+      return show(btn, true)
+    }
+    if (cur && !inside(e.target)) hide()
+  }, true)
+  // Mouse: hover the ⓘ (or the tip itself, so it can be read and selected)
+  doc.addEventListener('pointerover', (e) => {
+    if (e.pointerType !== 'mouse') return
+    const btn = e.target.closest && e.target.closest('.tip-btn')
+    if (btn) return (cur && cur.btn === btn) ? win.clearTimeout(timer) : later(() => show(btn, false), OPEN_DELAY)
+    if (inside(e.target)) win.clearTimeout(timer)
+  })
+  doc.addEventListener('pointerout', (e) => {
+    if (e.pointerType !== 'mouse') return
+    const from = e.target.closest && e.target.closest('.tip-btn, .tip')
+    if (!from) return
+    if (inside(e.relatedTarget)) return
+    if (!cur) return win.clearTimeout(timer)
+    if (!cur.pinned) later(hide, CLOSE_DELAY)
+  })
+  // Keyboard: focus on the ⓘ shows it, leaving it hides it (unless tapped open)
+  doc.addEventListener('focusin', (e) => {
+    const btn = e.target.closest && e.target.closest('.tip-btn')
+    if (btn && btn.matches(':focus-visible')) show(btn, false)
+  })
+  doc.addEventListener('focusout', (e) => {
+    if (cur && !cur.pinned && e.target === cur.btn && !inside(e.relatedTarget)) hide()
+  })
+  // Escape closes it first (before Quick look or a dialog hears the key)
+  doc.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape' || !cur) return
+    e.preventDefault(); e.stopImmediatePropagation()
+    const b = cur.btn
+    const back = doc.activeElement && doc.activeElement !== b && cur.tip.contains(doc.activeElement)
+    hide()
+    if (back) b.focus()
+  }, true)
+  win.addEventListener('resize', () => { if (cur) place(cur.btn, cur.tip) })
+  win.addEventListener('scroll', () => { if (cur) { if (!cur.btn.isConnected) hide(); else place(cur.btn, cur.tip) } }, true)
+  return { hide, isOpen: () => !!cur }
+}