@leftoff/cli 0.9.8 → 0.9.9-beta.10

package/ui/composer.js

@@ -4,7 +4,8 @@
 // something to send. On a Mac (a fine pointer) Enter sends and Shift+Enter is a
 // new line; on a phone or tablet Return is a new line and the button sends.
 // ⌘↵ / Ctrl+↵ sends everywhere. Pure functions here (shared with the unit
-// tests); app.js wires them to the page.
+// tests); app.js wires them to the page. composerBoxHtml() is the box's markup,
+// shared by Live and the Needs-you Reply card (ui/needs.js).
 
 export const COMPOSER_MAX_LINES = 8
 
@@ -33,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.
@@ -44,3 +57,40 @@ export function composerHeight({ scrollHeight = 0, lineHeight = 22, padY = 0, ma
   const want = Math.ceil(Number(scrollHeight) || 0)
   return { height: Math.max(min, Math.min(want, max)), scroll: want > max + 1 }
 }
+
+// The box's markup (Live and the Needs-you Reply card: one look, one
+// behaviour). Pure: the caller hands in what it knows.
+//   submit: the data-submit / data-submit-for pair ('live' | 'reply')
+//   sendAction: the ↑'s data-action ('live-send' | 'reply-send')
+//   draftKey, draft: the textarea's data-draft key and its text
+//   may: answering from this device is allowed (false: everything disabled)
+//   busy: a send is in flight (the ↑ stays disabled)
+//   placeholder, label: the textarea's placeholder and aria-label
+//   inputClass: extra class(es) on the textarea (the app's own hooks)
+//   sid: the session; on the box as data-sid only when attach is on (the
+//        attachment code finds a session's composer by it)
+//   attach: show the 📎 and the hidden file input; atts: its chips ([]),
+//   chipHtml: chip -> markup
+//   keys: the textarea's aria-keyshortcuts
+// Tooltips are the board's styled data-tip (never title=); aria-label stays.
+export const SEND_IC = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>'
+export const CLIP_IC = '<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="m21.4 11.1-8.9 8.9a5.5 5.5 0 0 1-7.8-7.8l8.9-8.9a3.7 3.7 0 0 1 5.2 5.2l-8.9 8.9a1.8 1.8 0 0 1-2.6-2.6l8.2-8.2"/></svg>'
+const escA = (v) => String(v == null ? '' : v).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')
+export function composerBoxHtml(o = {}) {
+  const may = o.may !== false
+  const atts = o.attach && Array.isArray(o.atts) ? o.atts : []
+  const sid = o.sid == null ? '' : String(o.sid)
+  const off = !may || o.busy || (isBlank(o.draft) && !atts.length)
+  const submit = escA(o.submit || 'live')
+  const label = o.label || o.placeholder || 'Message'
+  const dis = may ? '' : ' disabled'
+  return '<div class="composer' + (o.boxClass ? ' ' + escA(o.boxClass) : '') + (may ? '' : ' off') + (atts.length ? ' has-atts' : '') + '"' + (o.attach && sid ? ' data-sid="' + escA(sid) + '"' : '') + '>' +
+    (o.attach ? '<div class="att-chips" aria-label="Attachments"' + (atts.length ? '' : ' hidden') + '>' + atts.map(o.chipHtml || (() => '')).join('') + '</div>' : '') +
+    '<textarea class="composer-input' + (o.inputClass ? ' ' + escA(o.inputClass) : '') + '" rows="1" maxlength="' + (Number(o.maxlength) || 4000) + '" placeholder="' + escA(o.placeholder || '') + '" aria-label="' + escA(label) + '" autocomplete="off" data-draft="' + escA(o.draftKey || '') + '" data-submit="' + submit + '"' + (o.keys ? ' aria-keyshortcuts="' + escA(o.keys) + '"' : '') + dis + '>' + escA(o.draft || '') + '</textarea>' +
+    (o.attach
+      // the phone's own picker (Photo Library, Take Photo, Choose File): any file
+      ? '<input type="file" class="att-input" multiple tabindex="-1" aria-hidden="true" data-sid="' + escA(sid) + '"' + dis + '>' +
+        '<button type="button" class="composer-attach" data-action="attach" data-id="' + escA(sid) + '" aria-label="Attach" data-tip="Attach photos or files"' + dis + '><span class="composer-clip">' + CLIP_IC + '</span></button>'
+      : '') +
+    '<button type="button" class="composer-send" data-action="' + escA(o.sendAction || 'live-send') + '" data-submit-for="' + submit + '" data-id="' + escA(sid) + '" aria-label="Send" data-tip="Send"' + (off ? ' disabled' : '') + '><span class="composer-dot">' + SEND_IC + '</span></button></div>'
+}

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('|')
 }