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

package/ui/live-view.js

@@ -0,0 +1,387 @@
+// 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'
+import { parseAttachedLines } from './attach.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
+  const wrapped = isWrapped(s.title)
+  if (s.title && !wrapped) return s.title
+  // No name yet (or a raw <channel …> one an earlier beta kept): the first
+  // prompt's words, which another Mac's older Leftoff may have sent without a title.
+  const first = promptLine(s.firstPrompt) || (wrapped ? promptLine(s.title) : '')
+  if (first && (isLiveSession(s) || wrapped)) return first
+  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
+}
+
+// Is the card's name just where it runs ("repo · branch")? Then the repo chip
+// under it would say the same thing twice.
+export function titleIsWhere(s) {
+  if (!s || !isLiveSession(s)) return false
+  const t = sessionTitle(s)
+  const repo = s.repoLabel || s.repoName || (s.repo && s.repo.name) || ''
+  const branch = s.branch || (s.repo && s.repo.branch) || ''
+  return !!repo && (t === repo || t === repo + ' · ' + branch)
+}
+
+const isWrapped = (t) => /^\s*<channel\b/.test(String(t || ''))
+const NOISE_LINE = /^\s*<\/?(local-command-\w+|command-\w+|system-reminder|pasted_content)\b/
+// The first line of a prompt in its own words: no channel wrapper (even one
+// cut short), no system reminders; 60 characters at most.
+export function promptLine(text) {
+  let t = String(text || '').replace(/^\s*<channel\b[^>]*>?/, '').replace(/<\/channel>\s*$/, '').replace(/<system-reminder>[\s\S]*?(<\/system-reminder>|$)/g, '')
+  t = t.split('\n').map((l) => l.trim()).find((l) => l && !NOISE_LINE.test(l)) || ''
+  t = t.replace(/\s+/g, ' ')
+  return t.length > 60 ? t.slice(0, 59) + '…' : t
+}
+
+// A title as HTML that wraps where it reads: after a "/" in a repo or branch
+// (and at the spaces around " · "), not in the middle of a word.
+export function titleHtml(text, esc) {
+  return esc(String(text == null ? '' : text)).split('/').join('/<wbr>')
+}
+
+// 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 }
+}
+
+// Is Claude running a turn in this live session right now? The Live pill's dot
+// pulses while it is. The same signals the board already shows: the session's
+// own status (a turn typed in the terminal, which the hooks see start), or the
+// board message whose turn is still going, read the way its Working bubble
+// reads it (spinning: sent, received or working; not waiting for your OK, not
+// gone quiet). Idle, waiting on you, or another Mac's daemon that doesn't say:
+// a steady dot.
+export function liveWorking(s, now = Date.now()) {
+  if (!cardPills(s).live) return false
+  if (s.status === 'active') return true
+  const t = s.liveLink && s.liveLink.turn
+  if (!t || !t.phase) return false
+  const v = statusView(t, now)
+  return !!(v && v.spin)
+}
+const LIVE_TIP = 'Live link: send this session messages from the board or your phone'
+export function liveBadgeHtml(s, now = Date.now()) {
+  if (!cardPills(s).live) return ''
+  const w = liveWorking(s, now)
+  return ' <span class="pill live-pill' + (w ? ' working' : '') + '" title="' + (w ? 'Claude is working on a turn · ' : '') + LIVE_TIP + '">Live</span>'
+}
+
+// The board redraws a card (innerHTML) on every update, which would restart a
+// CSS pulse each time: a visible hitch every second or so while a session
+// works. Pinning every pulse to the page's own clock (start time 0) makes a
+// fresh element pick up exactly where the one it replaced was, and keeps the
+// dots on the page beating together. Reduced motion has no animations to pin.
+export const PULSE_NAMES = new Set(['live-pulse', 'pulse', 'needpulse'])
+export function lockPulses(doc) {
+  if (!doc || typeof doc.getAnimations !== 'function') return 0
+  let n = 0
+  for (const a of doc.getAnimations()) {
+    if (!PULSE_NAMES.has(a.animationName) || a.startTime === 0) continue
+    try { a.startTime = 0; n++ } catch {}
+  }
+  return n
+}
+
+// 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
+}
+// "Jump to latest ↓": shown whenever a thread that scrolls is away from its bottom, with the
+// count of what came in since when there is any; at the bottom it's hidden and nothing is unseen.
+export function jumpView(box = {}, unseen = 0) {
+  const { scrollHeight = 0, clientHeight = 0 } = box || {}
+  const away = scrollHeight > clientHeight + 1 && !atBottom(box)
+  const n = away && unseen > 0 ? unseen : 0
+  return { show: away, unseen: n, count: n > 0 ? ' · ' + n + ' new' : '', label: 'Jump to latest message' + (n > 0 ? ' (' + n + ' new)' : '') }
+}
+// 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>'
+}
+// A message's time is when it was sent (a clock time today, the date before):
+// a relative "just now" drawn once stays "just now" while the bubble sits there.
+export function sentLabel(iso, now = Date.now()) {
+  const t = iso ? Date.parse(iso) : NaN
+  if (!Number.isFinite(t)) return ''
+  const d = new Date(t), n = new Date(now)
+  const today = d.getFullYear() === n.getFullYear() && d.getMonth() === n.getMonth() && d.getDate() === n.getDate()
+  return today ? d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' }) : d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })
+}
+function timeHtml(iso, { esc, now }) {
+  const label = sentLabel(iso, now)
+  if (!label) return ''
+  const full = new Date(Date.parse(iso)).toLocaleString(undefined, { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })
+  return '<time class="faint" datetime="' + esc(new Date(Date.parse(iso)).toISOString()) + '" title="' + esc(full) + '">' + esc(label) + '</time>'
+}
+// 0.9.8: a message's attachments, as the board shows them (chips, not paths).
+// From the board's own log (m.attachments) or, for a message the transcript
+// gave back, its "Attached: …/checkpoints/uploads/…" lines.
+export function messageAttachments(m) {
+  if (!m || m.from !== 'you') return { text: (m && m.text) || '', attachments: [] }
+  if (Array.isArray(m.attachments) && m.attachments.length) return { text: m.text || '', attachments: m.attachments }
+  if (!/Attached: /.test(m.text || '')) return { text: m.text || '', attachments: [] }
+  return parseAttachedLines(m.text)
+}
+export function entryHtml(m, { esc, ago, md, now = Date.now(), status = null, attHtml = 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 if (m.from === 'you') {
+    const a = messageAttachments(m)
+    body = (a.text || !a.attachments.length ? '<div class="lv-text">' + esc(a.text) + '</div>' : '') + (a.attachments.length && attHtml ? attHtml(a.attachments, m) : '')
+  } 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) + ' ' + timeHtml(m.at, { esc, now }) + '</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'
+  // folded into a turn Claude was already on: the reply above answers it too, no Working bubble of its own
+  if (st.folded) return '<div class="lv-tick got lv-folded" role="status" title="It arrived while Claude was working, so Claude took it into that turn">Received <span aria-hidden="true">✓✓</span> · ' + esc(st.phase === 'replied' ? 'Answered with the reply above' : 'Taken into the turn above') + '</div>'
+  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 if (st.phase === 'replied') inner = '<div class="lv-text lv-none">Replied in the terminal</div>' + toolsHtml(st, { esc, now }) // settled, its words not kept: never a Working bubble
+  else inner = workingHtml(st, { esc, now })
+  return '<li class="lv lv-claude lv-pending' + (FINAL_PHASES.has(st.phase) ? ' lv-ended' : '') + '" data-key="' + esc(key) + '" data-pending="1" data-sig="' + esc(sigHash('pending' + statusSig(st))) + '"><div class="lv-who">Claude ' + timeHtml(st.last ? new Date(st.last).toISOString() : you.at, { esc, now }) + '</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 && !m.status.folded && !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.attachments || []).map((a) => a.id), m.state, m.status && [m.status.phase, m.status.tool, m.status.waiting, (m.status.ran || []).length, m.status.endedAt, m.status.folded || null], 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/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 }
+}