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

package/ui/live-status.js

@@ -0,0 +1,90 @@
+// 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, 300) }; 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), 300), 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, 300) }; 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
+    case 'lost': s.tool = null; s.waiting = null; s.endedAt = at; s.phase = 'stopped'; s.lost = true; break // a restart came in between and no answer is in the transcript
+    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 = st.lost ? 'No reply recorded' : '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' ? (st.lost ? 'No reply' : '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,278 @@
+// 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 : '')
+  if (m.from === 'terminal') return 'You · terminal' // typed in Claude Code itself (from its transcript)
+  if (m.history && !m.by) return 'You · board'
+  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 }
+// "Show earlier" at the top of the thread, when older turns are left out.
+export function earlierHtml(n, { esc }) {
+  if (!(n > 0)) return ''
+  return '<li class="lv-earlier" data-key="earlier" data-sig="' + esc(String(n)) + '" data-older="1"><button type="button" class="btn live-earlier" data-action="live-earlier">Show earlier <span class="faint">(' + esc(String(n)) + (n === 1 ? ' turn' : ' turns') + ')</span></button></li>'
+}
+export function entryHtml(m, { esc, ago, md, now = Date.now(), status = null }) {
+  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') {
+    // what Claude did for this turn sits with Claude's answer: still working, the tools it ran, the note
+    const st = status || null
+    if (st && !m.done && !FINAL_PHASES.has(st.phase)) foot += workingHtml(st, { esc, now })
+    else if (!m.done) foot += '<div class="lv-note">Still writing…</div>'
+    if (st && (st.ran || []).length) foot += toolsHtml(st, { esc, now, open: false })
+    const ran = (m.ranWithoutAsking || []).length ? m.ranWithoutAsking : []
+    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 = deliveryHtml(m.status, { esc, error: m.errorText })
+  } else if (m.state) {
+    foot = '<div class="lv-tick ' + (m.state === 'failed' ? 'bad' : '') + '">' + esc(m.state === 'failed' ? (m.errorText || 'Didn’t arrive') : m.state === 'received' ? 'Received ✓✓' : 'Sent ✓') + '</div>'
+  }
+  const sig = entrySig(m) + (m.from === 'claude' && status ? statusSig(status) : '')
+  return '<li class="lv lv-' + esc(m.from) + (m.history ? ' lv-history' : '') + '" data-key="' + esc(entryKey(m)) + '" data-sig="' + esc(sigHash(sig)) + '"><div class="lv-who"' + (title ? ' title="' + esc(title) + '"' : '') + '>' + esc(who) + ' <span class="faint">' + esc(ago(m.at)) + '</span></div>' + body + foot + '</li>'
+}
+
+const FINAL_PHASES = new Set(['replied', 'failed', 'stopped'])
+const statusSig = (st) => JSON.stringify([st.phase, st.tool, st.waiting, (st.ran || []).length, st.endedAt, st.lost])
+
+// Under your message: only whether it got there, like a chat app.
+export function deliveryHtml(st, { esc, error = null }) {
+  if (!st) return ''
+  if (st.phase === 'failed') return '<div class="lv-tick bad" role="status">' + esc(error || 'Didn’t arrive') + '</div>'
+  const got = st.phase !== 'sent'
+  return '<div class="lv-tick' + (got ? ' got' : '') + '" title="' + esc(got ? 'Claude Code received it' : 'Waiting for the session to pick it up') + '">' + (got ? 'Received <span aria-hidden="true">✓✓</span>' : 'Sent <span aria-hidden="true">✓</span>') + '</div>'
+}
+
+// "git -C /a/b diff --cached --quiet" → "git -C /a… --cached --quiet": the start and the end stay visible.
+export function midClip(s, n = 56) {
+  const t = String(s == null ? '' : s).replace(/\s+/g, ' ').trim()
+  if (t.length <= n) return t
+  const head = Math.ceil((n - 1) * 0.55)
+  return t.slice(0, head) + '…' + t.slice(t.length - (n - 1 - head))
+}
+const toolLine = (name, detail, { esc, cls = '' }) => '<div class="lv-tool mono' + (cls ? ' ' + cls : '') + '"' + (detail ? ' title="' + esc(name + ' · ' + detail) + '"' : '') + '>' + esc(name) + (detail ? ' · ' + esc(midClip(detail)) : '') + '</div>'
+
+// The live line on Claude's side: spinner, "Working · 45s", what it is running now, the last few it ran.
+export function workingHtml(st, { esc, now = Date.now() }) {
+  const v = statusView(st, now)
+  if (!v) return ''
+  let label
+  if (st.waiting) label = 'Waiting for your OK'
+  else if (v.quiet) label = 'Quiet for a while · check the terminal'
+  else if (st.phase === 'sent') label = 'Waiting for the session'
+  else if (st.phase === 'received') label = 'Starting'
+  else label = 'Working'
+  let html = '<div class="lv-status lv-working ' + v.tone + '" data-since="' + esc(String(st.at || '')) + '" role="status"><div class="lvs-line">' + (v.spin ? '<span class="lv-spin" aria-hidden="true"></span>' : '') + '<span class="lvs-label">' + esc(label) + '</span><span class="lvs-sep" aria-hidden="true">·</span><span class="lvs-time">' + esc(elapsedText(v.elapsedMs)) + '</span></div>'
+  const recent = (st.ran || []).slice(-3)
+  for (const r of recent) html += toolLine(r.tool, r.detail, { esc, cls: 'done' })
+  if (st.waiting) html += toolLine(st.waiting.tool || 'a tool', st.waiting.detail, { esc, cls: 'now' })
+  else if (st.tool) html += toolLine(st.tool.name, st.tool.detail, { esc, cls: 'now' })
+  return html + '</div>'
+}
+
+// After the turn: the tools folded into "Ran 3 commands".
+export function toolsHtml(st, { esc, now = Date.now(), open = false }) {
+  const ran = (st && st.ran) || []
+  if (!ran.length) return ''
+  const bash = ran.every((r) => r.tool === 'Bash')
+  const what = bash ? (ran.length === 1 ? 'Ran 1 command' : 'Ran ' + ran.length + ' commands') : (ran.length === 1 ? 'Used 1 tool' : 'Used ' + ran.length + ' tools')
+  const v = statusView(st, now)
+  const time = v && v.final && st.endedAt ? ' · ' + elapsedText(v.elapsedMs) : ''
+  return '<details class="lv-tools"' + (open ? ' open' : '') + '><summary>' + esc(what + time) + '</summary>' + ran.map((r) => toolLine(r.tool, r.detail, { esc })).join('') + '</details>'
+}
+
+// Claude's side before its answer lands (or when none came): the same bubble the answer replaces.
+export function pendingClaudeHtml(you, { esc, ago, now = Date.now() }) {
+  const st = you.status
+  const key = 'ans_' + you.id + ':claude'
+  let inner
+  if (st.phase === 'stopped') inner = '<div class="lv-text lv-none">' + esc(st.lost ? 'No reply recorded' : 'Stopped without a reply') + '</div>' + toolsHtml(st, { esc, now })
+  else inner = workingHtml(st, { esc, now })
+  return '<li class="lv lv-claude lv-pending' + (st.phase === 'stopped' ? ' lv-ended' : '') + '" data-key="' + esc(key) + '" data-pending="1" data-sig="' + esc(sigHash('pending' + statusSig(st))) + '"><div class="lv-who">Claude <span class="faint">' + esc(ago(st.last ? new Date(st.last).toISOString() : you.at)) + '</span></div>' + inner + '</li>'
+}
+
+// The whole thread: each message you sent, then Claude's side of that turn.
+export function threadHtml(msgs, opts) {
+  const list = msgs || []
+  const byId = new Map(list.filter((m) => m.from !== 'claude' && m.id).map((m) => [m.id, m]))
+  const answered = new Set(list.filter((m) => m.from === 'claude' && m.replyTo).map((m) => m.replyTo))
+  let html = ''
+  for (const m of list) {
+    if (m.from === 'claude') { const you = m.replyTo ? byId.get(m.replyTo) : null; html += entryHtml(m, { ...opts, status: you && you.status ? you.status : null }); continue }
+    html += entryHtml(m, opts)
+    if (m.status && !answered.has(m.id) && m.status.phase !== 'failed' && m.status.phase !== 'sent') html += pendingClaudeHtml(m, opts)
+  }
+  return html
+}
+
+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
+
+// A freshly drawn thread (a page load or refresh) opens at its latest message,
+// and stays there while late layout (fonts, code blocks) settles, unless you
+// scroll up in the meantime.
+export function pinToBottom(ol, { raf = (typeof requestAnimationFrame === 'function' ? requestAnimationFrame : (f) => setTimeout(f, 16)), fonts = (typeof document !== 'undefined' && document.fonts) || null } = {}) {
+  let pinned = -1
+  const pin = () => { if (pinned >= 0 && ol.scrollTop < pinned - 4) return; ol.scrollTop = ol.scrollHeight; pinned = ol.scrollTop }
+  pin()
+  raf(() => { pin(); raf(pin) })
+  setTimeout(pin, 250)
+  if (fonts && fonts.ready && fonts.ready.then) fonts.ready.then(pin, () => {})
+}
+
+// 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')
+      // a detached element loses its scroll position (WebKit), so remember it and put it back in after()
+      const ol = w && w.querySelector('.live-log')
+      kept.scroll = ol ? { top: ol.scrollTop, bottom: atBottom(ol) } : null
+      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) pinToBottom(ol); 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 } }
+      if (kept.scroll) oldOl.scrollTop = kept.scroll.top
+      const wasAtBottom = kept.scroll ? kept.scroll.bottom : atBottom(oldOl)
+      const fromBottom = oldOl.scrollHeight - oldOl.scrollTop
+      const have = new Map([...oldOl.children].map((li) => [li.dataset.key, li]))
+      let added = 0, older = 0
+      let prev = null
+      let seenKept = false
+      for (const li of [...newOl.children]) {
+        const cur = have.get(li.dataset.key)
+        have.delete(li.dataset.key)
+        // added above everything already shown ("Show earlier"): older, not new
+        // Claude's "Working" bubble isn't news by itself; the answer that replaces it is
+        if (!cur) { if (seenKept && !li.dataset.older) { if (!li.dataset.pending) added++ } else older++; prev ? prev.after(li) : oldOl.prepend(li); prev = li; continue }
+        if (!cur.dataset.older) seenKept = true
+        if (cur.dataset.sig !== li.dataset.sig) { if (cur.dataset.pending && !li.dataset.pending) added++; 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
+      else if (older) oldOl.scrollTop = oldOl.scrollHeight - fromBottom // keep what you were reading in place
+      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' } }))
 }