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

package/ui/live-view.js

@@ -4,6 +4,7 @@
 // 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')
@@ -13,7 +14,12 @@ export const isLiveSession = (s) => !!(s && s.liveLink && s.liveLink.on && !s.en
 // its repo and branch.
 export function sessionTitle(s, { untitled = 'Untitled session' } = {}) {
   if (!s) return untitled
-  if (s.title) return s.title
+  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
@@ -24,6 +30,33 @@ export function sessionTitle(s, { untitled = 'Untitled 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) {
@@ -33,6 +66,44 @@ export function cardPills(s) {
   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)) }
 
@@ -43,6 +114,8 @@ 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'
@@ -65,6 +138,14 @@ export function senderTitle(m) {
 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 }
@@ -91,23 +172,137 @@ export function hasUnread(lastReplyAt, seenAt) {
 
 // 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() }) {
+// "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 lv-md">' + (md ? md(a.text) : esc(a.text)) + '</div>' : '') + (a.attachments.length && attHtml ? attHtml(a.attachments, m) : '')
+  } else if (m.from === 'terminal') 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 (!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 })
+    foot = deliveryHtml(m.status, { esc, 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>'
+    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 '<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>'
+  return html
 }
 
 export function statusHtml(st, { esc, now = Date.now(), error = null }) {
@@ -127,10 +322,22 @@ 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]) }
+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 }
@@ -138,6 +345,9 @@ export function createLiveKeeper() {
     // 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.
@@ -145,24 +355,31 @@ export function createLiveKeeper() {
       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 } }
+      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 } }
-      const wasAtBottom = atBottom(oldOl)
+      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
+      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)
-        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
+        // 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 },

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/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 }
+}