@leftoff/cli 0.9.9-beta.6 → 0.9.9-beta.8

package/ui/live-status.js

@@ -16,6 +16,9 @@
 //   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). 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 +30,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 } return s }
+  if (s.queued && !KEEPS_QUEUED.has(ev.type)) { delete s.queued; delete s.cancellable }
   switch (ev.type) {
+    case 'queued': if (s.phase === 'sent' || s.phase === 'received') { s.queued = true; s.cancellable = !!ev.cancellable } 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 +64,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,7 +218,7 @@ 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
@@ -220,13 +237,16 @@ 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) : '')
+  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)) + '"><div class="lv-who"' + (title ? ' title="' + esc(title) + '"' : '') + '>' + esc(who) + ' ' + timeHtml(m.at, { esc, now }) + '</div>' + body + foot + '</li>'
 }
 
 const FINAL_PHASES = new Set(['replied', 'failed', 'stopped'])
@@ -242,6 +262,19 @@ 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: "Queued", then
+// Edit and Cancel where Leftoff can truly take it back (a session Leftoff runs,
+// and you may send from this device), else the plain fact. No tooltip.
+export function queuedHtml(m, { esc, may = true }) {
+  const st = m.status || {}
+  const id = esc(m.id || '')
+  const acts = st.cancellable && may
+    ? '<span class="lv-q-acts"><button type="button" class="btn lv-q-btn" data-action="lv-queued-edit" data-msg="' + id + '" aria-label="Edit this queued message">Edit</button>' +
+      '<button type="button" class="btn lv-q-btn" data-action="lv-queued-cancel" data-msg="' + id + '" aria-label="Cancel this queued message">Cancel</button></span>'
+    : '<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>'
+}
+
 // "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,16 +328,39 @@ 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".
 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 = 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 upTo = (at) => { let h = ''; while (k < ins.length && ins[k].t != null && at != null && ins[k].t < at) h += ins[k++].html; return h }
+  // 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) => {
+    html += upTo(t(m.at))
+    if (m.from === 'claude') { const you = m.replyTo ? byId.get(m.replyTo) : null; html += entryHtml(m, { ...opts, status: you && you.status ? you.status : null }); return }
     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
+      const next = i + 1 < rest.length ? t(rest[i + 1].at) : null
+      html += upTo(next == null ? Infinity : next)
+      html += pendingClaudeHtml(m, opts)
+    }
+  })
+  while (k < ins.length) html += ins[k++].html
+  for (const m of waiting) html += entryHtml(m, opts)
   return html
 }
 
@@ -325,7 +381,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.done, m.ranWithoutAsking, m.errorText]) }
 
 // ------------------------------------------------------------ the DOM keeper
 

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,145 @@ 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*/, '') : '' })
+  }
+  return rows.map((r) => ({ key: r.key, at: r.at, html: askRowHtml(r) }))
+}
+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>'
+}