@leftoff/cli 0.9.8-beta.10 → 0.9.8-beta.12

package/ui/app.js

@@ -12,6 +12,10 @@ import { inStatus, repoChips, applyFilter, readFilter, saveRepos, filterHash, to
 import { navKey, moreActive, badgeText, quickLookItems, quickLookHtml } from './nav.js'
 import { canStartPull, pullStep, pullRelease } from './pull.js'
 import { navHideStep, NAVHIDE_TYPING } from './navhide.js'
+import { openLightbox } from './lightbox.js' // 0.9.8: the image preview
+import { openPdfView, pdfThumb } from './pdfview.js' // 0.9.8: the PDF preview (pdf.js loads on the first PDF)
+import { isBlank, composerKey, isTouchUi, composerHeight } from './composer.js' // 0.9.8 the Live composer
+import { attachPlan, skippedText, shortName, prepareFile, uploadFile, fetchAttachment, fmtSize, attachKind, pastedName, ATTACH_MAX_FILES } from './attach.js' // 0.9.8 attachments
 import { wireTips } from './tips.js'
 import { needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer, turnsHtml, dismissedHtml } from './needs.js'
 import { SUMMARY_EXAMPLES, LENGTH_CHOICES } from './summary-examples.js'
@@ -1319,11 +1323,34 @@ function sessionShellHtml(s) {
     '<div class="s-skel" role="status" aria-live="polite" aria-busy="true"><div class="s-skel-note"><span class="lv-spin" aria-hidden="true"></span>Opening…</div>' +
     '<div class="skel-line"></div><div class="skel-line short"></div><div class="skel-block"></div><div class="skel-line"></div><div class="skel-line short"></div></div>'
 }
+// A selector that finds the same control again after a redraw (null: it can't be told apart).
+function focusKey(el) {
+  if (!el || !el.tagName) return null
+  if (el.id) return '#' + CSS.escape(el.id)
+  const d = el.dataset || {}
+  const keys = ['action', 'lid', 'sid', 'att', 'id', 'tab', 'submitFor'].filter((k) => d[k] != null)
+  if (!keys.length) return null
+  const attr = (k) => '[data-' + k.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase()) + '="' + CSS.escape(d[k]) + '"]'
+  return el.tagName.toLowerCase() + keys.map(attr).join('')
+}
 function paintSession(s, data) {
   if (data.live && !data.live.error) liveUi.sig[s.id] = liveSignature(data.live.messages)
+  // a redraw (the live poll, a settled reply) keeps the composer focused with its caret where it was
+  const fa = document.activeElement
+  const kf = fa && fa.classList && fa.classList.contains('composer-input') && $app.contains(fa) ? { d: fa.dataset.draft, a: fa.selectionStart, b: fa.selectionEnd } : null
+  // …and any other control that had focus (a chip, a thumbnail, a button: a
+  // preview closed with Esc puts focus back on one, then a redraw replaced it)
+  const kb = !kf && fa && fa !== document.body && $app.contains(fa) ? focusKey(fa) : null
   liveKeeper.before($app)
   $app.innerHTML = sessionPageHtml(s, data)
   liveAfterRender(s.id)
+  if (kf) {
+    const nt = $app.querySelector('.composer-input')
+    if (nt && nt.dataset.draft === kf.d && !nt.disabled) { nt.focus({ preventScroll: true }); try { const n = nt.value.length; nt.setSelectionRange(Math.min(kf.a, n), Math.min(kf.b, n)) } catch {} }
+  } else if (kb && !$app.contains(document.activeElement)) {
+    const hits = $app.querySelectorAll(kb)
+    if (hits.length === 1 && !hits[0].disabled) hits[0].focus({ preventScroll: true })
+  }
   aroundWire(s.id)
 }
 async function viewSession(id) {
@@ -1461,17 +1488,343 @@ function liveBoxHtml(s, v) {
   if (lastClaude) markLiveSeen(s.id, lastClaude.at)
   return '<section class="live-box" id="live" aria-label="Live link" data-id="' + esc(s.id) + '"><div class="live-head"><h2>Live</h2><span class="faint">Goes straight into this session' + (s.isLocal === false ? ' on ' + esc(s.machine) : '') + '. Claude reads it as its next prompt.</span></div>' +
     '<div class="live-thread" data-sid="' + esc(s.id) + '"><ol class="live-log" aria-live="polite" aria-label="Messages with this session">' +
-      earlierHtml((v && v.earlier) || 0, { esc }) + threadHtml(msgs, { esc, ago, md: renderDoc, now }) + '</ol>' +
+      earlierHtml((v && v.earlier) || 0, { esc }) + threadHtml(msgs, { esc, ago, md: renderDoc, now, attHtml: (atts) => attBubbleHtml(atts, s.id) }) + '</ol>' +
       '<p class="faint live-empty"' + (msgs.length ? ' hidden' : '') + '>Nothing sent yet. Claude answers here and in the terminal.</p>' +
       '<button type="button" class="live-jump" data-action="live-jump" hidden>Jump to latest ↓<span class="live-jump-n"></span></button></div>' +
     (v && v.error ? '<p class="live-err">' + esc(v.error) + '</p>' : '') +
-    '<div class="reply-row live-row"><textarea class="reply-text live-text" rows="2" maxlength="4000" placeholder="Message this session…" aria-label="Message this session" data-draft="live:' + esc(s.id) + '" data-submit="live" aria-keyshortcuts="' + (/Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent) ? 'Meta+Enter' : 'Control+Enter') + '"' + (may ? '' : ' disabled') + '>' + esc(draft) + '</textarea>' +
-    '<button type="button" class="btn primary" data-action="live-send" data-submit-for="live" data-id="' + esc(s.id) + '"' + (may ? '' : ' aria-disabled="true"') + '>Send</button></div>' +
+    composerHtml(s, draft, may) +
     (may ? '' : '<p class="faint">Sending from another device is off. On a Mac, turn on Settings → Privacy &amp; security → Trust my paired devices.</p>') + '</section>'
 }
+// The Live composer: one rounded box, a textarea that starts at one line and
+// grows, and a round ↑ in its corner (dim until there's something to send).
+// No interrupt reaches Claude Code from the board, so while it works the
+// button still sends: the message waits for its next turn, as before.
+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>'
+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 FILE_IC = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>'
+function composerHtml(s, draft, may) {
+  const kbd = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent) ? 'Meta+Enter' : 'Control+Enter'
+  const atts = attachList(s.id)
+  const off = !may || (isBlank(draft) && !atts.length)
+  return '<div class="composer live-row' + (may ? '' : ' off') + (atts.length ? ' has-atts' : '') + '" data-sid="' + esc(s.id) + '">' +
+    '<div class="att-chips" aria-label="Attachments"' + (atts.length ? '' : ' hidden') + '>' + atts.map(chipHtml).join('') + '</div>' +
+    '<textarea class="composer-input live-text" rows="1" maxlength="4000" placeholder="Message this session…" aria-label="Message this session" autocomplete="off" data-draft="live:' + esc(s.id) + '" data-submit="live" aria-keyshortcuts="' + (isTouchUi(window.matchMedia) ? kbd : 'Enter ' + kbd) + '"' + (may ? '' : ' disabled') + '>' + esc(draft) + '</textarea>' +
+    // 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="' + esc(s.id) + '"' + (may ? '' : ' disabled') + '>' +
+    '<button type="button" class="composer-attach" data-action="attach" data-id="' + esc(s.id) + '" aria-label="Attach" title="Attach photos or files"' + (may ? '' : ' disabled') + '><span class="composer-clip">' + CLIP_IC + '</span></button>' +
+    '<button type="button" class="composer-send" data-action="live-send" data-submit-for="live" data-id="' + esc(s.id) + '" aria-label="Send" title="Send"' + (off ? ' disabled' : '') + '><span class="composer-dot">' + SEND_IC + '</span></button></div>'
+}
+
+// ------------------------------------------------------------ attachments (0.9.8, ui/attach.js)
+// Each file uploads to the Mac that runs the session as soon as you attach it;
+// the chips live here (not in the DOM), so a redraw of the page keeps them.
+const attachUi = { by: new Map(), urls: new Map(), blobs: new Map(), loading: new Map(), seq: 0, running: 0, queue: [] }
+const attachList = (sid) => attachUi.by.get(sid) || []
+function chipHtml(a) {
+  const pct = a.total ? Math.min(100, Math.round((a.sent / a.total) * 100)) : 0
+  const status = a.status === 'failed' ? 'Didn’t upload' : a.status === 'done' ? fmtSize(a.size) : a.status === 'prep' ? 'Preparing…' : fmtSize(a.size) + ' · ' + pct + '%'
+  return '<div class="att-chip ' + esc(a.status) + '" data-lid="' + esc(a.lid) + '"' + (a.error ? ' title="' + esc(a.error) + '"' : '') + '>' +
+    '<button type="button" class="att-open" data-action="att-chip-open" data-lid="' + esc(a.lid) + '" aria-label="Preview ' + esc(a.name) + '">' +
+    '<span class="att-thumb">' + (a.preview ? '<img src="' + esc(a.preview) + '" alt="">' : FILE_IC) + '</span>' +
+    '<span class="att-meta"><span class="att-name" title="' + esc(a.name) + '">' + esc(shortName(a.name)) + '</span><span class="att-size">' + esc(status) + '</span></span></button>' +
+    (a.status === 'failed' ? '<button type="button" class="att-btn att-retry" data-action="att-retry" data-lid="' + esc(a.lid) + '" aria-label="Retry ' + esc(a.name) + '" title="Retry">↻</button>' : '') +
+    '<button type="button" class="att-btn att-x" data-action="att-remove" data-lid="' + esc(a.lid) + '" aria-label="Remove ' + esc(a.name) + '" title="Remove">×</button>' +
+    (a.status === 'up' || a.status === 'prep' ? '<span class="att-bar" aria-hidden="true"><span data-pct="' + pct + '"></span></span>' : '') + '</div>'
+}
+// The board's CSP takes no inline styles: a progress bar's width is set here.
+function barWidths(root) { for (const b of root.querySelectorAll('.att-bar > span[data-pct]')) b.style.width = b.dataset.pct + '%' }
+// Redraw one session's chips in place (and the ↑'s state).
+function paintChips(sid) {
+  const box = document.querySelector('.composer[data-sid="' + CSS.escape(sid) + '"]')
+  if (!box) return
+  const atts = attachList(sid)
+  const wrap = box.querySelector('.att-chips')
+  const fa = wrap.contains(document.activeElement) ? focusKey(document.activeElement) : null // a progress tick keeps the chip you're on focused
+  wrap.innerHTML = atts.map(chipHtml).join('')
+  if (fa) { const t = wrap.querySelector(fa); if (t) t.focus({ preventScroll: true }) }
+  barWidths(wrap)
+  wrap.hidden = !atts.length
+  box.classList.toggle('has-atts', !!atts.length)
+  const ta = box.querySelector('.composer-input')
+  if (ta) syncComposer(ta)
+}
+function addFiles(sid, files, { pasted = false } = {}) {
+  const list = Array.from(files || []).filter(Boolean)
+  if (!sid || !list.length) return
+  const have = attachList(sid)
+  const plan = attachPlan(list, have.length)
+  if (plan.skipped.length) toast('Not attached: ' + skippedText(plan.skipped), 4200)
+  const add = plan.take.map((f) => {
+    const file = pasted && /^image\.\w+$|^$/.test(f.name || '') ? new File([f], pastedName(f.type), { type: f.type, lastModified: Date.now() }) : f
+    return { lid: 'a' + (++attachUi.seq), sid, file, name: file.name || 'file', size: file.size, type: file.type || '', kind: attachKind(file), status: 'prep', sent: 0, total: file.size, id: null, preview: null, thumb: null, error: null }
+  })
+  if (!add.length) return
+  attachUi.by.set(sid, [...have, ...add])
+  paintChips(sid)
+  try { promoteActive() } catch {}
+  for (const a of add) startUpload(a)
+}
+function startUpload(a) {
+  a.status = 'prep'; a.error = null; a.sent = 0
+  attachUi.queue.push(a); pumpUploads()
+}
+// Three at a time: a phone on a slow line shouldn't open ten uploads at once.
+function pumpUploads() {
+  while (attachUi.running < 3 && attachUi.queue.length) {
+    const a = attachUi.queue.shift()
+    if (!attachList(a.sid).includes(a)) continue
+    attachUi.running++
+    runUpload(a).finally(() => { attachUi.running--; pumpUploads() })
+  }
+}
+async function runUpload(a) {
+  const gone = () => !attachList(a.sid).includes(a)
+  try {
+    if (!a.prepared) {
+      const p = await prepareFile(a.file)
+      a.prepared = p.file; a.thumb = p.thumb
+      a.name = p.file.name || a.name; a.size = p.file.size; a.total = p.file.size; a.type = p.file.type || a.type
+      if (attachKind(p.file) === 'image' && !a.preview && p.thumb) a.preview = 'data:image/jpeg;base64,' + p.thumb
+      // a PDF's first page, for its chip and its bubble (a few seconds at most; without it, the file icon)
+      if (attachKind(p.file) === 'pdf' && !a.thumb) {
+        const t = await Promise.race([pdfThumb(p.file), new Promise((r) => setTimeout(() => r(null), 5000))]).catch(() => null)
+        if (t) { a.thumb = t; a.preview = 'data:image/jpeg;base64,' + t }
+      }
+      if (p.note === 'heic') a.error = 'This browser can’t convert HEIC; it goes as is'
+    }
+    if (gone()) return
+    a.status = 'up'; paintChips(a.sid)
+    let last = 0
+    const f = await uploadFile({ api, sessionId: a.sid, file: a.prepared, thumb: a.thumb, isCancelled: gone,
+      onProgress: (sent, total) => { a.sent = sent; a.total = total; const t = Date.now(); if (t - last > 120 || sent >= total) { last = t; paintChips(a.sid) } } })
+    a.id = f.id; a.size = f.size; a.kind = f.kind; a.status = 'done'
+    if (a.preview) attachUi.urls.set(a.sid + '/' + f.id, a.preview) // the bubble shows it without asking the Mac
+  } catch (e) {
+    if (e.code === 'removed' || gone()) return
+    a.status = 'failed'; a.error = e.message || 'Upload failed'
+  }
+  paintChips(a.sid)
+  attachWaiters()
+}
+let attachWaitList = []
+function attachWaiters() { const w = attachWaitList; attachWaitList = []; for (const f of w) f() }
+// Wait until nothing of this session's is still uploading.
+async function uploadsSettled(sid) {
+  while (attachList(sid).some((a) => a.status === 'prep' || a.status === 'up')) await new Promise((r) => { attachWaitList.push(r); setTimeout(r, 1000) })
+}
+function removeAttachment(lid) {
+  for (const [sid, list] of attachUi.by) {
+    const a = list.find((x) => x.lid === lid)
+    if (!a) continue
+    attachUi.by.set(sid, list.filter((x) => x !== a))
+    paintChips(sid)
+    const ta = document.querySelector('.composer[data-sid="' + CSS.escape(sid) + '"] .composer-input')
+    if (ta && !isTouchUi(window.matchMedia)) ta.focus({ preventScroll: true })
+    return
+  }
+}
+function retryAttachment(lid) {
+  for (const list of attachUi.by.values()) { const a = list.find((x) => x.lid === lid); if (a) { startUpload(a); paintChips(a.sid); return } }
+}
+// The composer a drop or a paste is for: the session page's own (enabled).
+function composerFor(el) {
+  const box = (el && el.closest && el.closest('.composer')) || document.querySelector('#app .composer[data-sid]')
+  return box && !box.classList.contains('off') ? box : null
+}
+document.addEventListener('change', (ev) => {
+  const inp = ev.target
+  if (!inp || !inp.classList || !inp.classList.contains('att-input')) return
+  addFiles(inp.dataset.sid, inp.files)
+  inp.value = '' // the same file can be picked again
+})
+document.addEventListener('paste', (ev) => {
+  const t = ev.target
+  const inComposer = t && t.classList && t.classList.contains('composer-input')
+  if (!inComposer && t && t.closest && t.closest('input, textarea, [contenteditable]')) return
+  const cd = ev.clipboardData
+  const files = cd ? Array.from(cd.files || []).length ? Array.from(cd.files) : Array.from(cd.items || []).filter((i) => i.kind === 'file').map((i) => i.getAsFile()).filter(Boolean) : []
+  if (!files.length) return
+  const box = composerFor(inComposer ? t : null)
+  if (!box) return
+  ev.preventDefault()
+  addFiles(box.dataset.sid, files, { pasted: true })
+})
+{
+  // Drag files onto the session page: the box lights up; drop attaches.
+  const hasFiles = (e) => !!(e.dataTransfer && Array.from(e.dataTransfer.types || []).includes('Files'))
+  let leaveT = 0
+  const lit = (on) => { const b = document.querySelector('#app .composer[data-sid]'); if (b) b.classList.toggle('att-drop', on) }
+  document.addEventListener('dragover', (e) => { if (!hasFiles(e) || !composerFor(null)) return; e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; lit(true); clearTimeout(leaveT); leaveT = setTimeout(() => lit(false), 300) })
+  document.addEventListener('drop', (e) => {
+    if (!hasFiles(e)) return
+    const box = composerFor(null)
+    e.preventDefault() // never let a stray drop navigate away from the board
+    lit(false)
+    if (box) addFiles(box.dataset.sid, e.dataTransfer.files)
+  })
+}
+// A sent message's attachments in its bubble: thumbnails (tap for full size) or file chips.
+function attBubbleHtml(atts, sid) {
+  return '<div class="lv-atts">' + atts.map((a) => {
+    const s0 = a.sessionId || sid, key = s0 + '/' + a.id
+    const label = esc(a.name) + ' · ' + esc(a.size != null ? fmtSize(a.size) : a.sizeLabel || '')
+    const data = ' data-action="att-open" data-sid="' + esc(s0) + '" data-att="' + esc(a.id) + '" data-name="' + esc(a.name) + '" data-kind="' + esc(a.kind) + '" data-thumb="' + (a.thumb === false ? '0' : '1') + '" data-size="' + esc(a.size != null ? fmtSize(a.size) : a.sizeLabel || '') + '"'
+    if (a.kind === 'image') { const u = attachUi.urls.get(key); return '<button type="button" class="lv-att lv-att-img"' + data + ' aria-label="Open ' + esc(a.name) + '" title="' + label + '"><img alt="' + esc(a.name) + '" data-att-thumb="' + esc(key) + '"' + (u ? ' src="' + esc(u) + '"' : '') + '></button>' }
+    const firstPage = a.kind === 'pdf' && a.thumb !== false ? '<img alt="" data-att-thumb="' + esc(key) + '"' + (attachUi.urls.get(key) ? ' src="' + esc(attachUi.urls.get(key)) + '"' : '') + '>' : '' // its first page, when there is one
+    return '<button type="button" class="lv-att lv-att-file"' + data + ' aria-label="Open ' + esc(a.name) + '" title="' + label + '"><span class="att-thumb' + (firstPage ? ' att-thumb-pdf' : '') + '">' + FILE_IC + firstPage + '</span><span class="att-meta"><span class="att-name">' + esc(a.name) + '</span><span class="att-size">' + esc(a.size != null ? fmtSize(a.size) : a.sizeLabel || '') + '</span></span></button>'
+  }).join('') + '</div>'
+}
+// Thumbnails come from the Mac once, then from memory. data: URLs, because the
+// board's CSP allows images from itself and data: only (no blob:).
+const blobToDataUrl = (b) => new Promise((resolve, reject) => { const r = new FileReader(); r.onload = () => resolve(r.result); r.onerror = () => reject(r.error || new Error('unreadable')); r.readAsDataURL(b) })
+function attData(sid, id, { thumb = false } = {}) {
+  const key = sid + '/' + id + (thumb ? '' : '#full')
+  if (attachUi.urls.has(key)) return Promise.resolve({ url: attachUi.urls.get(key), blob: attachUi.blobs.get(key) || null })
+  if (attachUi.loading.has(key)) return attachUi.loading.get(key)
+  const p = fetchAttachment({ api, sessionId: sid, id, thumb }).then(async (b) => { const url = await blobToDataUrl(b); attachUi.urls.set(key, url); attachUi.blobs.set(key, b); return { url, blob: b } }).finally(() => attachUi.loading.delete(key))
+  attachUi.loading.set(key, p)
+  return p
+}
+function hydrateAttThumbs() {
+  for (const img of document.querySelectorAll('#app img[data-att-thumb]:not([src])')) {
+    const key = img.dataset.attThumb
+    if (attachUi.urls.has(key)) { img.src = attachUi.urls.get(key); continue }
+    const btn = img.closest('.lv-att'); if (!btn || btn.dataset.loading) continue
+    btn.dataset.loading = '1'
+    const thumb = btn.dataset.thumb !== '0'
+    attData(btn.dataset.sid, btn.dataset.att, { thumb }).then(({ url }) => { attachUi.urls.set(key, url); for (const i of document.querySelectorAll('#app img[data-att-thumb="' + CSS.escape(key) + '"]')) i.src = url })
+      .catch((e) => {
+        // a PDF sent without a first-page picture (before 0.9.8, or it couldn't be drawn) keeps its icon
+        if (btn.dataset.kind === 'pdf' && e && e.code === 'no_thumb') { for (const i of btn.querySelectorAll('img[data-att-thumb]')) i.remove(); return }
+        btn.classList.add('gone'); btn.title = 'Not on that Mac any more'
+      })
+  }
+}
+// An image opens full screen (ui/lightbox.js) with the other pictures of the
+// same message beside it; the thumbnail shows (blurred) while the full one
+// comes from the Mac. Text and other files keep the docs viewer.
+const attSel = (sid, id) => '.lv-att[data-sid="' + CSS.escape(sid) + '"][data-att="' + CSS.escape(id) + '"]'
+function openImageAttachment(btn) {
+  const group = btn.closest('.lv-atts')
+  const btns = group ? [...group.querySelectorAll('.lv-att[data-kind="image"]')] : [btn]
+  const items = btns.map((b) => {
+    const im = b.querySelector('img'), sid = b.dataset.sid, id = b.dataset.att
+    const full = attachUi.urls.get(sid + '/' + id + '#full')
+    return { name: b.dataset.name || 'image', sizeLabel: b.dataset.size || '', thumb: (im && im.getAttribute('src')) || null, url: full || null,
+      w: im && im.naturalWidth, h: im && im.naturalHeight, load: () => attData(sid, id).then((r) => r.url) }
+  })
+  const sid = btn.dataset.sid, id = btn.dataset.att
+  openLightbox({ items, index: Math.max(0, btns.indexOf(btn)), from: btn.querySelector('img') || btn, refocus: () => document.querySelector('#app ' + attSel(sid, id)) || btn })
+}
+// A chip in the box before it's sent: the picture from the file you picked
+// (a data: URL; the CSP takes no blob:), the other pictures in the box beside it.
+// Any other file: its name and size in the docs viewer (nothing to download yet).
+function openChip(lid) {
+  let a = null
+  for (const list of attachUi.by.values()) { a = list.find((x) => x.lid === lid); if (a) break }
+  if (!a) return
+  const chip = document.querySelector('.att-open[data-lid="' + CSS.escape(lid) + '"]')
+  const isImg = (x) => x.kind === 'image' && (x.preview || /^image\/(png|jpeg|gif|webp|bmp|svg\+xml|avif)$/i.test((x.prepared || x.file || {}).type || ''))
+  const refocus = () => document.querySelector('.att-open[data-lid="' + CSS.escape(lid) + '"]')
+  if (a.kind === 'pdf') {
+    const f = a.prepared || a.file
+    openPdfView({ name: a.name, sizeLabel: fmtSize(a.size), download: false, from: chip, refocus, load: async () => ({ bytes: new Uint8Array(await f.arrayBuffer()) }) })
+    return
+  }
+  if (isImg(a)) {
+    const list = attachList(a.sid).filter(isImg)
+    const items = list.map((x) => ({ name: x.name, sizeLabel: fmtSize(x.size), thumb: x.preview || null, download: false,
+      load: () => { if (!x.fullUrl) x.fullUrl = blobToDataUrl(x.prepared || x.file); return x.fullUrl } }))
+    openLightbox({ items, index: Math.max(0, list.indexOf(a)), from: (chip && chip.querySelector('img')) || chip, refocus: () => document.querySelector('.att-open[data-lid="' + CSS.escape(lid) + '"]') })
+    return
+  }
+  const el = docViewerEl()
+  el.querySelector('.dv-title').textContent = a.name
+  el.querySelector('.dv-sub').textContent = ''
+  el.querySelector('.dv-dl').hidden = true
+  docUi.r = null; docUi.name = a.name
+  el.querySelector('.dv-body').innerHTML = '<div class="empty att-chip-info"><b>' + esc(a.name) + '</b><br>' + esc(fmtSize(a.size)) + (a.status === 'done' ? ' · goes with your next message' : a.status === 'failed' ? ' · didn’t upload' : ' · uploading') + '</div>'
+  el.hidden = false
+  document.documentElement.classList.add('dv-open')
+  el.querySelector('.dv-x') && el.querySelector('.dv-x').focus({ preventScroll: true })
+}
+// A PDF opens in its own full-screen preview (ui/pdfview.js): the pages drawn
+// from the file the Mac sends back (the same chunked read as a picture).
+function openPdfAttachment(btn) {
+  const sid = btn.dataset.sid, id = btn.dataset.att
+  openPdfView({ name: btn.dataset.name || 'file.pdf', sizeLabel: btn.dataset.size || '', from: btn,
+    load: async () => { const r = await attData(sid, id); return { bytes: new Uint8Array(await r.blob.arrayBuffer()), url: r.url } },
+    refocus: () => document.querySelector('#app ' + attSel(sid, id)) || btn })
+}
+async function openAttachment(btn) {
+  const sid = btn.dataset.sid, id = btn.dataset.att, name = btn.dataset.name || 'file', kind = btn.dataset.kind
+  if (kind === 'image') return openImageAttachment(btn)
+  if (kind === 'pdf') return openPdfAttachment(btn)
+  const el = docViewerEl()
+  el.querySelector('.dv-title').textContent = name
+  el.querySelector('.dv-sub').textContent = ''
+  el.querySelector('.dv-dl').hidden = true
+  const body = el.querySelector('.dv-body')
+  body.innerHTML = '<div class="empty">Opening…</div>'
+  docUi.r = null; docUi.name = name
+  el.hidden = false
+  document.documentElement.classList.add('dv-open')
+  try {
+    const { url: u, blob } = await attData(sid, id)
+    if (el.hidden) return
+    const dl = '<a class="btn" href="' + esc(u) + '" download="' + esc(name) + '">' + icon('download') + 'Download</a>'
+    if (kind === 'image') body.innerHTML = '<div class="att-full"><img src="' + esc(u) + '" alt="' + esc(name) + '"></div><div class="att-full-actions">' + dl + '</div>'
+    else if (kind === 'text') { const t = blob ? await blob.text() : ''; body.innerHTML = '<pre class="att-text">' + esc(t.slice(0, 200000)) + '</pre><div class="att-full-actions">' + dl + '</div>' }
+    else body.innerHTML = '<div class="empty">' + esc(name) + '</div><div class="att-full-actions">' + dl + '</div>'
+  } catch (e) { if (!el.hidden) body.innerHTML = '<div class="empty">Couldn’t open it: ' + esc(e.message) + '</div>' }
+}
+// Fit the box to its words (one line up to COMPOSER_MAX_LINES, then it scrolls) and light the ↑ when there's something to send.
+function fitComposer(ta) {
+  if (!ta || !ta.isConnected) return
+  const cs = getComputedStyle(ta)
+  const lh = parseFloat(cs.lineHeight) || 22
+  const padY = (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0)
+  const keep = ta.scrollTop
+  ta.style.height = 'auto'
+  const r = composerHeight({ scrollHeight: ta.scrollHeight, lineHeight: lh, padY })
+  ta.style.height = r.height + 'px'
+  ta.style.overflowY = r.scroll ? 'auto' : 'hidden'
+  if (r.scroll) ta.scrollTop = keep
+  syncComposer(ta)
+}
+function syncComposer(ta) {
+  const box = ta && ta.closest('.composer')
+  const btn = box && box.querySelector('.composer-send')
+  if (!btn || btn.classList.contains('sending')) return
+  btn.disabled = ta.disabled || (isBlank(ta.value) && !attachList(box.dataset.sid).length)
+}
+document.addEventListener('input', (ev) => { if (ev.target && ev.target.classList && ev.target.classList.contains('composer-input')) fitComposer(ev.target) })
+// Enter on a Mac sends (Shift+Enter: a new line); on a phone Return is a new line. ⌘↵ is the shared handler above.
+document.addEventListener('keydown', (ev) => {
+  const ta = ev.target
+  if (ev.key !== 'Enter' || !ta || !ta.classList || !ta.classList.contains('composer-input')) return
+  if (ev.metaKey || ev.ctrlKey) return // ⌘↵ / Ctrl+↵: the Needs-you handler presses the button
+  if (composerKey(ev, { touch: isTouchUi(window.matchMedia) }) !== 'send') return
+  ev.preventDefault()
+  const cb = ta.closest('.composer')
+  if (ev.repeat || (isBlank(ta.value) && !(cb && attachList(cb.dataset.sid).length))) return
+  const box = ta.closest('.live-box')
+  const btn = box && box.querySelector('[data-submit-for="live"]')
+  if (!btn || btn.disabled) return
+  const last = Number(box.dataset.kbdAt || 0)
+  if (Date.now() - last < 1500) return
+  box.dataset.kbdAt = String(Date.now())
+  btn.click()
+})
+// A tap anywhere on the box (its padding) is a tap in the textarea.
+document.addEventListener('click', (ev) => { const b = ev.target && ev.target.classList && ev.target.classList.contains('composer') ? ev.target : null; const ta = b && b.querySelector('.composer-input'); if (ta && !ta.disabled) ta.focus() })
+// Pressing ↑ keeps the keyboard up (the textarea keeps focus) on a phone.
+document.addEventListener('mousedown', (ev) => { if (ev.target && ev.target.closest && ev.target.closest('.composer-send') && document.activeElement && document.activeElement.classList.contains('composer-input')) ev.preventDefault() })
 // After the session page is drawn: keep the thread (scroll, diffed entries), show "Jump to latest".
 function liveAfterRender(sid) {
+  for (const ta of $app.querySelectorAll('.composer-input')) fitComposer(ta)
   const r = liveKeeper.after($app)
+  hydrateAttThumbs(); barWidths($app)
   if (!r) return
   const ol = r.thread.querySelector('.live-log')
   const empty = r.thread.querySelector('.live-empty')
@@ -1599,6 +1952,7 @@ async function refreshLive(reason) {
         liveKeeper.before(box)
         box.insertBefore(fresh, next)
         const r = liveKeeper.after(box)
+        hydrateAttThumbs()
         if (r) liveJumpButton(r.thread, liveKeeper.unseen)
       }
     }
@@ -1645,19 +1999,34 @@ document.addEventListener('visibilitychange', onWake)
 async function liveSendClick(btn) {
   const box = btn.closest('.live-box')
   const ta = box && box.querySelector('.live-text')
+  const sid = btn.dataset.id
   const text = ta ? ta.value.trim() : ''
-  if (!text) { toast('Type a message first'); return }
-  if (btn.getAttribute('aria-disabled') === 'true') return
-  btn.setAttribute('aria-disabled', 'true'); btn.textContent = 'Sending…'
+  if (!text && !attachList(sid).length) { if (ta) ta.focus(); return }
+  if (btn.disabled || btn.classList.contains('sending')) return
+  const hadFocus = !!(ta && document.activeElement === ta)
+  btn.classList.add('sending'); btn.disabled = true; btn.setAttribute('aria-busy', 'true'); btn.setAttribute('aria-label', 'Sending…')
   try {
-    const r = await api('POST', '/v1/sessions/' + encodeURIComponent(btn.dataset.id) + '/live', { text })
-    if (state.drafts) delete state.drafts['live:' + btn.dataset.id]
-    if (ta) ta.value = ''
+    // 0.9.8: attachments still uploading go first; one that failed waits for you (retry or remove)
+    await uploadsSettled(sid)
+    const atts = attachList(sid)
+    const failed = atts.filter((a) => a.status === 'failed').length
+    if (failed) { toast(failed === 1 ? 'A file didn’t upload: retry it or remove it.' : failed + ' files didn’t upload: retry or remove them.', 4200); return }
+    const ids = atts.filter((a) => a.status === 'done' && a.id).map((a) => a.id)
+    const r = await api('POST', '/v1/sessions/' + encodeURIComponent(sid) + '/live', { text, ...(ids.length ? { attachments: ids } : {}) })
+    // what you typed while it went stays; what was sent goes
+    if (!ta || ta.value.trim() === text) { if (state.drafts) delete state.drafts['live:' + sid]; if (ta) { ta.value = ''; fitComposer(ta) } }
+    if (ids.length) { attachUi.by.set(sid, attachList(sid).filter((a) => !ids.includes(a.id))); paintChips(sid) }
     if (r.state === 'failed') toast('Didn’t arrive: ' + (r.error || 'the session isn’t listening'), 4200)
     const ol = box && box.querySelector('.live-log')
     if (ol) ol.scrollTop = ol.scrollHeight // your own message: always follow it
     setTimeout(() => { if (state.route && state.route.name === 's') soon() }, 1500)
-  } catch (e) { toast(e.message, 4200) } finally { await render(); const nb = document.querySelector('.live-box [data-action="live-send"]'); if (nb) { nb.removeAttribute('aria-disabled'); nb.textContent = 'Send' } }
+  } catch (e) { toast(e.message, 4200) } finally {
+    await render()
+    const nb = document.querySelector('.live-box [data-action="live-send"]')
+    if (nb) { nb.classList.remove('sending'); nb.removeAttribute('aria-busy'); nb.setAttribute('aria-label', 'Send') }
+    const nt = document.querySelector('.live-box .composer-input')
+    if (nt) { fitComposer(nt); if (hadFocus && !nt.disabled && document.activeElement !== nt) nt.focus({ preventScroll: true }) }
+  }
 }
 
 // ------------------------------------------------------------ search inside transcripts (0.9.6)
@@ -3970,7 +4339,7 @@ document.addEventListener('click', (e) => { if (e.target.closest && $app.contain
     sw = null
     if (!narrowQ.matches || tabsUi.route !== 's' || e.touches.length !== 1) return
     const t = e.target
-    if (t.closest('input, textarea, select, [contenteditable], .lo-menu, .cmdk, .doc-viewer, .tabs, .moremenu') || scrollsSideways(t)) return
+    if (t.closest('input, textarea, select, [contenteditable], .lo-menu, .cmdk, .doc-viewer, .lightbox, .pdfview, .tabs, .moremenu') || scrollsSideways(t)) return
     sw = { x: e.touches[0].clientX, y: e.touches[0].clientY, at: Date.now() }
   }, { passive: true })
   document.addEventListener('touchend', (e) => {
@@ -4035,7 +4404,7 @@ function keepPlace() {
   ptr.innerHTML = '<span class="ptr-ring"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg></span>'
   document.body.appendChild(ptr)
   const coarse = window.matchMedia('(pointer: coarse)'), narrow = window.matchMedia('(max-width: 699.98px)')
-  const overlayOpen = () => qlUi.open || moreOpen() || statusOpen() || !!document.querySelector('.cmdk:not([hidden]), .lo-menu, .doc-viewer:not([hidden]), .emoji-sheet-wrap')
+  const overlayOpen = () => qlUi.open || moreOpen() || statusOpen() || !!document.querySelector('.cmdk:not([hidden]), .lo-menu, .doc-viewer:not([hidden]), .lightbox:not([hidden]), .pdfview:not([hidden]), .emoji-sheet-wrap')
   let pull = null, refreshing = false
   const paint = (step) => {
     ptr.hidden = !step || (!step.pulling && !refreshing)
@@ -4097,7 +4466,7 @@ function keepPlace() {
   const top = document.querySelector('.top')
   let st = { hidden: false, anchor: 0 }, raf = 0, held = true
   const typing = () => { const a = document.activeElement; return !!(a && a !== document.body && a.matches && a.matches(NAVHIDE_TYPING)) }
-  const overlay = () => qlUi.open || moreOpen() || statusOpen() || !!document.querySelector('.cmdk:not([hidden]), .lo-menu, .lo-backdrop, .doc-viewer:not([hidden]), .emoji-sheet-wrap, .relay-screen:not([hidden])')
+  const overlay = () => qlUi.open || moreOpen() || statusOpen() || !!document.querySelector('.cmdk:not([hidden]), .lo-menu, .lo-backdrop, .doc-viewer:not([hidden]), .lightbox:not([hidden]), .pdfview:not([hidden]), .emoji-sheet-wrap, .relay-screen:not([hidden])')
   const apply = (hidden) => {
     if (hidden && top) document.documentElement.style.setProperty('--top-h', top.offsetHeight + 'px')
     document.body.classList.toggle('nav-hidden', hidden)
@@ -4786,6 +5155,11 @@ document.addEventListener('click', async (ev) => {
     if (action === 'ask-answer' || action === 'ask-pick-send') return answerClick(btn, action)
     if (action === 'reply-send') return replyClick(btn)
     if (action === 'live-send') return liveSendClick(btn)
+    if (action === 'attach') { const inp = btn.closest('.composer') && btn.closest('.composer').querySelector('.att-input'); if (inp && !inp.disabled) inp.click(); return }
+    if (action === 'att-remove') return removeAttachment(btn.dataset.lid)
+    if (action === 'att-retry') return retryAttachment(btn.dataset.lid)
+    if (action === 'att-open') return openAttachment(btn)
+    if (action === 'att-chip-open') return openChip(btn.dataset.lid)
     if (action === 'live-jump') return liveJumpClick(btn)
     if (action === 'live-earlier') return liveEarlierClick(btn)
     if (action === 'quick-reply') return quickReplyClick(btn)