@leftoff/cli 0.9.9-beta.1 → 0.9.9-beta.10

package/ui/composer.js

@@ -34,6 +34,18 @@ export function isTouchUi(matchMedia) {
   } catch { return false }
 }
 
+// 0.9.9 After a send that went through, a phone's keyboard closes: the text
+// box lets go of focus. On a Mac (a fine pointer) focus stays, so you can keep
+// typing. A send that failed keeps its text and its focus everywhere.
+export function keepFocusAfterSend({ ok = false, touch = false } = {}) { return !ok || !touch }
+// Let go of the focused text box (the on-screen keyboard closes); true if one had it.
+export function letGoOfKeyboard(doc) {
+  const a = doc && doc.activeElement
+  if (!a || a === doc.body || !/^(TEXTAREA|INPUT)$/.test(String(a.tagName || '').toUpperCase()) || typeof a.blur !== 'function') return false
+  a.blur()
+  return true
+}
+
 // The height the box should be for its content: scrollHeight is the
 // textarea's at height:auto (padding included), lineHeight and padY in px.
 // -> { height, scroll } where scroll says the content is taller than the cap.

package/ui/facts.js

@@ -0,0 +1,34 @@
+// 0.9.9 the session page's info cards (Machine, Repo, Directory, Session id…).
+// Pure (the unit tests read it). A card whose value is an id or a path is a
+// button: tap or click copies the whole value (the toast says it), the whole
+// value is its data-tip, and it is a 44px target. A long path shows its start
+// and its end, the part that tells worktrees apart.
+import { icon } from './icons.js'
+import { midClip } from './live-view.js'
+
+const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ESC[c])
+
+// factHtml('Turns', '3') or factHtml('Directory', cwd, { copy: cwd, what: 'directory', clip: 34 })
+//   copy: the full value to copy (a card without one is plain); what: its name in "Copy <what>"
+//   shown: what the card shows when it isn't the copied value itself (the worktree's name for its path)
+// A long path: its start, then its last folder whole ("/Users/you…/add-a-joke-0994").
+export function clipPath(p, n = 34) {
+  const t = String(p == null ? '' : p)
+  if (t.length <= n) return t
+  const i = t.replace(/\/+$/, '').lastIndexOf('/')
+  const last = i >= 0 ? t.slice(i + 1) : ''
+  if (!last || last.length > n - 8) return midClip(t, n)
+  return t.slice(0, n - last.length - 2) + '…/' + last
+}
+
+export function factHtml(k, v, { cls = '', copy = null, what = null, shown = null, clip = 0 } = {}) {
+  const value = String(v == null ? '' : v)
+  const view = shown != null ? String(shown) : clip ? (value.includes('/') ? clipPath(value, clip) : midClip(value, clip)) : value
+  if (copy == null || copy === '') {
+    return '<div class="fact' + (cls ? ' ' + cls : '') + '"><div class="k">' + esc(k) + '</div><div class="v">' + esc(view) + '</div></div>'
+  }
+  const full = String(copy)
+  return '<button type="button" class="fact copyable' + (cls ? ' ' + cls : '') + '" data-action="copy-fact" data-copy="' + esc(full) + '" data-tip="' + esc(full) + '" aria-label="' + esc('Copy ' + (what || k.toLowerCase()) + ': ' + full) + '">' +
+    '<span class="k">' + esc(k) + '<span class="fact-ic" aria-hidden="true">' + icon('copy') + '</span></span><span class="v">' + esc(view) + '</span></button>'
+}

package/ui/icons.js

@@ -17,6 +17,7 @@ export const ICONS = {
   "qr-code": "<rect width=\"5\" height=\"5\" x=\"3\" y=\"3\" rx=\"1\"/> <rect width=\"5\" height=\"5\" x=\"16\" y=\"3\" rx=\"1\"/> <rect width=\"5\" height=\"5\" x=\"3\" y=\"16\" rx=\"1\"/> <path d=\"M21 16h-3a2 2 0 0 0-2 2v3\"/> <path d=\"M21 21v.01\"/> <path d=\"M12 7v3a2 2 0 0 1-2 2H7\"/> <path d=\"M3 12h.01\"/> <path d=\"M12 3h.01\"/> <path d=\"M12 16v.01\"/> <path d=\"M16 12h1\"/> <path d=\"M21 12v.01\"/> <path d=\"M12 21v-1\"/>",
   "refresh-cw": "<path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\"/> <path d=\"M21 3v5h-5\"/> <path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\"/> <path d=\"M8 16H3v5\"/>",
   "check": "<path d=\"M20 6 9 17l-5-5\"/>",
+  "lock": "<rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\"/> <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>",
   "folder-sync": "<path d=\"M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v.5\"/> <path d=\"M12 10v4h4\"/> <path d=\"m12 14 1.535-1.605a5 5 0 0 1 8 1.5\"/> <path d=\"M22 22v-4h-4\"/> <path d=\"m22 18-1.535 1.605a5 5 0 0 1-8-1.5\"/>",
   "bell": "<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\"/>",
   "x": "<path d=\"M18 6 6 18\"/> <path d=\"m6 6 12 12\"/>",
@@ -46,6 +47,7 @@ export const ICONS = {
   "archive": "<rect width=\"20\" height=\"5\" x=\"2\" y=\"3\" rx=\"1\"/> <path d=\"M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8\"/> <path d=\"M10 12h4\"/>",
   "bookmark-plus": "<path d=\"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z\"/> <path d=\"M12 7v6\"/> <path d=\"M15 10H9\"/>",
   "circle-check": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <path d=\"m9 12 2 2 4-4\"/>",
+  "square": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/>",
   "message-square": "<path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/>"
 }
 

package/ui/index.html

@@ -36,6 +36,7 @@
     </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>
+      <a href="#/new" data-route="new" id="newTab" class="iconbtn newbtn" data-tip="New session" aria-label="New session"><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="M5 12h14"/> <path d="M12 5v14"/></svg><span class="lbl">New session</span></a>
       <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="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>

package/ui/live-status.js

@@ -16,6 +16,10 @@
 //   folded into that turn (folded: the id of the message that owns the turn):
 //   it has no Working bubble of its own, and when the turn ends it is
 //   "Answered with the reply above".
+//   0.9.9: until Claude takes it in (at its next step, or when the turn ends)
+//   such a message is Queued (queued: true; cancellable: Leftoff can still take
+//   it back; sendNow: Send now can make it run next). Anything Claude does
+//   with it ends that.
 
 export const LIVE_QUIET_MS = 3 * 60 * 1000
 export const LIVE_PHASES = ['sent', 'received', 'working', 'replied', 'stopped', 'failed']
@@ -27,11 +31,15 @@ export function initStatus(at = 0) { return { phase: 'sent', at, last: at, tool:
 
 // One thing that happened to the message. ev: { type, at, tool?, detail?, asked?, text? }
 //   delivered | failed | started | tool | tool_done | ask | ask_done | text | reply | ended | folded | answered | lost
+const KEEPS_QUEUED = new Set(['delivered', 'queued', 'ask_done', 'noop'])
 export function stepStatus(st, ev = {}) {
   const s = { ...(st || initStatus(ev.at || 0)), ran: [...((st && st.ran) || [])] }
   const at = ev.at || s.last
-  if (FINAL.has(s.phase) && !(s.phase === 'replied' && ev.type === 'tool_done')) return s
+  if (FINAL.has(s.phase) && !(s.phase === 'replied' && ev.type === 'tool_done')) { if (s.queued) { delete s.queued; delete s.cancellable; delete s.sendNow } return s }
+  if (s.queued && !KEEPS_QUEUED.has(ev.type)) { delete s.queued; delete s.cancellable; delete s.sendNow }
   switch (ev.type) {
+    case 'queued': if (s.phase === 'sent' || s.phase === 'received') { s.queued = true; s.cancellable = !!ev.cancellable; if (ev.cancellable && ev.sendNow) s.sendNow = true; else delete s.sendNow } else return s; break
+    case 'unqueued': break
     case 'delivered': if (s.phase === 'sent') s.phase = 'received'; break
     case 'failed': if (s.phase === 'sent') { s.phase = 'failed'; s.error = ev.error || null; s.endedAt = at } break
     case 'started': case 'text': if (s.phase !== 'replied') s.phase = 'working'; if (ev.type === 'text') s.waiting = null; break
@@ -57,12 +65,16 @@ export function stepStatus(st, ev = {}) {
   return s
 }
 
+// Waiting behind Claude's turn, not taken in yet.
+export function isQueued(st) { return !!(st && st.queued && !st.folded && (st.phase === 'sent' || st.phase === 'received')) }
+
 // The line under the message: { label, steps, spin, tone, elapsedMs }
 export function statusView(st, now = Date.now()) {
   if (!st) return null
   const quiet = !st.folded && (st.phase === 'received' || st.phase === 'working') && now - (st.last || st.at) >= LIVE_QUIET_MS
   const elapsedMs = Math.max(0, (st.endedAt || now) - (st.at || now))
   let label
+  if (isQueued(st)) return { label: 'Queued', steps: [{ name: 'Sent', state: 'done' }, { name: 'Queued', state: 'now' }], spin: false, tone: 'queued', quiet: false, elapsedMs, final: false, queued: true }
   if (st.phase === 'sent') label = 'Sent, waiting for the session'
   else if (st.phase === 'received') label = quiet ? 'Received · no word from Claude yet' : 'Received · Claude is starting…'
   else if (st.phase === 'working' && st.folded) label = 'Taken into the turn above'

package/ui/live-view.js

@@ -3,12 +3,29 @@
 // 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 { statusView, elapsedText, ranWithoutAsking, isQueued } 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')
 
+// 0.9.9: which Live box a session's page shows, and so whether it fetches the
+// thread. A session Leftoff started (headless) always has one, whatever its
+// capture says ("hooks": its card came from the daemon before Claude's first
+// hook): its first message and the reply are in it, while it runs and after
+// it stops. Another hooks-only session has no Live at all; any other one has
+// a thread while it is live-linked and the how-to otherwise.
+//   -> 'none' | 'thread' | 'readonly' (a stopped headless one: no composer) | 'how'
+export function liveBoxKind(s) {
+  if (!s || s.agent || s.codingAgent === 'codex') return 'none'
+  if (s.capture === 'hooks' && !s.headless) return 'none'
+  if (s.liveLink && s.liveLink.on) return 'thread'
+  if (s.headless) return 'readonly'
+  if (s.endedAt || s.live === 'closed') return 'none'
+  return 'how'
+}
+export const liveThreadWanted = (s) => { const k = liveBoxKind(s); return k === 'thread' || k === 'readonly' }
+
 // 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.
@@ -201,14 +218,17 @@ export function messageAttachments(m) {
   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 }) {
+export function entryHtml(m, { esc, ago, md, now = Date.now(), status = null, attHtml = null, may = true }) {
   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) : '')
+    // 0.9.9 Queued: a long one folds to two lines; a tap opens it in place
+    const fold = isQueued(m.status) && queuedLong(a.text)
+    const open = fold ? ' lv-q-long" role="button" tabindex="0" aria-expanded="false" aria-label="Show the whole message" data-action="lv-queued-more' : ''
+    body = (a.text || !a.attachments.length ? '<div class="lv-text lv-md' + open + '">' + (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 = ''
@@ -220,13 +240,19 @@ export function entryHtml(m, { esc, ago, md, now = Date.now(), status = null, at
     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 && m.from === 'you' && isQueued(m.status)) {
+    foot = queuedHtml(m, { esc, may })
   } 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 queued = m.from === 'you' && isQueued(m.status)
+  const sig = entrySig(m) + (m.from === 'claude' && status ? statusSig(status) : '') + (queued ? '|q' + (may ? 1 : 0) : '')
+  // 0.9.9: a Queued one is compact: no "You · from this Mac 10:04 PM" line
+  // (it comes back once Claude takes the message in)
+  const head = queued ? '' : '<div class="lv-who"' + (title ? ' title="' + esc(title) + '"' : '') + '>' + esc(who) + ' ' + timeHtml(m.at, { esc, now }) + '</div>'
+  return '<li class="lv lv-' + esc(m.from) + (m.history ? ' lv-history' : '') + (queued ? ' lv-queued' : '') + '" data-key="' + esc(entryKey(m)) + '" data-sig="' + esc(sigHash(sig)) + '">' + head + body + foot + '</li>'
 }
 
 const FINAL_PHASES = new Set(['replied', 'failed', 'stopped'])
@@ -242,6 +268,26 @@ export function deliveryHtml(st, { esc, error = null }) {
   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>'
 }
 
+// 0.9.9 Under a message still waiting behind Claude's turn, one small row:
+// "◷ Queued · Send now · Edit · Cancel". Send now where Claude Code can make it
+// run next (a session Leftoff runs, a CLI with Send now); Edit and Cancel where
+// Leftoff can truly take it back; and only if you may send from this device.
+// Otherwise the plain fact. Small text buttons, each with a 44px hit area
+// (app.css). No tooltip.
+export function queuedHtml(m, { esc, may = true }) {
+  const st = m.status || {}
+  const id = esc(m.id || '')
+  const dot = '<span class="lv-q-dot" aria-hidden="true">·</span>'
+  const btn = (action, label, aria) => dot + '<button type="button" class="lv-q-btn" data-action="' + action + '" data-msg="' + id + '" aria-label="' + aria + '">' + label + '</button>'
+  const acts = st.cancellable && may
+    ? (st.sendNow ? btn('lv-queued-now', 'Send now', 'Send now: Claude stops its current step') : '') +
+      btn('lv-queued-edit', 'Edit', 'Edit this queued message') + btn('lv-queued-cancel', 'Cancel', 'Cancel this queued message')
+    : dot + '<span class="lv-q-hint">Claude reads it after its current step</span>'
+  return '<div class="lv-q" role="status"><span class="lv-q-tag">Queued</span>' + acts + '</div>'
+}
+// A queued message longer than about two lines folds (tap to open in place).
+export function queuedLong(text) { const t = String(text || '').trim(); return t.length > 80 || t.includes('\n') }
+
 // "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()
@@ -295,19 +341,125 @@ export function pendingClaudeHtml(you, { esc, ago, now = Date.now() }) {
 }
 
 // The whole thread: each message you sent, then Claude's side of that turn.
+// opts.inserts (0.9.9): other rows ({ at, html }: the permission asks) go in
+// where they happened, before the first message after them; with earlier
+// messages not shown yet, one from before the first shown waits for "Show earlier".
+// A turn's asks sit before that turn's reply, so the newest reply is the last
+// thing in the thread: the reply entry is made when Claude's first words of
+// the turn land and keeps that time, so its own time can't place them; the
+// turn's span (up to the next message, or the turn's end) does.
+// Answered asks next to each other fold into one row (askGroupHtml);
+// opts.openGroups: the group keys opened on this page.
 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))
+  const t = (x) => { const v = typeof x === 'number' ? x : Date.parse(x || ''); return Number.isFinite(v) ? v : null }
+  const first = list.length ? t(list[0].at) : null
+  const ins = ((opts && opts.inserts) || []).filter((r) => r && r.html)
+    .map((r, i) => ({ ...r, t: t(r.at), i }))
+    .filter((r) => !(opts.earlier > 0 && first != null && r.t != null && r.t < first))
+    .sort((a, b) => ((a.t == null ? Infinity : a.t) - (b.t == null ? Infinity : b.t)) || a.i - b.i)
+  let k = 0
+  const take = (at) => { const out = []; while (k < ins.length && ins[k].t != null && at != null && ins[k].t < at) out.push(ins[k++]); return out }
+  const upTo = (at) => slotHtml(take(at), opts)
+  // 0.9.9: messages Queued behind Claude's turn wait at the bottom, in the order
+  // sent, with no Working bubble; once Claude takes one in it goes back to its place
+  const waiting = list.filter((m) => m.from === 'you' && isQueued(m.status) && !answered.has(m.id))
+  const rest = waiting.length ? list.filter((m) => !waiting.includes(m)) : list
   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 }
+  rest.forEach((m, i) => {
+    const next = i + 1 < rest.length ? t(rest[i + 1].at) : null
+    if (m.from === 'claude') {
+      const you = m.replyTo ? byId.get(m.replyTo) : null
+      html += upTo(Math.max(t(m.at) == null ? -Infinity : t(m.at), replyBefore(m, you, next, t)))
+      html += entryHtml(m, { ...opts, status: you && you.status ? you.status : null })
+      return
+    }
+    html += upTo(t(m.at))
     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)
+    if (m.status && !m.status.folded && !answered.has(m.id) && m.status.phase !== 'failed' && m.status.phase !== 'sent') {
+      // the asks of this turn go before Claude's Working bubble: the answer that replaces it in place then lands after them, as on a fresh page
+      html += upTo(next == null ? Infinity : next)
+      html += pendingClaudeHtml(m, opts)
+    }
+  })
+  html += slotHtml(ins.slice(k), opts)
+  for (const m of waiting) html += entryHtml(m, opts)
+  return html
+}
+
+// Rows from before this time go above Claude's reply m. A reply to a message
+// (yours, or a prompt typed in the terminal) closes its turn: everything up to
+// the next message is that turn's. The last one: up to the turn's end (the
+// board message's endedAt; a transcript reply's own time is when its last
+// words landed), or everything while the turn still runs. A reply with no
+// message of its own (Claude's reply tool) stays where its time puts it.
+const TURN_END_SLACK_MS = 1000
+export function replyBefore(m, you, next, t = (x) => { const v = typeof x === 'number' ? x : Date.parse(x || ''); return Number.isFinite(v) ? v : null }) {
+  if (!m || !m.replyTo) return -Infinity
+  if (next != null) return next
+  const st = you && you.status
+  if (st) return st.endedAt ? t(st.endedAt) + TURN_END_SLACK_MS : (m.done === false || !FINAL_PHASES.has(st.phase) ? Infinity : t(m.at) + TURN_END_SLACK_MS)
+  const end = t(m.at)
+  return end == null ? -Infinity : end + TURN_END_SLACK_MS
+}
+
+// One place in the thread between two messages: its rows in order, answered
+// asks next to each other folded into one row; a waiting one is never folded.
+export function slotHtml(rows, opts = {}) {
+  let html = ''
+  let run = []
+  const flush = () => { if (run.length) html += askGroupHtml(run, opts); run = [] }
+  for (const r of rows || []) {
+    if (r.fold) { run.push(r); continue }
+    flush()
+    html += r.html
   }
+  flush()
   return html
 }
 
+// "▸ 7 asks · 6 allowed · 1 always allowed": answered asks folded into one
+// compact row; tapping it opens the rows in place (no popover), tapping again
+// folds them. Closed by default, and on every fresh page.
+const FOLD_ORDER = ['Allowed', 'Allowed for this session', 'Always allowed here', 'Auto-approved', 'Answered', 'Denied', 'Skipped']
+const FOLD_WORD = { Allowed: 'allowed', 'Allowed for this session': 'allowed for this session', 'Always allowed here': 'always allowed', 'Auto-approved': 'auto-approved', Answered: 'answered', Denied: 'denied', Skipped: 'skipped' }
+const FOLD_NO = new Set(['Denied', 'Skipped'])
+export function askGroupKey(rows) { return 'askg:' + ((rows && rows[0] && rows[0].key) || '') }
+export function askGroupCounts(rows) {
+  const by = new Map()
+  for (const r of rows || []) { const st = (r.fold && r.fold.state) || 'Answered'; by.set(st, (by.get(st) || 0) + 1) }
+  const keys = [...by.keys()].sort((a, b) => { const ia = FOLD_ORDER.indexOf(a), ib = FOLD_ORDER.indexOf(b); return (ia < 0 ? 99 : ia) - (ib < 0 ? 99 : ib) })
+  return keys.map((st) => ({ state: st, n: by.get(st), word: FOLD_WORD[st] || st.toLowerCase(), no: FOLD_NO.has(st) }))
+}
+export function askGroupLabel(rows) {
+  const n = (rows || []).length
+  const noun = (rows || []).every((r) => r.fold && r.fold.kind === 'question') ? (n === 1 ? 'question' : 'questions') : (n === 1 ? 'ask' : 'asks')
+  return [n + ' ' + noun, ...askGroupCounts(rows).map((c) => c.n + ' ' + c.word)].join(' · ')
+}
+export function askGroupHtml(rows, { esc = escHtml, openGroups = null } = {}) {
+  const key = askGroupKey(rows)
+  const open = !!(openGroups && openGroups.has && openGroups.has(key))
+  const id = 'lvag-' + key.replace(/[^A-Za-z0-9_-]/g, '')
+  let sum
+  if (rows.length === 1) {
+    const f = rows[0].fold || {}
+    const c = askGroupCounts(rows)[0]
+    sum = '<span class="lvag-what">' + esc(f.line || '') + '</span><span class="lvag-n' + (c.no ? ' lvag-no' : '') + '">' + esc(f.state || 'Answered') + '</span>'
+  } else {
+    const n = rows.length
+    const noun = rows.every((r) => r.fold && r.fold.kind === 'question') ? 'questions' : 'asks'
+    sum = '<span class="lvag-what">' + esc(n + ' ' + noun) + '</span>' + askGroupCounts(rows).map((c) => '<span class="lvag-sep" aria-hidden="true">·</span><span class="lvag-n' + (c.no ? ' lvag-no' : '') + '">' + esc(c.n + ' ' + c.word) + '</span>').join('')
+  }
+  const sig = sigHash(JSON.stringify([open, rows.map((r) => [r.key, r.html])]))
+  return '<li class="lv-askgroup' + (open ? ' open' : '') + '" data-key="' + esc(key) + '" data-sig="' + esc(sig) + '">' +
+    '<button type="button" class="lvag-toggle" data-action="ask-group" data-group="' + esc(key) + '" aria-expanded="' + (open ? 'true' : 'false') + '" aria-controls="' + esc(id) + '" aria-label="' + esc(askGroupLabel(rows) + (open ? ', shown' : ', tap to show')) + '">' +
+    '<span class="lvag-caret" aria-hidden="true">▸</span>' + sum + '</button>' +
+    '<ul class="lvag-list" id="' + esc(id) + '"' + (open ? '' : ' hidden') + '>' + rows.map((r) => r.html).join('') + '</ul></li>'
+}
+const escHtml = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]))
+
 export function statusHtml(st, { esc, now = Date.now(), error = null }) {
   const v = statusView(st, now)
   if (!v) return ''
@@ -325,7 +477,7 @@ 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]) }
+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.status.queued, !!m.status.cancellable, !!m.status.sendNow], m.done, m.ranWithoutAsking, m.errorText]) }
 
 // ------------------------------------------------------------ the DOM keeper
 
@@ -376,7 +528,10 @@ export function createLiveKeeper() {
         // 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
+        const before = prev
         if (cur.dataset.sig !== li.dataset.sig) { if (cur.dataset.pending && !li.dataset.pending) added++; cur.replaceWith(li); prev = li } else prev = cur
+        // the same order as a fresh page: a row that moved (a turn's asks go before its reply) moves here too
+        if (before ? before.nextElementSibling !== prev : oldOl.firstElementChild !== prev) { if (before) before.after(prev); else oldOl.prepend(prev) }
       }
       for (const li of have.values()) li.remove()
       const d = scrollDecision({ wasAtBottom, newCount: added, unseen: kept.unseen })

package/ui/live-wake.js

@@ -55,7 +55,7 @@ export function backoffMs(attempt) {
 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(':')
+    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, st.queued ? (st.cancellable ? 'qc' : 'q') : ''].join(':')
   }).join('|')
 }
 

package/ui/needs.js

@@ -10,6 +10,7 @@
 import { mdInline } from './changelog-md.js'
 import { tipHtml, tipId } from './tips.js'
 import { composerBoxHtml } from './composer.js'
+import { liveBoxKind } from './live-view.js'
 
 const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }
 export const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ESC[c])
@@ -87,6 +88,17 @@ export function alwaysButton(ask, dis = '', opts = {}) {
     tipHtml({ id, label: 'What “' + label + '” does', html: alwaysTipHtml(ask, opts.session) }) + '</span>'
 }
 
+// 0.9.9 "Auto-approve the rest": only for a running session Leftoff started
+// (it can switch Claude Code's mode mid-session, src/headless.js setMode).
+// Allows this call, then switches the session to Auto (from another device:
+// the same rule as starting one there; else that Mac says yes first).
+export const AUTO_REST_TIP = 'Allows this, then switches this session to Auto: routine steps just run; riskier ones get a safety check that lets them run or blocks them. Back to Ask me on the session page.'
+export function autoRestButton(s, dis = '') {
+  const h = s && s.headless
+  if (!h || h.state !== 'running' || h.mode === 'auto') return ''
+  return '<button type="button" class="btn auto-rest" data-action="ask-auto"' + dis + ' aria-label="Auto-approve the rest of this session" data-tip="' + esc(AUTO_REST_TIP) + '">Auto-approve the rest</button>'
+}
+
 // opts: { mayAnswer, goButton(session) -> html, drafts: { [key]: text }, pending: { [key]: label }, compact, kbd }
 export function needPanel(n, opts = {}) {
   const s = n.session || {}
@@ -98,11 +110,11 @@ export function needPanel(n, opts = {}) {
   const dis = !may || busy ? ' disabled' : ''
   if (n.kind === 'agent') return agentNeedPanel(n, s)
   const go = opts.goButton ? opts.goButton(s) : ''
-  let h = '<article class="need k-' + esc(n.kind) + (n.blocking ? ' blocking' : '') + '" data-id="' + esc(s.id) + '"' + (askId ? ' data-ask="' + esc(askId) + '"' : '') + ' data-key="' + esc(key) + '"' + (n.key ? ' data-need="' + esc(n.key) + '"' : '') + '>'
+  let h = '<article class="need ' + (opts.dockClass ? esc(opts.dockClass) + ' ' : '') + 'k-' + esc(n.kind) + (n.blocking ? ' blocking' : '') + '" data-id="' + esc(s.id) + '"' + (askId ? ' data-ask="' + esc(askId) + '"' : '') + ' data-key="' + esc(key) + '"' + (n.key ? ' data-need="' + esc(n.key) + '"' : '') + '>'
   h += '<div class="need-head"><span class="need-dot" aria-hidden="true"></span>' +
     (opts.compact ? '' : '<a class="need-title" href="#/s/' + encodeURIComponent(s.id) + '">' + esc(s.title || 'Untitled session') + '</a>' + (s.repoLabel ? '<span class="chip mono">' + esc(s.repoLabel) + '</span>' : '')) +
     (n.peer || (s.isLocal === false && s.machine) ? '<span class="chip machine remote" data-tip="answered on that machine, through its Leftoff">⌂ ' + esc(n.peer || s.machine) + '</span>' : '') +
-    '<span class="need-kind">' + esc(n.label || KIND_LABEL[n.kind] || '') + '</span>' +
+    '<span class="need-kind">' + esc(n.label || KIND_LABEL[n.kind] || '') + '</span>' + (opts.countHtml || '') +
     (n.waitSec != null ? '<span class="need-wait"' + (n.since ? ' data-tip="since ' + esc(n.since) + '"' : '') + '>' + esc(waitLabel(n.waitSec)) + '</span>' : '') + dismissButton(n) + '</div>'
   h += needContextHtml(n, opts) + prCardHtml(n.pr)
   if (n.kind === 'permission' && n.ask) {
@@ -114,6 +126,7 @@ export function needPanel(n, opts = {}) {
       '<button type="button" class="btn allow" data-action="ask-answer" data-choice="allow"' + dis + '>Allow once</button>' +
       alwaysButton(n.ask, dis, { session: s }) +
       (n.ask.canAllowSession === false ? '' : '<button type="button" class="btn" data-action="ask-answer" data-choice="allow_session"' + dis + ' data-tip="Allow this and calls like it until this Claude Code session ends (kept to the session, never saved to settings)">Allow for this session</button>') + // 0.9.8: Live link allows one call at a time
+      autoRestButton(s, dis) + // 0.9.9: a session Leftoff runs: allow this, and switch it to Auto
       '<button type="button" class="btn deny" data-action="ask-deny-open"' + dis + '>Deny…</button>' + go + '</div>' +
       '<div class="deny-form" hidden><input type="text" class="deny-note" maxlength="500" placeholder="Tell Claude why or what to do instead (optional)" value="' + esc(drafts['deny:' + askId] || '') + '" data-draft="deny:' + esc(askId) + '" data-submit="deny" aria-keyshortcuts="' + KBD_SUBMIT + '">' +
       '<button type="button" class="btn deny" data-action="ask-answer" data-choice="deny" data-submit-for="deny"' + dis + '>Deny' + kbdHint(opts) + '</button><button type="button" class="btn" data-action="ask-deny-close">Cancel</button></div>'
@@ -151,6 +164,7 @@ export function needPanel(n, opts = {}) {
   }
   if (!may && n.kind !== 'terminal') h += '<div class="need-note warn">Answering from this device is off. Turn it on in Settings → Privacy & security on the machine running Leftoff, or use Go there.</div>'
   if (busy) h += '<div class="need-note">' + esc(busy) + '</div>'
+  if (opts.tail) h += opts.tail
   return h + '</article>'
 }
 
@@ -463,3 +477,152 @@ export function quickRepliesHtml(n, dis = '') {
   if (!list.length) return ''
   return '<div class="quick-replies" role="group" aria-label="Quick replies">' + list.map((t) => '<button type="button" class="qr" data-action="quick-reply" data-text="' + esc(t) + '"' + dis + '>' + esc(t) + '</button>').join('') + '</div>'
 }
+
+// ------------------------------------------------------------ the ask in Live (0.9.9)
+// On a session page with a Live composer, a waiting permission prompt or
+// question takes the composer's place at the bottom of Live (phone first: the
+// buttons are where the thumb and the keyboard were), one at a time ("1 of 3"),
+// and each ask also gets a short row in the thread where it happened, which
+// stays as history once it is answered. "Reply instead" brings the composer
+// back for a waiting ask (app.js keeps that per ask, on this page only).
+
+// Does this session's page dock its ask in Live (instead of the Needs-you strip above it)?
+export function askDocked(s) {
+  const n = s && s.needsYou
+  if (!n || !n.ask || (n.kind !== 'permission' && n.kind !== 'question')) return false
+  return liveBoxKind(s) === 'thread'
+}
+
+// What sits at the bottom of Live: 'dock' (the ask, in the composer's place),
+// 'slim' (you chose Reply instead: the composer, with one line about the ask
+// above it) or 'composer'. reply: the ask ids you chose to reply to instead.
+export function askBottom(s, reply = null) {
+  if (!askDocked(s)) return 'composer'
+  return reply && reply.has && reply.has(s.needsYou.ask.id) ? 'slim' : 'dock'
+}
+
+// "Run" -> "Wants to run" (waiting) / "Asked to run" (answered)
+export function askPhrase(verb, { done = false } = {}) {
+  const v = String(verb || '').trim()
+  if (!v) return done ? 'Asked to use a tool' : 'Wants to use a tool'
+  return (done ? 'Asked to ' : 'Wants to ') + v.charAt(0).toLowerCase() + v.slice(1)
+}
+
+// A command or path long enough to fold to three lines, with "Show all" to open it in place.
+export const ASK_LONG_CHARS = 110
+export const askIsLong = (detail) => { const t = String(detail || ''); return t.length > ASK_LONG_CHARS || t.split('\n').length > 3 }
+
+// "1 of 3" when more than one is waiting (answered in order: the next one shows when this one is answered).
+export function askCountHtml(n) {
+  const more = Number(n && n.more) || 0
+  if (more < 1) return ''
+  return '<span class="ask-count" aria-label="' + esc('1 of ' + (more + 1) + ' waiting') + '">1 of ' + esc(String(more + 1)) + '</span>'
+}
+
+const replyInsteadHtml = (askId) => '<button type="button" class="ask-reply-instead" data-action="ask-reply-instead" data-ask="' + esc(askId) + '">Reply instead</button>'
+
+// The card in the composer's place. opts: needPanel's, plus askOpen (Set of ask ids shown in full).
+export function askDockHtml(n, opts = {}) {
+  const s = n.session || {}
+  const askId = n.ask ? n.ask.id : ''
+  // a question: Needs you's own card (options, Other…, Send / Skip), in the dock
+  if (n.kind !== 'permission') return needPanel(n, { ...opts, compact: true, dockClass: 'ask-dock', countHtml: askCountHtml(n), tail: replyInsteadHtml(askId) })
+  const may = opts.mayAnswer !== false
+  const key = askId
+  const busy = opts.pending && opts.pending[key]
+  const dis = !may || busy ? ' disabled' : ''
+  const drafts = opts.drafts || {}
+  const d = n.ask.describe || {}
+  const detail = String(d.detail || '')
+  const long = askIsLong(detail)
+  const open = !!(opts.askOpen && opts.askOpen.has && opts.askOpen.has(askId))
+  const did = 'ask-detail-' + String(askId).replace(/[^A-Za-z0-9_-]/g, '')
+  const go0 = opts.goButton ? opts.goButton(s) : ''
+  const go = /\sdisabled[\s>=]/.test(go0) ? '' : go0 // a Go that can't go is a full row of nothing on a phone
+  let h = '<article class="need ask-dock k-permission' + (n.blocking ? ' blocking' : '') + '" data-id="' + esc(s.id) + '" data-ask="' + esc(askId) + '" data-key="' + esc(key) + '"' + (n.key ? ' data-need="' + esc(n.key) + '"' : '') + ' aria-label="Claude needs your OK">'
+  h += '<div class="need-head"><span class="need-dot" aria-hidden="true"></span>' +
+    (n.peer || (s.isLocal === false && s.machine) ? '<span class="chip machine remote" data-tip="answered on that machine, through its Leftoff">⌂ ' + esc(n.peer || s.machine) + '</span>' : '') +
+    '<span class="need-kind">' + esc(n.label || KIND_LABEL.permission) + '</span>' + askCountHtml(n) +
+    (n.waitSec != null ? '<span class="need-wait">' + esc(waitLabel(n.waitSec)) + '</span>' : '') + '</div>'
+  h += '<div class="ask-what"><div class="ask-verb">' + esc(askPhrase(d.verb || ('Use ' + (n.ask.tool || 'a tool')))) + (detail ? ':' : '') + '</div>' + (d.note ? '<div class="ask-note">' + esc(d.note) + '</div>' : '') +
+    (detail ? '<code class="ask-detail' + (long ? ' long' : '') + (open ? ' open' : '') + '" id="' + esc(did) + '">' + esc(detail) + '</code>' : '') +
+    (long ? '<button type="button" class="ask-more" data-action="ask-expand" data-ask="' + esc(askId) + '" aria-expanded="' + (open ? 'true' : 'false') + '" aria-controls="' + esc(did) + '">' + (open ? 'Show less' : 'Show all') + '</button>' : '') + '</div>'
+  h += '<div class="ask-actions">' +
+    '<button type="button" class="btn allow ask-allow" data-action="ask-answer" data-choice="allow"' + dis + ' aria-label="Allow once">Allow</button>' +
+    '<button type="button" class="btn deny ask-deny" data-action="ask-deny-open"' + dis + '>Deny…</button>' +
+    autoRestButton(s, dis) +
+    alwaysButton(n.ask, dis, { session: s, scope: 'dock' }) +
+    (n.ask.canAllowSession === false ? '' : '<button type="button" class="btn" data-action="ask-answer" data-choice="allow_session"' + dis + ' data-tip="Allow this and calls like it until this Claude Code session ends (kept to the session, never saved to settings)">Allow for this session</button>') +
+    go + '</div>'
+  h += '<div class="deny-form" hidden><input type="text" class="deny-note" maxlength="500" placeholder="Tell Claude why or what to do instead (optional)" value="' + esc(drafts['deny:' + askId] || '') + '" data-draft="deny:' + esc(askId) + '" data-submit="deny" aria-keyshortcuts="' + KBD_SUBMIT + '">' +
+    '<button type="button" class="btn deny" data-action="ask-answer" data-choice="deny" data-submit-for="deny"' + dis + '>Deny</button><button type="button" class="btn" data-action="ask-deny-close">Cancel</button></div>'
+  if (!may) h += '<div class="need-note warn">Answering from this device is off. Turn it on in Settings → Privacy & security on the machine running Leftoff, or use Go there.</div>'
+  if (busy) h += '<div class="need-note">' + esc(busy) + '</div>'
+  return h + replyInsteadHtml(askId) + '</article>'
+}
+
+// After "Reply instead": the composer is back, with one line above it that
+// says what is still waiting and brings the card back.
+export function askSlimHtml(n) {
+  const d = (n && n.ask && n.ask.describe) || {}
+  const what = n.kind === 'permission' ? askPhrase(d.verb || ('Use ' + ((n.ask && n.ask.tool) || 'a tool'))) + (d.detail ? ': ' + d.detail : '') : 'Asked: ' + ((((n.ask && n.ask.questions) || [])[0] || {}).question || 'a question')
+  return '<div class="ask-slim" data-ask="' + esc(n.ask ? n.ask.id : '') + '"><span class="need-dot" aria-hidden="true"></span><span class="ask-slim-t">' + esc(what) + '</span>' +
+    '<button type="button" class="btn ask-back" data-action="ask-back" data-ask="' + esc(n.ask ? n.ask.id : '') + '">Answer' + (Number(n.more) > 0 ? ' (' + esc(String(Number(n.more) + 1)) + ')' : '') + '</button></div>'
+}
+
+// The thread's rows: every ask of this session the board knows, waiting (the
+// card and the ones behind it) or answered from the board (the session's
+// answers list), each at the time Claude asked. -> [{ key, at, html }]
+const STATE_LABEL = { allow: 'Allowed', allow_session: 'Allowed for this session', allow_always: 'Always allowed here', deny: 'Denied', answer: 'Answered' }
+export function askRowState(a) {
+  if (!a) return 'Waiting'
+  if (a.auto) return 'Auto-approved'
+  if (a.kind === 'question' && a.action === 'deny') return 'Skipped'
+  return STATE_LABEL[a.action] || 'Answered'
+}
+function splitWhat(what) {
+  const t = String(what || '')
+  const i = t.indexOf(': ')
+  return i > 0 && i < 40 ? { verb: t.slice(0, i), detail: t.slice(i + 2) } : { verb: '', detail: t }
+}
+export function askRows(s) {
+  if (!s) return []
+  const rows = []
+  const seen = new Set()
+  const n = s.needsYou
+  const waiting = []
+  if (n && n.ask && (n.kind === 'permission' || n.kind === 'question')) {
+    waiting.push({ id: n.ask.id, kind: n.kind, since: n.since, describe: n.ask.describe || null, question: n.kind === 'question' ? (((n.ask.questions || [])[0] || {}).question || '') : null, first: true })
+    for (const q of n.queue || []) waiting.push(q)
+  }
+  for (const w of waiting) {
+    if (!w || !w.id || seen.has(w.id)) continue
+    seen.add(w.id)
+    rows.push({ key: 'ask:' + w.id, at: w.since || null, waiting: true, kind: w.kind, verb: w.describe ? w.describe.verb : '', detail: w.kind === 'question' ? w.question : (w.describe ? w.describe.detail : ''), state: 'Waiting' })
+  }
+  for (const a of s.answers || []) {
+    if (!a || (a.kind !== 'permission' && a.kind !== 'question')) continue
+    const id = a.askId || null
+    if (id && seen.has(id)) continue
+    if (id) seen.add(id)
+    const w = a.kind === 'question' ? { verb: '', detail: a.what || '' } : splitWhat(a.what)
+    rows.push({ key: 'ask:' + (id || 'a' + String(a.at || '')), at: a.askedAt || a.at || null, waiting: false, kind: a.kind, verb: w.verb, detail: w.detail, state: askRowState(a), note: a.action === 'deny' && a.summary && /“/.test(a.summary) ? a.summary.replace(/^Denied\s*/, '') : '' })
+  }
+  // answered ones carry what folds them (live-view.js slotHtml): their state and one line for a group of one
+  return rows.map((r) => ({ key: r.key, at: r.at, html: askRowHtml(r), ...(r.waiting ? {} : { fold: { state: r.state, kind: r.kind, line: askRowLine(r) } }) }))
+}
+// "Asked to run: cd ~/x && ls": the folded row's words when it holds one ask
+export function askRowLine(r) {
+  const what = r.kind === 'question' ? (r.waiting ? 'Asks you' : 'Asked you') : askPhrase(r.verb, { done: !r.waiting })
+  const d = String(r.detail || '').replace(/\s+/g, ' ').trim()
+  return what + (d ? ': ' + (d.length > 160 ? d.slice(0, 159) + '…' : d) : '')
+}
+const TONE = { Waiting: 'wait', Denied: 'no', Skipped: 'no', 'Auto-approved': 'auto' }
+export function askRowHtml(r) {
+  const what = r.kind === 'question' ? (r.waiting ? 'Asks you' : 'Asked you') : askPhrase(r.verb, { done: !r.waiting })
+  const sig = [r.state, r.detail, r.note].join('|')
+  let h32 = 5381; for (let i = 0; i < sig.length; i++) h32 = ((h32 << 5) + h32 + sig.charCodeAt(i)) | 0
+  return '<li class="lv-ask t-' + (TONE[r.state] || 'ok') + '" data-key="' + esc(r.key) + '" data-sig="' + (h32 >>> 0).toString(36) + '">' +
+    '<span class="lva-what"><span class="lva-verb">' + esc(what) + (r.detail ? ':' : '') + '</span>' + (r.detail ? ' <code>' + esc(String(r.detail).slice(0, 300)) + '</code>' : '') + '</span>' +
+    '<span class="lva-state">' + esc(r.waiting ? 'Waiting for you' : r.state) + (r.note ? ' ' + esc(r.note) : '') + '</span></li>'
+}