@leftoff/cli 0.9.8 → 0.9.9-beta.10

package/ui/needs.js

@@ -9,6 +9,8 @@
 
 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])
@@ -41,7 +43,7 @@ export function needsLine(n) {
 // Dismiss (0.6.5): hides this one need on every board; a new question shows again.
 export function dismissButton(n) {
   if (!n || !n.key) return ''
-  return '<button type="button" class="need-dismiss" data-action="need-dismiss" data-need="' + esc(n.key) + '" aria-label="Dismiss" title="Dismiss: hide this one (a new question shows again)">✕</button>'
+  return '<button type="button" class="need-dismiss" data-action="need-dismiss" data-need="' + esc(n.key) + '" aria-label="Dismiss" data-tip="Dismiss: hide this one (a new question shows again)">✕</button>'
 }
 
 const KIND_LABEL = { permission: 'Needs your OK', question: 'Question', terminal: 'Waiting in the terminal', reply: 'Asked you', agent: 'Waiting on you' }
@@ -86,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 || {}
@@ -97,12 +110,12 @@ 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" title="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>' +
-    (n.waitSec != null ? '<span class="need-wait" title="since ' + esc(n.since || '') + '">' + esc(waitLabel(n.waitSec)) + '</span>' : '') + dismissButton(n) + '</div>'
+    (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>' + (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) {
     const d = n.ask.describe || {}
@@ -112,7 +125,8 @@ export function needPanel(n, opts = {}) {
     h += '<div class="need-actions">' +
       '<button type="button" class="btn allow" data-action="ask-answer" data-choice="allow"' + dis + '>Allow once</button>' +
       alwaysButton(n.ask, dis, { session: s }) +
-      (n.ask.canAllowSession === false ? '' : '<button type="button" class="btn" data-action="ask-answer" data-choice="allow_session"' + dis + ' title="Allow this and calls like it until this Claude Code session ends (kept to the session, never saved to settings)">Allow for this session</button>') + // 0.9.8: Live link allows one call at a time
+      (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>'
@@ -123,14 +137,14 @@ export function needPanel(n, opts = {}) {
       h += '<div class="need-q" data-q="' + qi + '" data-multi="' + (q.multiSelect ? '1' : '') + '">' +
         '<div class="qtext">' + (q.header ? '<span class="qhead">' + esc(q.header) + '</span>' : '') + esc(q.question) + '</div>'
       if (q.options.length) {
-        h += '<div class="opts">' + q.options.map((o) => '<button type="button" class="btn opt" data-action="' + (oneTap ? 'ask-pick-send' : 'ask-pick') + '" data-label="' + esc(o.label) + '" aria-pressed="false"' + dis + (o.description ? ' title="' + esc(o.description) + '"' : '') + '>' + esc(o.label) + (o.description ? '<small>' + esc(o.description) + '</small>' : '') + '</button>').join('') + '</div>'
+        h += '<div class="opts">' + q.options.map((o) => '<button type="button" class="btn opt" data-action="' + (oneTap ? 'ask-pick-send' : 'ask-pick') + '" data-label="' + esc(o.label) + '" aria-pressed="false"' + dis + '>' + esc(o.label) + (o.description ? '<small>' + esc(o.description) + '</small>' : '') + '</button>').join('') + '</div>'
       }
       h += '<input type="text" class="qother" maxlength="500" placeholder="' + (q.options.length ? 'Or type your own answer' : 'Your answer') + '" value="' + esc(drafts['q:' + askId + ':' + qi] || '') + '" data-draft="q:' + esc(askId) + ':' + qi + '" data-submit="answer" aria-keyshortcuts="' + KBD_SUBMIT + '"' + (may ? '' : ' disabled') + '>'
       h += '</div>'
     })
     h += quickRepliesHtml(n, dis)
     h += '<div class="need-actions">' + (oneTap ? '' : '') + '<button type="button" class="btn primary" data-action="ask-answer" data-choice="answer" data-submit-for="answer"' + dis + '>' + (oneTap ? 'Send typed answer' : 'Send answers') + kbdHint(opts) + '</button>' +
-      '<button type="button" class="btn deny" data-action="ask-answer" data-choice="deny"' + dis + ' title="Decline to answer; Claude carries on without it">Skip</button>' + go + '</div>'
+      '<button type="button" class="btn deny" data-action="ask-answer" data-choice="deny"' + dis + ' data-tip="Decline to answer; Claude carries on without it">Skip</button>' + go + '</div>'
   } else if (n.kind === 'terminal') {
     h += '<div class="need-what"><span class="verb">Claude Code says</span><span>' + esc(n.message || '') + '</span></div>' +
       '<div class="need-note">This one can only be answered in the terminal.' + (n.peerNote ? ' ' + esc(n.peerNote) + '.' : '') + '</div><div class="need-actions">' + go + '</div>'
@@ -138,14 +152,19 @@ export function needPanel(n, opts = {}) {
     h += '<blockquote class="need-question">' + esc(n.question || '') + '</blockquote>'
     if (n.replyPending) h += '<div class="need-note ok">Reply sent ' + esc(opts.agoFn ? opts.agoFn(n.replyPending.at) : '') + ': “' + esc(n.replyPending.text) + '”. Claude reads it as its next prompt.</div>'
     if (n.canReply) {
-      h += '<div class="reply-row"><textarea class="reply-text" rows="2" maxlength="4000" placeholder="Reply to Claude…" data-draft="reply:' + esc(s.id) + '" data-submit="reply" aria-keyshortcuts="' + KBD_SUBMIT + '"' + (may ? '' : ' disabled') + '>' + esc(drafts['reply:' + s.id] || '') + '</textarea>' +
-        '<button type="button" class="btn primary" data-action="reply-send" data-submit-for="reply"' + dis + '>Send' + kbdHint(opts) + '</button></div>' + quickRepliesHtml(n, dis) + '<div class="need-actions">' + go + '</div>'
+      // 0.9.8: the same composer as Live (ui/composer.js): rounded box, round ↑,
+      // Enter sends on a Mac (⌘↵ everywhere). A reply is text only (Claude reads
+      // it as its next prompt), so there is no 📎 here.
+      h += composerBoxHtml({ submit: 'reply', sendAction: 'reply-send', sid: s.id, draftKey: 'reply:' + s.id, draft: drafts['reply:' + s.id] || '',
+        may, busy: !!busy, placeholder: 'Reply to Claude…', label: 'Reply to Claude', boxClass: 'reply-composer', inputClass: 'reply-text',
+        attach: false, keys: opts.composerKeys || KBD_SUBMIT }) + quickRepliesHtml(n, dis) + '<div class="need-actions">' + go + '</div>'
     } else {
       h += '<div class="need-note">' + esc(n.why ? 'No reply box: ' + n.why + '.' : '') + '</div><div class="need-actions">' + go + '</div>'
     }
   }
   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>'
 }
 
@@ -191,8 +210,8 @@ export function agentChipHtml(a = {}, { title } = {}) {
   const inner = esc(a.icon || '◆') + ' ' + esc(who)
   const t = esc(title || 'external agent · read-only')
   const url = httpsOnly(a.url)
-  return url ? '<a class="chip machine agent" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer" title="' + t + '">' + inner + '</a>'
-    : '<span class="chip machine agent" title="' + t + '">' + inner + '</span>'
+  return url ? '<a class="chip machine agent" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer" data-tip="' + t + '">' + inner + '</a>'
+    : '<span class="chip machine agent" data-tip="' + t + '">' + inner + '</span>'
 }
 // "From Tab · reply by texting Tab", or "From Tab · Read-only here".
 export function agentReplyNote(a = {}) {
@@ -408,7 +427,7 @@ export function prCardHtml(pr) {
   const inner = '<span class="pr-top"><span class="pr-num">#' + esc(pr.number) + '</span><span class="pr-state ' + esc(pr.state || 'open') + '">' + (pr.state === 'draft' ? 'Draft' : 'Open') + '</span>' +
     (ck.summary ? '<span class="pr-checks ' + cls + '">' + (icon ? '<span aria-hidden="true">' + icon + '</span> ' : '') + esc(ck.summary) + '</span>' : '') + '</span>' +
     '<span class="pr-title">' + esc(pr.title || '') + '</span>'
-  return url ? '<a class="need-pr" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer" title="Open the pull request on GitHub">' + inner + '<span class="pr-go" aria-hidden="true">↗</span></a>'
+  return url ? '<a class="need-pr" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer" data-tip="Open the pull request on GitHub">' + inner + '<span class="pr-go" aria-hidden="true">↗</span></a>'
     : '<div class="need-pr">' + inner + '</div>'
 }
 
@@ -458,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>'
+}