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

package/ui/app.js

@@ -9,6 +9,9 @@ import { changedKeys } from './settings-dirty.js'
 import { looksMd, stripMd, plainCp } from './cp-text.js'
 import { beginWriting, settleWriting, reconcileWriting, dismissWriting, isWriting, writingText, WRITING_SYNC_MS, FRESH_MS } from './writing.js'
 import { inStatus, repoChips, applyFilter, readFilter, saveRepos, filterHash, toggleRepo, chipSelected, splitChips, repoMatches, orderSelectedFirst, searchMatches, saveProject, inProject, projectChips, projectLabel } from './repos.js'
+import { navKey, moreActive, badgeText, quickLookItems, quickLookHtml } from './nav.js'
+import { canStartPull, pullStep, pullRelease } from './pull.js'
+import { wireTips } from './tips.js'
 import { needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer, turnsHtml, dismissedHtml } from './needs.js'
 import { SUMMARY_EXAMPLES, LENGTH_CHOICES } from './summary-examples.js'
 import { mdInline, renderSection } from './changelog-md.js'
@@ -16,6 +19,8 @@ import { cardPrsHtml, sessionPrsSection, prsPageHtml, prsBodyHtml, prRowHtml, pr
 import { wantsSetupBanner, setupCandidate, localLeftoffAnswers, thisOneSuffix, isPhoneUa } from './viewer.js'
 import { restoreAccess, hintHtml, restoreWhen, askLine } from './restore-gate.js'
 import { defaultEmoji, PICKER_SET, isEmoji } from './machines.js'
+import { sessionTitle, cardPills, foldsAsEmpty, threadHtml, earlierHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom } from './live-view.js' // 0.9.8 Live link polish
+import { statusView, elapsedText } from './live-status.js'
 import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref, docMenuItems, docFileName, renderDoc } from './handoffs.js'
 const $app = document.getElementById('app')
 const state = { sessions: [], health: null, cfg: null, route: null, machine: localStorage.getItem('cp.machine') || '', drafts: {}, pendingAsk: {}, mayAnswer: true, needOpen: {}, needTurns: {} }
@@ -113,7 +118,9 @@ function copiedMark(btn) {
 }
 const pill = (status) => '<span class="pill s-' + esc(status) + '">' + esc(LABEL[status] || status) + '</span>'
 // 0.9.8 Live link: the session's channel is listening (send it prompts from here)
-const liveBadge = (s) => (s && s.liveLink && s.liveLink.on ? ' <span class="pill live" title="Live link: send this session messages from the board or your phone">Live</span>' : '')
+const liveBadge = (s) => (cardPills(s).live ? ' <span class="pill live-pill" title="Live link: send this session messages from the board or your phone">Live</span>' : '')
+// The status pill beside it: a live session that is only waiting shows just Live (never "dormant").
+const statusPill = (s) => { const st = cardPills(s).status; return st ? pill(st) : '' }
 
 const fmtCode = (x) => esc(x).replace(/`([^`]+)`/g, '<code>$1</code>')
 
@@ -574,15 +581,15 @@ function card(s) {
   const nb = s.needsYou ? cardBadge(s.needsYou) : ''
   return '<article class="card ' + esc(s.status) + (s.live === 'closed' ? ' is-closed' : '') + (s.needsYou && s.needsYou.blocking ? ' needs-you' : '') + '" data-id="' + esc(s.id) + '" data-href="#/s/' + esc(encodeURIComponent(s.id)) + '">' +
     '<div class="row1"><div class="title">' + liveDot(s) +
-      (s.pinned ? '<span class="pin">★ </span>' : '') + '<a href="#/s/' + encodeURIComponent(s.id) + '">' + esc(s.title || 'Untitled session') + '</a>' +
+      (s.pinned ? '<span class="pin">★ </span>' : '') + '<a href="#/s/' + encodeURIComponent(s.id) + '">' + esc(sessionTitle(s)) + '</a>' +
       '<button type="button" class="icon" data-action="rename" title="Rename">✎</button>' +
-    '</div>' + pill(s.status) + liveBadge(s) + '</div>' +
-    '<div class="meta">' + spaceChip(s) + where(s) + (ln ? '<span class="livenote ' + esc(s.live) + '">' + esc(ln) + '</span>' : '') + (endedNote ? '<span>' + esc(endedNote) + '</span>' : '') + '<span>·</span><span>' + esc(s.turns) + (s.turns === 1 ? ' turn' : ' turns') + (s.historyTurns ? ' · resumed (' + esc(s.historyTurns) + ' before)' : s.startSource === 'resume' && !s.turns ? ' · resumed' : s.empty && s.live !== 'closed' ? ' · no prompt yet' : '') + '</span>' +
+    '</div>' + statusPill(s) + liveBadge(s) + '</div>' +
+    '<div class="meta">' + spaceChip(s) + where(s) + (ln ? '<span class="livenote ' + esc(s.live) + '">' + esc(ln) + '</span>' : '') + (endedNote ? '<span>' + esc(endedNote) + '</span>' : '') + '<span>·</span><span>' + esc(s.turns) + (s.turns === 1 ? ' turn' : ' turns') + (s.historyTurns ? ' · resumed (' + esc(s.historyTurns) + ' before)' : s.startSource === 'resume' && !s.turns ? ' · resumed' : s.empty && s.live !== 'closed' && !cardPills(s).live ? ' · no prompt yet' : '') + '</span>' +
       (s.needsInput && s.lastNotification && !s.needsYou ? '<span class="chip">' + esc(s.lastNotification.replace(/_/g, ' ')) + '</span>' : '') + '</div>' +
     cardPrsHtml(s.prs) + listChips(s) + cardHandoffChips(s) + nb + cpArea(s, cpBlock(s.latestCheckpoint)) +
     '<a class="cplink" href="#/s/' + encodeURIComponent(s.id) + '">' + (s.checkpointCount ? s.checkpointCount + (s.checkpointCount === 1 ? ' checkpoint' : ' checkpoints') : 'Session history') + ' →</a>' +
     '<div class="actions-row">' + (goButton(s) || (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '')) +
-      copyResumeIcon(s) +
+      chatButton(s) + copyResumeIcon(s) +
       (s.isLocal ? '' : remoteNote(s)) + moreMenu(s, sessionMenuItems(s)) +
     '</div></article>'
 }
@@ -753,7 +760,7 @@ async function viewBoard() {
   // not a resumed conversation) fold into one "N empty sessions" row. One
   // appears on the board as itself after its first prompt. Pinned ones, and
   // ones that need you, always show.
-  const isFolded = (s) => s.empty && !s.pinned && !(s.needsYou && s.needsYou.blocking)
+  const isFolded = (s) => foldsAsEmpty(s) // 0.9.8: never a live session
   const shown = recent.filter((s) => !isFolded(s))
   const empties = recent.filter(isFolded)
   const rank = Object.fromEntries(ORDER.map(([k], i) => [k, i]))
@@ -1168,9 +1175,11 @@ async function viewWaiting() {
 // The nav's count, the page title and the favicon dot: visible from a background tab.
 function paintNeedsCount(n) {
   const c = document.getElementById('needsCount')
-  if (c) { c.hidden = !n; c.textContent = n > 99 ? '99+' : String(n) }
+  if (c) { c.hidden = !n; c.textContent = badgeText(n) }
   const tab = document.getElementById('needsTab')
   if (tab) { tab.classList.toggle('has-needs', !!n); tab.title = n ? n + ' waiting on you' : 'Nothing waiting on you' }
+  if (quickLookOpen() && paintNeedsCount.count !== n) loadQuickLook()
+  paintNeedsCount.count = n
   document.title = (n ? '(' + n + ') ' : '') + 'Leftoff'
   // The tab icon gets a red dot while something waits (leftoff-favicon-badge,
   // v0.4.5); the PNG is for browsers without SVG favicons.
@@ -1271,8 +1280,8 @@ async function viewSession(id) {
   // 0.8.9: rename in place: tap the title or the pencil (this Mac's sessions; like /cp-name, your name wins over automatic ones)
   const canRename = reachOf(s) === 'local' || reachOf(s) === 'peer' // 0.9.2: another Mac's session renames through it
   html += '<div class="pagehead"><div>' + (canRename
-    ? '<div class="title s-title" data-id="' + esc(s.id) + '"><h1><span class="s-title-text" role="button" tabindex="0" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" title="Rename">' + esc(s.title || 'Untitled session') + '</span></h1><button type="button" class="icon rename-pen" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" aria-label="Rename" title="Rename">' + icon('pencil') + '</button></div>'
-    : '<h1>' + esc(s.title || 'Untitled session') + '</h1>') + '<div class="sub">' + pill(s.status) + liveBadge(s) + ' ' + spaceChip(s, { force: true }) + projChip(s) + wtChips(s) + (canProject(s) ? '<button type="button" class="chip proj-add" data-action="project-menu" data-key="' + esc(s.repoKey) + '" data-repo="' + esc(s.repoLabel || s.repoName || '') + '" title="' + esc(s.repoProject ? 'Move ' + (s.repoLabel || 'this repo') + ' to another project, or out of it' : 'Add ' + (s.repoLabel || 'this repo') + ' to a project') + '">' + (s.repoProject ? 'Change project' : '+ Project') + '</button>' : '') + ' &nbsp;' + esc(s.titleSource ? s.titleSource + ' title' : '') + '</div></div>' +
+    ? '<div class="title s-title" data-id="' + esc(s.id) + '"><h1><span class="s-title-text" role="button" tabindex="0" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" title="Rename">' + esc(sessionTitle(s)) + '</span></h1><button type="button" class="icon rename-pen" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" aria-label="Rename" title="Rename">' + icon('pencil') + '</button></div>'
+    : '<h1>' + esc(sessionTitle(s)) + '</h1>') + '<div class="sub">' + statusPill(s) + liveBadge(s) + ' ' + spaceChip(s, { force: true }) + projChip(s) + wtChips(s) + (canProject(s) ? '<button type="button" class="chip proj-add" data-action="project-menu" data-key="' + esc(s.repoKey) + '" data-repo="' + esc(s.repoLabel || s.repoName || '') + '" title="' + esc(s.repoProject ? 'Move ' + (s.repoLabel || 'this repo') + ' to another project, or out of it' : 'Add ' + (s.repoLabel || 'this repo') + ' to a project') + '">' + (s.repoProject ? 'Change project' : '+ Project') + '</button>' : '') + ' &nbsp;' + esc(s.titleSource ? (s.titleSource === 'prompt' ? 'named from the first prompt' : s.titleSource + ' title') : '') + '</div></div>' +
     '<div class="actions">' + goButton(s) + (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '') + '<a class="btn" href="#/timeline?session=' + encodeURIComponent(s.id) + '">' + icon('history') + 'Open in Timeline</a><button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '">Copy resume</button>' + (reachOf(s) === 'local' || reachOf(s) === 'peer' ? checkpointSplit(s) : reachOf(s) === 'away' ? '<span class="more-wrap">' + moreMenu(s, awayMenuItems(s), { project: false, title: s.title || 'This session' }) + '</span>' : '') + '</div></div>'
   html += '<div class="facts">' +
     fact('Machine', mEmoji(s.machine) + ' ' + s.machine + (thisOneSuffix(s.machine, state.health) || (s.isLocal ? '' : ' (synced)'))) + fact('Repo', (s.repoName || '—') + (branch ? ' · ' + branch : '')) + (s.repoProject ? fact('Project', projectLabel(s.repoProject)) : '') + (s.worktree ? fact('Worktree', '⑂ ' + s.worktree.name + (s.worktree.branch ? ' · ' + s.worktree.branch : ''), 'wrap') : '') + (s.startedIn ? fact('Started in', s.startedIn) : '') + fact('Directory', s.cwd || '—') + fact('Last activity', ago(s.lastActivityAt)) + fact('Started', clock(s.startedAt)) +
@@ -1314,18 +1323,26 @@ async function viewSession(id) {
   const empties = s.checkpoints.filter((cp) => cp.doubt === 'empty') // 0.9.2
   if (empties.length) html += '<details class="tl-doubt"><summary>' + empties.length + ' empty checkpoint' + (empties.length === 1 ? '' : 's') + ' set aside: no messages were found when ' + (empties.length === 1 ? 'it was' : 'they were') + ' written</summary><div class="timeline">' + cpTimeline(empties, null) + '</div></details>'
   html += answeredList(s)
+  liveKeeper.before($app)
   $app.innerHTML = html
+  liveAfterRender(s.id)
   aroundWire(s.id)
 }
 // ------------------------------------------------------------ Live link (0.9.8 beta)
 
 const isLive = (s) => !!(s && s.liveLink && s.liveLink.on)
 function sessionNeedsStrip(s) { return '<section class="needs-strip one" aria-label="Needs you"><div class="needs-head"><h2>Needs you</h2></div><div class="needs-list">' + needPanel({ ...s.needsYou, session: s }, needOpts({ compact: true })) + '</div></section>' }
-const LIVE_STATE = { sent: 'Sent, waiting for the session', received: 'Received by the session', failed: 'Didn’t arrive' }
-function liveEntry(m) {
-  const who = m.from === 'claude' ? 'Claude' : m.from === 'event' ? 'Event' + (m.source ? ' · ' + m.source : '') : 'You' + (m.where && !/^on this machine/.test(m.where) ? ' · ' + m.where : '')
-  const st = m.from === 'claude' ? '' : '<span class="lv-state ' + esc(m.state || '') + '">' + esc(m.state === 'failed' ? (m.errorText || LIVE_STATE.failed) : LIVE_STATE[m.state] || '') + '</span>'
-  return '<li class="lv lv-' + esc(m.from) + '"><div class="lv-who">' + esc(who) + ' <span class="faint">' + esc(ago(m.at)) + '</span>' + st + '</div><div class="lv-text">' + esc(m.text) + '</div></li>'
+// 0.9.8 polish: the thread is ui/live-view.js (entries, status, sticking to the
+// bottom); Claude's answer is the session's own (markdown, like the terminal).
+const liveKeeper = createLiveKeeper()
+const liveSeenKey = (id) => 'lo-live-seen:' + id
+function liveSeen(id) { try { return localStorage.getItem(liveSeenKey(id)) } catch { return null } }
+function markLiveSeen(id, at) { try { localStorage.setItem(liveSeenKey(id), at || new Date().toISOString()) } catch {} }
+// "Chat" on a live card: straight to the Live box (#/s/<id>/live), with a dot when Claude replied since you last looked.
+function chatButton(s) {
+  if (!cardPills(s).live || s.agent) return ''
+  const unread = hasUnread(s.liveLink && s.liveLink.lastReplyAt, liveSeen(s.id))
+  return '<a class="btn chat-btn" href="' + esc(liveHref(s.id)) + '" aria-label="' + esc('Chat with this session' + (unread ? ' (new reply)' : '')) + '">Chat' + (unread ? '<span class="unread-dot" aria-hidden="true"></span>' : '') + '</a>'
 }
 // The how-to for a session that isn't live (fetched once: the claude line has this Mac's path).
 async function liveHow() {
@@ -1342,17 +1359,84 @@ async function liveSection(s) {
       (how && how.line ? ' (or <code>' + esc(how.line) + '</code>)' : '') + '. Claude Code asks once to load the channel; channels are a research preview.</p></section>'
   }
   let v = null
-  try { v = await api('GET', '/v1/sessions/' + encodeURIComponent(s.id) + '/live') } catch (e) { v = { messages: [], error: e.message } }
+  const turns = (state.liveTurns && state.liveTurns[s.id]) || 20 // "Show earlier" adds 20 at a time
+  try { v = await api('GET', '/v1/sessions/' + encodeURIComponent(s.id) + '/live' + (turns > 20 ? '?turns=' + turns : '')) } catch (e) { v = { messages: [], error: e.message } }
   const msgs = (v && v.messages) || []
   const may = state.mayAnswer !== false
   const draft = (state.drafts && state.drafts['live:' + s.id]) || ''
+  const now = Date.now()
+  const lastClaude = [...msgs].reverse().find((m) => m.from === 'claude')
+  if (lastClaude) markLiveSeen(s.id, lastClaude.at)
   return '<section class="live-box" id="live" aria-label="Live link" data-id="' + esc(s.id) + '"><div class="live-head"><h2>Live</h2><span class="faint">Goes straight into this session' + (s.isLocal === false ? ' on ' + esc(s.machine) : '') + '. Claude reads it as its next prompt.</span></div>' +
-    (msgs.length ? '<ol class="live-log" aria-live="polite">' + msgs.map(liveEntry).join('') + '</ol>' : '<p class="faint live-empty">Nothing sent yet.</p>') +
+    '<div class="live-thread" data-sid="' + esc(s.id) + '"><ol class="live-log" aria-live="polite" aria-label="Messages with this session">' +
+      earlierHtml((v && v.earlier) || 0, { esc }) + threadHtml(msgs, { esc, ago, md: renderDoc, now }) + '</ol>' +
+      '<p class="faint live-empty"' + (msgs.length ? ' hidden' : '') + '>Nothing sent yet. Claude answers here and in the terminal.</p>' +
+      '<button type="button" class="live-jump" data-action="live-jump" hidden>Jump to latest ↓<span class="live-jump-n"></span></button></div>' +
     (v && v.error ? '<p class="live-err">' + esc(v.error) + '</p>' : '') +
     '<div class="reply-row live-row"><textarea class="reply-text live-text" rows="2" maxlength="4000" placeholder="Message this session…" aria-label="Message this session" data-draft="live:' + esc(s.id) + '" data-submit="live" aria-keyshortcuts="' + (/Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent) ? 'Meta+Enter' : 'Control+Enter') + '"' + (may ? '' : ' disabled') + '>' + esc(draft) + '</textarea>' +
     '<button type="button" class="btn primary" data-action="live-send" data-submit-for="live" data-id="' + esc(s.id) + '"' + (may ? '' : ' aria-disabled="true"') + '>Send</button></div>' +
     (may ? '' : '<p class="faint">Sending from another device is off. On a Mac, turn on Settings → Privacy &amp; security → Trust my paired devices.</p>') + '</section>'
 }
+// After the session page is drawn: keep the thread (scroll, diffed entries), show "Jump to latest".
+function liveAfterRender(sid) {
+  const r = liveKeeper.after($app)
+  if (!r) return
+  const ol = r.thread.querySelector('.live-log')
+  const empty = r.thread.querySelector('.live-empty')
+  if (empty && ol) empty.hidden = ol.children.length > 0
+  liveJumpButton(r.thread, liveKeeper.unseen)
+  if (ol && !ol.dataset.wired) {
+    ol.dataset.wired = '1'
+    ol.addEventListener('scroll', () => { if (atBottom(ol)) { liveKeeper.seen(); liveJumpButton(r.thread, 0) } }, { passive: true })
+  }
+  // #/s/<id>/live: scroll to the box once, and ready the input on a Mac (no keyboard popping up on a phone)
+  const want = parseLiveRoute(location.hash)
+  if (want === sid && state.liveFocused !== location.hash + '|' + sid) {
+    state.liveFocused = location.hash + '|' + sid
+    const box = document.getElementById('live')
+    if (box) box.scrollIntoView({ block: 'start', behavior: 'auto' })
+    if (ol) ol.scrollTop = ol.scrollHeight
+    const ta = box && box.querySelector('.live-text')
+    if (ta && !ta.disabled && !(window.matchMedia && window.matchMedia('(pointer: coarse)').matches)) ta.focus({ preventScroll: true })
+  }
+  liveTick()
+}
+function liveJumpButton(thread, n) {
+  const b = thread && thread.querySelector('.live-jump')
+  if (!b) return
+  b.hidden = !(n > 0)
+  const c = b.querySelector('.live-jump-n')
+  if (c) c.textContent = n > 0 ? ' · ' + n + ' new' : ''
+}
+function liveJumpClick(btn) {
+  const thread = btn.closest('.live-thread')
+  const ol = thread && thread.querySelector('.live-log')
+  if (ol) ol.scrollTo({ top: ol.scrollHeight, behavior: window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' })
+  liveKeeper.seen(); liveJumpButton(thread, 0)
+}
+// "Show earlier": 20 more turns, the view stays on what you were reading (the keeper anchors it).
+async function liveEarlierClick(btn) {
+  const box = btn.closest('.live-box')
+  const sid = box && box.dataset.id
+  if (!sid) return
+  state.liveTurns = state.liveTurns || {}
+  state.liveTurns[sid] = ((state.liveTurns[sid]) || 20) + 20
+  btn.setAttribute('aria-busy', 'true'); btn.textContent = 'Loading…'
+  await render()
+}
+// The elapsed time beside "Claude is working…", every second while something is in flight.
+let liveTimer = null
+function liveTick() {
+  const els = [...document.querySelectorAll('.lv-status[data-since]')]
+  for (const el of els) {
+    const since = Number(el.dataset.since) || 0
+    const end = Number(el.dataset.final) || 0
+    const t = el.querySelector('.lvs-time')
+    if (t && since) t.textContent = elapsedText((end || Date.now()) - since)
+  }
+  const running = els.some((el) => !el.dataset.final)
+  if (running && !liveTimer) liveTimer = setInterval(() => { if (!document.querySelector('.lv-status[data-since]:not([data-final])')) { clearInterval(liveTimer); liveTimer = null } liveTick() }, 1000)
+}
 async function liveSendClick(btn) {
   const box = btn.closest('.live-box')
   const ta = box && box.querySelector('.live-text')
@@ -1365,8 +1449,10 @@ async function liveSendClick(btn) {
     if (state.drafts) delete state.drafts['live:' + btn.dataset.id]
     if (ta) ta.value = ''
     if (r.state === 'failed') toast('Didn’t arrive: ' + (r.error || 'the session isn’t listening'), 4200)
+    const ol = box && box.querySelector('.live-log')
+    if (ol) ol.scrollTop = ol.scrollHeight // your own message: always follow it
     setTimeout(() => { if (state.route && state.route.name === 's') soon() }, 1500)
-  } catch (e) { toast(e.message, 4200) } finally { render() }
+  } catch (e) { toast(e.message, 4200) } finally { await render(); const nb = document.querySelector('.live-box [data-action="live-send"]'); if (nb) { nb.removeAttribute('aria-disabled'); nb.textContent = 'Send' } }
 }
 
 // ------------------------------------------------------------ search inside transcripts (0.9.6)
@@ -3239,7 +3325,7 @@ function parseRoute() {
 
 async function render() {
   const r = (state.route = parseRoute())
-  document.querySelectorAll('.tabs a, .topright a[data-route]').forEach((a) => { const on = a.dataset.route === (r.name === 's' ? 'board' : r.name === 'catchup' ? 'digest' : r.name); a.classList.toggle('on', on); if (on) a.setAttribute('aria-current', 'page'); else a.removeAttribute('aria-current') })
+  paintNav(r)
   try {
     if (r.name === 's' && r.arg) await viewSession(r.arg)
     else if (r.name === 'waiting') await viewWaiting()
@@ -3326,6 +3412,7 @@ async function refreshHealth() {
     if (h.answering) state.mayAnswer = h.answering.allowedHere !== false
     const dot = document.querySelector('#wnTab .newdot')
     if (dot) dot.hidden = !(h.whatsNew && h.whatsNew.unseen > 0)
+    paintMoreDots()
     paintSettingsDots()
   } catch (e) {
     el.className = 'health down'
@@ -3356,6 +3443,229 @@ function paintTopDot() {
   el.className = 'topdot' + (warn ? ' warn' : '')
   const why = all.flatMap((x) => x.why)
   document.getElementById('setTab').title = 'Settings' + (why.length && !el.hidden ? ' · ' + why.join(' · ') : '')
+  paintMoreDots()
+}
+
+// ------------------------------------------------------------ the rail, the bottom bar and Quick look (0.9.8)
+// From 820px up the sections sit in a rail on the left; under it, in a bottom
+// bar with the rest under More. Hover the Needs you item (or long-press it on a
+// phone, or press ↓/→ on it) for Quick look: the count and the five longest
+// waits, with Allow / Deny on permission prompts (the Needs you page's own
+// buttons, so the same checks apply and nothing is answered without a click).
+const railMode = () => window.matchMedia('(min-width: 820px)').matches
+function paintNav(r = state.route || parseRoute()) {
+  const key = navKey(r.name)
+  document.querySelectorAll('.tabs a[data-route], .topright a[data-route], #moreMenu a[data-route]').forEach((a) => { const on = a.dataset.route === key; a.classList.toggle('on', on); if (on) a.setAttribute('aria-current', 'page'); else a.removeAttribute('aria-current') })
+  const more = document.getElementById('moreBtn')
+  if (more) more.classList.toggle('on', moreActive(key))
+}
+function paintMoreDots() {
+  const wn = document.querySelector('#wnTab .newdot'), st = document.querySelector('#setTab .topdot')
+  const mwn = document.querySelector('#moreMenu .newdot'), mst = document.querySelector('#moreMenu .topdot')
+  if (mwn && wn) mwn.hidden = wn.hidden
+  if (mst && st) { mst.hidden = st.hidden; mst.className = st.className }
+  const md = document.querySelector('#moreBtn .moredot')
+  if (md) { md.hidden = !((wn && !wn.hidden) || (st && !st.hidden)); md.className = 'moredot' + (st && !st.hidden && st.classList.contains('warn') ? ' warn' : '') }
+}
+
+// More (phones)
+const moreOpen = () => { const m = document.getElementById('moreMenu'); return !!m && !m.hidden }
+function closeMore(focusBtn = false) {
+  const m = document.getElementById('moreMenu'), b = document.getElementById('moreBtn')
+  if (!m || m.hidden) return
+  m.hidden = true
+  if (b) { b.setAttribute('aria-expanded', 'false'); if (focusBtn) b.focus() }
+}
+function openMore() {
+  const m = document.getElementById('moreMenu'), b = document.getElementById('moreBtn')
+  if (!m) return
+  closeQuickLook(); toggleStatus(false)
+  paintMoreDots()
+  m.hidden = false
+  if (b) b.setAttribute('aria-expanded', 'true')
+  const first = m.querySelector('a.on') || m.querySelector('a')
+  if (first) first.focus()
+}
+document.getElementById('moreBtn').addEventListener('click', () => (moreOpen() ? closeMore() : openMore()))
+document.getElementById('moreMenu').addEventListener('click', (e) => { if (e.target.closest('a')) closeMore() })
+document.getElementById('moreMenu').addEventListener('keydown', (e) => {
+  const items = [...document.querySelectorAll('#moreMenu a')]
+  const i = items.indexOf(document.activeElement)
+  if (e.key === 'Escape') { e.preventDefault(); closeMore(true) }
+  else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); const n = items[(i + (e.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length]; if (n) n.focus() }
+  else if (e.key === 'Tab') closeMore()
+})
+
+// Quick look
+const qlUi = { open: false, how: null, openT: 0, closeT: 0, suppressClick: false, model: null, seq: 0 }
+const quickLookOpen = () => qlUi.open
+function quickLookFocusables() { const p = document.getElementById('quickLook'); return p ? [...p.querySelectorAll('a[href], button:not([disabled])')] : [] }
+function paintQuickLook() {
+  const pop = document.getElementById('quickLook')
+  if (!pop || !qlUi.open) return
+  const had = pop.contains(document.activeElement) ? document.activeElement : null
+  const keep = had && (had.closest('.ql-item') ? { key: had.closest('.ql-item').dataset.key, choice: had.dataset.choice || '', main: had.classList.contains('ql-main') } : { foot: had.classList.contains('ql-foot') })
+  const model = qlUi.model || { total: Number((state.health || {}).needsYou) || 0, items: [], more: 0 }
+  pop.innerHTML = quickLookHtml(model, { mayAnswer: state.mayAnswer, pending: state.pendingAsk })
+  pop.setAttribute('aria-busy', qlUi.model ? 'false' : 'true')
+  placeQuickLook()
+  if (keep) {
+    let el = null
+    if (keep.key) { const row = [...pop.querySelectorAll('.ql-item')].find((x) => x.dataset.key === keep.key); if (row) el = keep.main ? row.querySelector('.ql-main') : row.querySelector('[data-choice="' + keep.choice + '"]:not([disabled])') }
+    else if (keep.foot) el = pop.querySelector('.ql-foot')
+    ;(el || quickLookFocusables()[0] || pop).focus()
+  }
+}
+function placeQuickLook() {
+  const pop = document.getElementById('quickLook'), tab = document.getElementById('needsTab')
+  if (!pop || pop.hidden || !tab) return
+  if (!railMode()) { pop.style.left = ''; pop.style.top = ''; return } // the CSS puts it above the bottom bar
+  const r = tab.getBoundingClientRect(), rail = document.querySelector('.top').getBoundingClientRect()
+  pop.style.left = (Math.max(r.right, rail.right) + 8) + 'px'
+  pop.style.top = Math.max(8, Math.min(r.top - 6, window.innerHeight - 8 - pop.offsetHeight)) + 'px'
+}
+// The sessions behind the popover: what the page already has, then a fresh read.
+async function loadQuickLook() {
+  const seq = ++qlUi.seq
+  if (state.sessions && state.sessions.length && !qlUi.model) { qlUi.model = quickLookItems(state.sessions); paintQuickLook() }
+  try {
+    const { sessions, viewer } = await api('GET', '/v1/sessions?limit=200', undefined, { timeoutMs: 8000 })
+    if (seq !== qlUi.seq) return
+    if (viewer) state.mayAnswer = viewer.mayAnswer !== false
+    qlUi.model = quickLookItems(sessions || [])
+  } catch { if (!qlUi.model) qlUi.model = { total: 0, items: [], more: 0, failed: true } }
+  paintQuickLook()
+}
+function openQuickLook(how = 'hover') {
+  const pop = document.getElementById('quickLook'), tab = document.getElementById('needsTab')
+  if (!pop || !tab) return
+  clearTimeout(qlUi.openT); clearTimeout(qlUi.closeT)
+  if (qlUi.open) { if (how !== 'hover') { qlUi.how = how; const f = quickLookFocusables()[0]; if (f) f.focus() } return }
+  closeMore(); toggleStatus(false)
+  qlUi.open = true; qlUi.how = how; qlUi.model = null
+  pop.hidden = false
+  tab.setAttribute('aria-expanded', 'true')
+  // Hover never takes focus; the keyboard and a long-press move into the card (and Tab stays inside it).
+  pop.setAttribute('aria-modal', how === 'hover' ? 'false' : 'true')
+  paintQuickLook()
+  if (how !== 'hover') { const f = quickLookFocusables()[0]; (f || pop).focus() }
+  loadQuickLook()
+}
+function closeQuickLook(focusTab = false) {
+  clearTimeout(qlUi.openT); clearTimeout(qlUi.closeT)
+  if (!qlUi.open) return
+  const pop = document.getElementById('quickLook'), tab = document.getElementById('needsTab')
+  const inside = pop && pop.contains(document.activeElement)
+  qlUi.open = false; qlUi.seq++
+  if (pop) { pop.hidden = true; pop.innerHTML = '' }
+  if (tab) { tab.setAttribute('aria-expanded', 'false'); if (focusTab || inside) tab.focus() }
+}
+{
+  const tab = document.getElementById('needsTab'), pop = document.getElementById('quickLook')
+  const canHover = () => window.matchMedia('(hover: hover) and (pointer: fine)').matches
+  const later = (fn, ms) => { clearTimeout(qlUi.closeT); clearTimeout(qlUi.openT); return setTimeout(fn, ms) }
+  tab.addEventListener('mouseenter', () => { if (!canHover()) return; clearTimeout(qlUi.closeT); if (!qlUi.open) qlUi.openT = later(() => openQuickLook('hover'), 280) })
+  tab.addEventListener('mouseleave', () => { clearTimeout(qlUi.openT); if (qlUi.open && qlUi.how === 'hover') qlUi.closeT = setTimeout(() => closeQuickLook(), 320) })
+  pop.addEventListener('mouseenter', () => clearTimeout(qlUi.closeT))
+  pop.addEventListener('mouseleave', () => { if (qlUi.open && qlUi.how === 'hover' && !pop.contains(document.activeElement)) qlUi.closeT = setTimeout(() => closeQuickLook(), 320) })
+  // Long-press on a touch screen; the tap that ends it doesn't navigate.
+  let lp = null
+  tab.addEventListener('pointerdown', (e) => {
+    if (e.pointerType === 'mouse') return
+    const x = e.clientX, y = e.clientY
+    clearTimeout(lp && lp.t)
+    lp = { x, y, t: setTimeout(() => { qlUi.suppressClick = true; openQuickLook('touch'); if (navigator.vibrate) try { navigator.vibrate(10) } catch {} }, 450) }
+  })
+  const cancel = () => { if (lp) { clearTimeout(lp.t); lp = null } }
+  tab.addEventListener('pointerup', cancel)
+  tab.addEventListener('pointercancel', cancel)
+  tab.addEventListener('pointermove', (e) => { if (lp && Math.hypot(e.clientX - lp.x, e.clientY - lp.y) > 10) cancel() })
+  tab.addEventListener('contextmenu', (e) => { if (qlUi.open || lp) e.preventDefault() })
+  tab.addEventListener('click', (e) => {
+    if (qlUi.suppressClick) { qlUi.suppressClick = false; e.preventDefault(); return }
+    // A second tap while it's open goes to the page, as the footer does.
+    closeQuickLook()
+  })
+  tab.addEventListener('keydown', (e) => {
+    if (['ArrowDown', 'ArrowRight', 'ArrowUp'].includes(e.key) && !e.altKey && !e.metaKey && !e.ctrlKey) { e.preventDefault(); openQuickLook('keyboard') }
+  })
+  pop.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closeQuickLook(true); return }
+    if (e.key !== 'Tab') return
+    const f = quickLookFocusables()
+    if (!f.length) { e.preventDefault(); return }
+    const i = f.indexOf(document.activeElement)
+    if (e.shiftKey && i <= 0) { e.preventDefault(); f[f.length - 1].focus() }
+    else if (!e.shiftKey && (i === -1 || i === f.length - 1)) { e.preventDefault(); f[0].focus() }
+  })
+  pop.addEventListener('focusin', () => { clearTimeout(qlUi.closeT); pop.setAttribute('aria-modal', 'true') })
+  pop.addEventListener('click', (e) => { const a = e.target.closest('a[href]'); if (a) closeQuickLook() })
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && qlUi.open) closeQuickLook(true) })
+  document.addEventListener('pointerdown', (e) => {
+    if (qlUi.open && !e.target.closest('#quickLook, #needsTab')) closeQuickLook()
+    if (moreOpen() && !e.target.closest('#moreMenu, #moreBtn')) closeMore()
+  }, true)
+  window.addEventListener('hashchange', () => { closeQuickLook(); closeMore() })
+  window.addEventListener('resize', () => { placeQuickLook(); if (statusOpen()) placeStatus() })
+}
+
+// Pull to refresh (phones, 0.9.8): pull down from the top of a page and let go
+// past the line; the page reads its data again, the same as a live update (no
+// full reload unless that fails). Never from a field, the Live box or a menu.
+{
+  const ptr = document.createElement('div')
+  ptr.className = 'ptr'; ptr.id = 'ptr'; ptr.setAttribute('aria-hidden', 'true'); ptr.hidden = true
+  ptr.innerHTML = '<span class="ptr-ring"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg></span>'
+  document.body.appendChild(ptr)
+  const coarse = window.matchMedia('(pointer: coarse)'), narrow = window.matchMedia('(max-width: 819.98px)')
+  const overlayOpen = () => qlUi.open || moreOpen() || statusOpen() || !!document.querySelector('.cmdk:not([hidden]), .lo-menu, .doc-viewer:not([hidden]), .emoji-sheet-wrap')
+  let pull = null, refreshing = false
+  const paint = (step) => {
+    ptr.hidden = !step || (!step.pulling && !refreshing)
+    if (ptr.hidden) return
+    ptr.style.transform = 'translate(-50%, ' + (refreshing ? 56 : step.dist) + 'px)'
+    ptr.style.setProperty('--ptr-turn', String(Math.round((step.progress || 0) * 270)) + 'deg')
+    ptr.style.opacity = refreshing ? '1' : String(Math.min(1, 0.25 + (step.progress || 0)))
+    ptr.classList.toggle('armed', !!step.armed)
+    ptr.classList.toggle('busy', refreshing)
+  }
+  async function pullRefresh() {
+    refreshing = true; paint({ pulling: true, dist: 56, progress: 1, armed: true })
+    const started = Date.now()
+    try {
+      prsUi.at = {}; projectsUi.at = 0
+      const r = state.route || parseRoute()
+      const editing = busy() || ['settings', 'setup'].includes(r.name)
+      await Promise.all([editing ? null : render(), refreshHealth()])
+    } catch { location.reload(); return }
+    await new Promise((res) => setTimeout(res, Math.max(0, 450 - (Date.now() - started)))) // long enough to see it turn
+    refreshing = false; ptr.classList.remove('busy', 'armed'); ptr.hidden = true
+  }
+  window.leftoffPullRefresh = pullRefresh
+  document.addEventListener('touchstart', (e) => {
+    if (refreshing || e.touches.length !== 1) { pull = null; return }
+    const t = e.touches[0]
+    pull = canStartPull({ coarse: coarse.matches, narrow: narrow.matches, scrollY: window.scrollY || document.scrollingElement.scrollTop, target: e.target, overlayOpen: overlayOpen() }) ? { x: t.clientX, y: t.clientY, step: null } : null
+  }, { passive: true })
+  document.addEventListener('touchmove', (e) => {
+    if (!pull || e.touches.length !== 1) return
+    const t = e.touches[0]
+    const step = pullStep(t.clientY - pull.y, t.clientX - pull.x)
+    if (!step.pulling && !pull.step) { if (t.clientY - pull.y < -4 || Math.abs(t.clientX - pull.x) > 10) pull = null; return }
+    if ((window.scrollY || 0) > 0) { pull = null; paint(null); return }
+    if (e.cancelable) e.preventDefault() // ours, not the page's rubber band or the browser's own pull
+    pull.step = step
+    paint(step)
+  }, { passive: false })
+  const end = () => {
+    if (!pull) return
+    const what = pullRelease(pull.step)
+    pull = null
+    if (what === 'refresh') pullRefresh()
+    else paint(null)
+  }
+  document.addEventListener('touchend', end, { passive: true })
+  document.addEventListener('touchcancel', () => { pull = null; if (!refreshing) paint(null) }, { passive: true })
 }
 
 // Status popover: open sessions, this Mac, the summarizer, sync, the version, the theme.
@@ -3412,6 +3722,7 @@ function placeStatus() {
   const pop = document.getElementById('statusPop'), b = document.getElementById('health')
   if (!pop || pop.hidden || !b) return
   const r = b.getBoundingClientRect(), vw = document.documentElement.clientWidth
+  if (railMode()) { pop.style.right = 'auto'; pop.style.left = (document.querySelector('.top').getBoundingClientRect().right + 8) + 'px'; pop.style.top = Math.max(8, Math.min(r.bottom - pop.offsetHeight, window.innerHeight - 8 - pop.offsetHeight)) + 'px'; return } // 0.9.8: beside the rail
   if (vw < 600) { pop.style.left = '8px'; pop.style.right = '8px'; pop.style.top = (r.bottom + 8) + 'px'; return }
   pop.style.right = 'auto'
   pop.style.top = (r.bottom + 8) + 'px'
@@ -3670,6 +3981,8 @@ document.addEventListener('input', (ev) => {
 document.addEventListener('keydown', (ev) => { if (ev.target.id === 'prs-q' && ev.key === 'Escape' && ev.target.value) { ev.preventDefault(); ev.target.value = ''; ev.target.dispatchEvent(new Event('input', { bubbles: true })) } })
 
 window.addEventListener('hashchange', () => closeActionMenu())
+const tipsUi = wireTips(document) // 0.9.8: the ⓘ tooltips (Always allow here)
+window.addEventListener('hashchange', () => tipsUi.hide())
 // 0.8.9: a session page's title is a button too (Enter or Space renames it)
 document.addEventListener('keydown', (e) => { const t = e.target; if ((e.key === 'Enter' || e.key === ' ') && t && t.matches && t.matches('.s-title-text[role="button"]')) { e.preventDefault(); t.click() } })
 // 0.8.7: a card's ⋯ opens from the keyboard with the arrows too (Enter and Space click it).
@@ -4003,6 +4316,8 @@ document.addEventListener('click', async (ev) => {
     if (action === 'ask-answer' || action === 'ask-pick-send') return answerClick(btn, action)
     if (action === 'reply-send') return replyClick(btn)
     if (action === 'live-send') return liveSendClick(btn)
+    if (action === 'live-jump') return liveJumpClick(btn)
+    if (action === 'live-earlier') return liveEarlierClick(btn)
     if (action === 'quick-reply') return quickReplyClick(btn)
     if (action === 'need-more') return needMoreClick(btn)
     if (action === 'need-dismiss') return needDismissClick(btn)
@@ -4130,7 +4445,7 @@ document.addEventListener('click', async (ev) => {
 // Answer a permission prompt or a question from the board. The daemon hands it
 // to the waiting hook or mod; the terminal's own prompt may already have won.
 async function answerClick(btn, action) {
-  const need = btn.closest('.need')
+  const need = btn.closest('.need, .ql-item') // 0.9.8: Quick look's Allow / Deny are the same buttons
   if (!need) return
   const askId = need.dataset.ask, key = need.dataset.key
   const s = state.sessions.find((x) => x.id === need.dataset.id)
@@ -4164,6 +4479,7 @@ async function answerClick(btn, action) {
     toast(e.code === 'not_waiting' ? 'Already handled: ' + e.message : e.message, 4200)
   } finally {
     delete state.pendingAsk[key]
+    if (need.classList.contains('ql-item')) { await loadQuickLook(); refreshHealth() }
     render()
   }
 }
@@ -4479,7 +4795,7 @@ document.addEventListener('submit', async (ev) => {
 
 // Live updates over SSE; re-render the current view, at most every 800 ms.
 let pending = null
-const busy = () => !!document.querySelector('.doc-viewer:not([hidden]), .lo-menu, .title input, .repomore[open], .need .deny-form:not([hidden])') || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.addform') && document.activeElement.value) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.need') && /^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName)) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.live-box') && document.activeElement.value)
+const busy = () => !!document.querySelector('.doc-viewer:not([hidden]), .tip:not([hidden]), .lo-menu, .title input, .repomore[open], .need .deny-form:not([hidden])') || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.addform') && document.activeElement.value) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.need') && /^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName)) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.live-box') && document.activeElement.value)
 // Settings isn't redrawn by live updates: it would wipe what you're editing,
 // and the QR code you're scanning (v0.4.6). Its sections fetch their own state.
 function soon() { if (pending) return; pending = setTimeout(() => { pending = null; if (!busy() && !(state.route && ['settings', 'setup'].includes(state.route.name)) && !(state.route && state.route.name === 'catchup' && cuUi.open)) render(); refreshHealth() }, 800) }

package/ui/index.html

@@ -21,25 +21,33 @@
 </head>
 <body>
   <header class="top">
-    <a class="brand" href="#/" id="brand" title="Leftoff">
+    <a class="brand" href="#/" id="brand" title="Leftoff" aria-label="Leftoff">
       <img src="favicon.svg" class="logo" alt="" width="22" height="22">
       <span>Leftoff</span>
     </a>
     <nav class="tabs" aria-label="Sections">
       <a href="#/" data-route="board"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect width="7" height="9" x="3" y="3" rx="1"/> <rect width="7" height="5" x="14" y="3" rx="1"/> <rect width="7" height="9" x="14" y="12" rx="1"/> <rect width="7" height="5" x="3" y="16" rx="1"/></svg><span class="lbl">Board</span></a>
-      <a href="#/waiting" data-route="waiting" id="needsTab"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10.268 21a2 2 0 0 0 3.464 0"/> <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg><span class="lbl">Needs you</span><span class="lbl-short">Needs</span><span class="navcount" id="needsCount" hidden></span></a>
+      <a href="#/waiting" data-route="waiting" id="needsTab" aria-haspopup="dialog" aria-expanded="false" aria-controls="quickLook"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10.268 21a2 2 0 0 0 3.464 0"/> <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg><span class="lbl">Needs you</span><span class="lbl-short">Needs</span><span class="navcount" id="needsCount" hidden></span></a>
       <a href="#/lists" data-route="lists" id="listsTab"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M13 5h8"/> <path d="M13 12h8"/> <path d="M13 19h8"/> <path d="m3 17 2 2 4-4"/> <path d="m3 7 2 2 4-4"/></svg><span class="lbl">Lists</span><span class="navcount" id="listsCount" hidden></span></a>
       <a href="#/prs" data-route="prs" id="prsTab"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="18" cy="18" r="3"/> <circle cx="6" cy="6" r="3"/> <path d="M13 6h3a2 2 0 0 1 2 2v7"/> <line x1="6" x2="6" y1="9" y2="21"/></svg><span class="lbl">PRs</span></a>
-      <a href="#/timeline" data-route="timeline"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/> <path d="M3 3v5h5"/> <path d="M12 7v5l4 2"/></svg><span class="lbl">Timeline</span></a>
-      <a href="#/digest" data-route="digest"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M15 18h-5"/> <path d="M18 14h-8"/> <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/> <rect width="8" height="4" x="10" y="6" rx="1"/></svg><span class="lbl">Digest</span></a>
+      <a href="#/timeline" data-route="timeline" class="tab-extra"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/> <path d="M3 3v5h5"/> <path d="M12 7v5l4 2"/></svg><span class="lbl">Timeline</span></a>
+      <a href="#/digest" data-route="digest" class="tab-extra"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M15 18h-5"/> <path d="M18 14h-8"/> <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/> <rect width="8" height="4" x="10" y="6" rx="1"/></svg><span class="lbl">Digest</span></a>
+      <button type="button" class="tab-more" id="moreBtn" aria-haspopup="menu" aria-expanded="false" aria-controls="moreMenu"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="1"/> <circle cx="19" cy="12" r="1"/> <circle cx="5" cy="12" r="1"/></svg><span class="lbl">More</span><span class="moredot" hidden></span></button>
     </nav>
     <div class="topright">
       <button type="button" class="searchbtn" id="searchBtn" title="Search (⌘K)" aria-label="Search" aria-haspopup="dialog" aria-keyshortcuts="Meta+K Control+K /"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/> <path d="m21 21-4.3-4.3"/></svg><span class="sb-lbl">Search</span><kbd class="sb-kbd" id="searchKbd">⌘K</kbd></button>
       <button type="button" class="health" id="health" title="Status" aria-haspopup="dialog" aria-expanded="false" aria-controls="statusPop"><span class="dot"></span><span class="label">connecting…</span></button>
-      <a href="#/whats-new" data-route="whats-new" id="wnTab" class="iconbtn" title="What’s new" aria-label="What’s new"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/> <path d="M20 2v4"/> <path d="M22 4h-4"/> <circle cx="4" cy="20" r="2"/></svg><span class="newdot" hidden></span></a>
-      <a href="#/settings" data-route="settings" id="setTab" class="iconbtn" title="Settings" aria-label="Settings"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/> <circle cx="12" cy="12" r="3"/></svg><span class="topdot" hidden></span></a>
+      <a href="#/whats-new" data-route="whats-new" id="wnTab" class="iconbtn" title="What’s new" aria-label="What’s new"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/> <path d="M20 2v4"/> <path d="M22 4h-4"/> <circle cx="4" cy="20" r="2"/></svg><span class="lbl">What’s new</span><span class="newdot" hidden></span></a>
+      <a href="#/settings" data-route="settings" id="setTab" class="iconbtn" title="Settings" aria-label="Settings"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/> <circle cx="12" cy="12" r="3"/></svg><span class="lbl">Settings</span><span class="topdot" hidden></span></a>
     </div>
   </header>
+  <div class="moremenu" id="moreMenu" role="menu" aria-label="More" hidden>
+    <a href="#/timeline" data-route="timeline" role="menuitem"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/> <path d="M3 3v5h5"/> <path d="M12 7v5l4 2"/></svg><span>Timeline</span></a>
+    <a href="#/digest" data-route="digest" role="menuitem"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M15 18h-5"/> <path d="M18 14h-8"/> <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/> <rect width="8" height="4" x="10" y="6" rx="1"/></svg><span>Digest</span></a>
+    <a href="#/whats-new" data-route="whats-new" role="menuitem"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/> <path d="M20 2v4"/> <path d="M22 4h-4"/> <circle cx="4" cy="20" r="2"/></svg><span>What’s new</span><span class="newdot" hidden></span></a>
+    <a href="#/settings" data-route="settings" role="menuitem"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/> <circle cx="12" cy="12" r="3"/></svg><span>Settings</span><span class="topdot" hidden></span></a>
+  </div>
+  <div class="quicklook" id="quickLook" role="dialog" aria-labelledby="qlTitle" hidden></div>
   <div class="statuspop" id="statusPop" role="dialog" aria-label="Status" hidden></div>
   <div class="cmdk" id="cmdk" hidden>
     <div class="cmdk-panel" role="dialog" aria-modal="true" aria-label="Search">