@leftoff/cli 0.9.8-beta.2 → 0.9.8-beta.21

package/ui/attach.js

@@ -0,0 +1,211 @@
+// Attachments in the Live composer (0.9.8). A paperclip in the box (the
+// phone's own picker: Photo Library, Take Photo, Choose File), and on a
+// desktop drag and drop or paste. Each file is uploaded right away to the Mac
+// that runs the session (src/uploads.js), in base64 chunks every path can
+// carry (the relay takes ~1 MB a message); your message then tells Claude
+// where each file is. Big photos are scaled down first (a 2048 px long edge,
+// JPEG 0.85) and HEIC becomes JPEG, so Claude can read it.
+//
+// The pure pieces are unit tested (test/unit/attach-098.test.mjs); the rest
+// needs a browser (canvas, FileReader) and is checked by test:attach-ui.
+
+export const ATTACH_MAX_FILES = 10 // src/uploads.js UPLOAD_MAX_FILES
+export const ATTACH_MAX_BYTES = 20 * 1024 * 1024 // UPLOAD_MAX_BYTES
+export const ATTACH_CHUNK = 384 * 1024 // UPLOAD_CHUNK (the daemon says so too)
+export const LONG_EDGE = 2048
+export const JPEG_QUALITY = 0.85
+export const BIG_PHOTO = 4 * 1024 * 1024 // a photo this big is re-encoded even when it fits the edge
+export const THUMB_EDGE = 320
+const THUMB_BYTES = 60 * 1024 // under the daemon's 64 KB
+
+const IMG_EXT = /\.(png|jpe?g|gif|webp|heic|heif|bmp|tiff?)$/i
+export function isHeic(f) { return /^image\/hei[cf]/i.test(String((f && f.type) || '')) || /\.hei[cf]$/i.test(String((f && f.name) || '')) }
+export function attachKind(f) {
+  const t = String((f && f.type) || '').toLowerCase(), n = String((f && f.name) || '').toLowerCase()
+  if (/^image\//.test(t) || IMG_EXT.test(n)) return 'image'
+  if (t === 'application/pdf' || n.endsWith('.pdf')) return 'pdf'
+  if (/^text\//.test(t) || /json|xml|javascript|yaml|csv/.test(t) || /\.(txt|md|json|csv|log|ya?ml|xml|html?|css|js|mjs|ts|tsx|jsx|py|rb|go|rs|java|swift|kt|sh|sql|diff|patch)$/.test(n)) return 'text'
+  return 'file'
+}
+
+export function fmtSize(n) {
+  const b = Math.max(0, Number(n) || 0)
+  if (b < 1024) return b + ' B'
+  if (b < 1024 * 1024) return Math.round(b / 1024) + ' KB'
+  return (b / 1024 / 1024).toFixed(b < 10 * 1024 * 1024 ? 1 : 0) + ' MB'
+}
+
+// A long name with its end kept: "Screenshot 2026-10…5.20.24 PM.png".
+export function shortName(name, max = 18) {
+  const n = String(name || '')
+  if (n.length <= max) return n
+  const m = n.match(/(\.[A-Za-z0-9]{1,5})$/)
+  const tail = Math.min(n.length - 1, Math.max(m ? m[1].length + 3 : 4, Math.floor(max / 2.5)))
+  return n.slice(0, max - tail - 1) + '…' + n.slice(n.length - tail)
+}
+
+// Which of the dropped/picked files to take, given how many are attached.
+// -> { take: [file], skipped: [{ name, why: 'too_many' | 'too_large' }] }
+export function attachPlan(files, have = 0, { maxFiles = ATTACH_MAX_FILES, maxBytes = ATTACH_MAX_BYTES } = {}) {
+  const take = [], skipped = []
+  for (const f of Array.from(files || [])) {
+    if (have + take.length >= maxFiles) { skipped.push({ name: f.name, why: 'too_many' }); continue }
+    // an image over the limit may still fit once scaled down (not a GIF or a format we can't draw)
+    const shrinks = attachKind(f) === 'image' && !/gif/i.test(f.type || '')
+    if (f.size > maxBytes && !(shrinks && f.size <= maxBytes * 3)) { skipped.push({ name: f.name, why: 'too_large' }); continue }
+    take.push(f)
+  }
+  return { take, skipped }
+}
+export function skippedText(skipped, { maxFiles = ATTACH_MAX_FILES, maxBytes = ATTACH_MAX_BYTES } = {}) {
+  const big = skipped.filter((x) => x.why === 'too_large').map((x) => x.name), many = skipped.filter((x) => x.why === 'too_many').length
+  return [big.length ? (big.length === 1 ? big[0] + ' is' : big.length + ' files are') + ' over ' + fmtSize(maxBytes) : '', many ? 'up to ' + maxFiles + ' files a message' : ''].filter(Boolean).join(' · ')
+}
+
+export function chunkRanges(size, chunk = ATTACH_CHUNK) {
+  const n = Math.max(0, Number(size) || 0), c = Math.max(1, Number(chunk) || ATTACH_CHUNK)
+  if (!n) return [[0, 0]]
+  const out = []
+  for (let a = 0; a < n; a += c) out.push([a, Math.min(n, a + c)])
+  return out
+}
+
+export function fitSize(w, h, max = LONG_EDGE) {
+  const W = Math.max(1, Number(w) || 1), H = Math.max(1, Number(h) || 1)
+  const long = Math.max(W, H)
+  if (long <= max) return { w: W, h: H }
+  const k = max / long
+  return { w: Math.max(1, Math.round(W * k)), h: Math.max(1, Math.round(H * k)) }
+}
+
+// Re-encode as JPEG? HEIC always (Claude Code reads PNG, JPEG, GIF and WebP);
+// a photo or screenshot past the long edge, or a very big one; never a GIF.
+export function shouldConvert(f, dims) {
+  if (isHeic(f)) return true
+  const t = String((f && f.type) || '').toLowerCase()
+  if (!/^image\/(jpeg|png|webp|bmp|tiff)$/.test(t)) return false
+  if (dims && Math.max(dims.w, dims.h) > LONG_EDGE) return true
+  return (Number(f.size) || 0) > BIG_PHOTO
+}
+export function jpegName(name) {
+  const n = String(name || 'photo')
+  return /\.[A-Za-z0-9]{1,5}$/.test(n) ? n.replace(/\.[A-Za-z0-9]{1,5}$/, '.jpg') : n + '.jpg'
+}
+// A pasted image is called image.png by every browser: give it a time.
+export function pastedName(type, now = new Date()) {
+  const ext = (String(type || '').split('/')[1] || 'png').replace('jpeg', 'jpg').replace(/[^a-z0-9]/gi, '').slice(0, 5) || 'png'
+  const p = (n) => String(n).padStart(2, '0')
+  return 'pasted-' + now.getFullYear() + p(now.getMonth() + 1) + p(now.getDate()) + '-' + p(now.getHours()) + p(now.getMinutes()) + p(now.getSeconds()) + '.' + ext
+}
+
+// "Attached: /…/checkpoints/uploads/<session>/<id> (image, 412 KB)" lines in a
+// message the transcript gave back: chips instead of paths (Leftoff's own
+// uploads only; any other line stays text).
+const ATT_LINE = /^Attached: (\/.*\/checkpoints\/uploads\/([A-Za-z0-9][A-Za-z0-9_-]{0,99})\/(\d{8}T\d{6}-[a-f0-9]{6}-([^/\n]+?))) \((image|PDF|pdf|text|file), ([^)\n]+)\)$/
+export function parseAttachedLines(text) {
+  const atts = []
+  const keep = []
+  for (const line of String(text || '').split('\n')) {
+    const m = line.match(ATT_LINE)
+    if (m) { const kind = m[5].toLowerCase(); atts.push({ id: m[3], sessionId: m[2], name: m[4], kind, sizeLabel: m[6], thumb: kind === 'image' || kind === 'pdf' }); continue }
+    keep.push(line)
+  }
+  return { text: keep.join('\n').trim(), attachments: atts }
+}
+
+// --------------------------------------------------------- in the browser
+
+export function bytesToBase64(u8) {
+  let s = ''
+  for (let i = 0; i < u8.length; i += 0x8000) s += String.fromCharCode.apply(null, u8.subarray(i, i + 0x8000))
+  return btoa(s)
+}
+export function base64ToBytes(b64) {
+  const s = atob(b64 || '')
+  const u8 = new Uint8Array(s.length)
+  for (let i = 0; i < s.length; i++) u8[i] = s.charCodeAt(i)
+  return u8
+}
+
+async function decode(file) {
+  if (typeof createImageBitmap === 'function') {
+    try { const b = await createImageBitmap(file, { imageOrientation: 'from-image' }); return { src: b, w: b.width, h: b.height, close: () => b.close && b.close() } } catch {}
+  }
+  const url = URL.createObjectURL(file)
+  try {
+    const img = await new Promise((resolve, reject) => { const i = new Image(); i.onload = () => resolve(i); i.onerror = () => reject(new Error('undecodable')); i.src = url })
+    return { src: img, w: img.naturalWidth, h: img.naturalHeight, close: () => URL.revokeObjectURL(url) }
+  } catch (e) { URL.revokeObjectURL(url); return null }
+}
+function draw(d, w, h) {
+  const c = document.createElement('canvas'); c.width = w; c.height = h
+  const g = c.getContext('2d')
+  g.fillStyle = '#fff'; g.fillRect(0, 0, w, h) // a transparent PNG becomes JPEG on white, not black
+  g.drawImage(d.src, 0, 0, w, h)
+  return c
+}
+const toBlob = (c, type, q) => new Promise((resolve) => c.toBlob((b) => resolve(b), type, q))
+
+// What to upload for a picked file: { file, thumb (base64 JPEG or null),
+// converted, note }. An image the browser can't draw (HEIC outside Safari)
+// goes as it is, with a note.
+export async function prepareFile(file) {
+  if (attachKind(file) !== 'image' || /gif/i.test(file.type || '')) return { file, thumb: null, converted: false }
+  const d = await decode(file)
+  if (!d) return { file, thumb: null, converted: false, note: isHeic(file) ? 'heic' : null }
+  try {
+    let out = file, converted = false
+    if (shouldConvert(file, { w: d.w, h: d.h })) {
+      const { w, h } = fitSize(d.w, d.h, LONG_EDGE)
+      const b = await toBlob(draw(d, w, h), 'image/jpeg', JPEG_QUALITY)
+      if (b && (b.size < file.size || isHeic(file) || Math.max(d.w, d.h) > LONG_EDGE)) { out = new File([b], jpegName(file.name), { type: 'image/jpeg', lastModified: file.lastModified || Date.now() }); converted = true }
+    }
+    let thumb = null
+    const t = fitSize(d.w, d.h, THUMB_EDGE)
+    for (const q of [0.72, 0.5, 0.3]) {
+      const tb = await toBlob(draw(d, t.w, t.h), 'image/jpeg', q)
+      if (tb && tb.size <= THUMB_BYTES) { thumb = bytesToBase64(new Uint8Array(await tb.arrayBuffer())); break }
+    }
+    return { file: out, thumb, converted, w: d.w, h: d.h }
+  } finally { d.close() }
+}
+
+// Upload one prepared file to a session: begin, then chunks; a lost answer is
+// picked up from what the Mac says it has. onProgress(sent, total).
+export async function uploadFile({ api, sessionId, file, thumb = null, onProgress = () => {}, isCancelled = () => false }) {
+  const base = '/v1/sessions/' + encodeURIComponent(sessionId) + '/uploads'
+  const st = await api('POST', base, { name: file.name || 'file', size: file.size, type: file.type || '' })
+  if (st.done) { onProgress(file.size, file.size); return st.file }
+  const chunk = Math.max(16 * 1024, Math.min(ATTACH_CHUNK, Number(st.chunk) || ATTACH_CHUNK))
+  let off = 0, first = true, out = null, tries = 0
+  while (!out || !out.done) {
+    if (isCancelled()) throw Object.assign(new Error('removed'), { code: 'removed' })
+    const piece = new Uint8Array(await file.slice(off, Math.min(file.size, off + chunk)).arrayBuffer())
+    try {
+      out = await api('POST', base + '/' + encodeURIComponent(st.id), { offset: off, data: bytesToBase64(piece), ...(first && thumb ? { thumb } : {}) }, { timeoutMs: 60000 })
+      tries = 0
+    } catch (e) {
+      if (++tries > 2 || (e.status && e.status < 500 && e.status !== 408 && e.status !== 429)) throw e
+      await new Promise((r) => setTimeout(r, 800 * tries)); continue
+    }
+    first = false
+    off = Number(out.received) || 0
+    onProgress(off, file.size)
+  }
+  return out.file
+}
+
+// Read an attachment back from the Mac (in chunks: the relay carries ~1 MB a
+// message) -> a Blob.
+export async function fetchAttachment({ api, sessionId, id, thumb = false }) {
+  const base = '/v1/sessions/' + encodeURIComponent(sessionId) + '/uploads/' + encodeURIComponent(id)
+  const parts = []
+  let off = 0, size = null, type = 'application/octet-stream'
+  for (;;) {
+    const r = await api('GET', base + '?' + new URLSearchParams(thumb ? { thumb: '1' } : { offset: String(off), length: String(ATTACH_CHUNK) }), null, { timeoutMs: 60000 })
+    const b = base64ToBytes(r.data)
+    parts.push(b); off += b.length; size = r.size; type = r.type || type
+    if (thumb || off >= size || !b.length) break
+  }
+  return new Blob(parts, { type })
+}

package/ui/composer.js

@@ -0,0 +1,46 @@
+// The Live composer (0.9.8): one rounded box like a chat app's prompt input.
+// It starts at one line and grows with what you type up to COMPOSER_MAX_LINES,
+// then scrolls inside; a round ↑ button in its corner sends, dim until there's
+// 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.
+
+export const COMPOSER_MAX_LINES = 8
+
+// Nothing worth sending: empty or only whitespace.
+export const isBlank = (text) => !String(text == null ? '' : text).trim()
+
+// What a keydown in the composer means: 'send', or null to let the browser do
+// its own thing (a new line, nothing). ev: { key, shiftKey, altKey, metaKey,
+// ctrlKey, isComposing, keyCode }. touch: Return types a new line (a phone's
+// keyboard has no Shift+Return worth asking for).
+export function composerKey(ev, { touch = false } = {}) {
+  if (!ev || ev.key !== 'Enter') return null
+  if (ev.isComposing || ev.keyCode === 229) return null // an IME is choosing a word: Enter confirms it
+  if (ev.metaKey || ev.ctrlKey) return ev.altKey || ev.shiftKey ? null : 'send'
+  if (ev.shiftKey || ev.altKey) return null
+  return touch ? null : 'send'
+}
+
+// Is this a touch-first screen (phone, tablet)? matchMedia is the page's.
+// No fine pointer, or a coarse one as the primary pointer, counts as touch.
+export function isTouchUi(matchMedia) {
+  if (typeof matchMedia !== 'function') return false
+  try {
+    if (matchMedia('(pointer: coarse)').matches) return true
+    return !matchMedia('(pointer: fine)').matches
+  } catch { return false }
+}
+
+// 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.
+export function composerHeight({ scrollHeight = 0, lineHeight = 22, padY = 0, maxLines = COMPOSER_MAX_LINES } = {}) {
+  const lh = Number(lineHeight) > 0 ? Number(lineHeight) : 22
+  const pad = Math.max(0, Number(padY) || 0)
+  const min = Math.round(lh + pad)
+  const max = Math.round(lh * maxLines + pad)
+  const want = Math.ceil(Number(scrollHeight) || 0)
+  return { height: Math.max(min, Math.min(want, max)), scroll: want > max + 1 }
+}

package/ui/index.html

@@ -46,6 +46,7 @@
     <a href="#/digest" data-route="digest" role="menuitem"><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="M15 18h-5"/> <path d="M18 14h-8"/> <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/> <rect width="8" height="4" x="10" y="6" rx="1"/></svg><span>Digest</span></a>
     <a href="#/whats-new" data-route="whats-new" role="menuitem"><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>What’s new</span><span class="newdot" hidden></span></a>
     <a href="#/settings" data-route="settings" role="menuitem"><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>Settings</span><span class="topdot" hidden></span></a>
+    <div class="push-slot" data-push-slot role="group" aria-label="Notifications" hidden></div>
   </div>
   <div class="quicklook" id="quickLook" role="dialog" aria-labelledby="qlTitle" hidden></div>
   <div class="statuspop" id="statusPop" role="dialog" aria-label="Status" hidden></div>
@@ -56,6 +57,9 @@
       <div class="cmdk-foot"><span><kbd>↑</kbd><kbd>↓</kbd> to move</span><span><kbd>↵</kbd> to open</span><span><kbd>esc</kbd> to close</span></div>
     </div>
   </div>
+  <nav class="tabstrip" id="tabStrip" aria-label="Open sessions" hidden></nav>
+  <div class="openrow" id="openRow" role="navigation" aria-label="Open sessions" hidden></div>
+  <div class="tabpager" id="tabPager" role="navigation" aria-label="Open sessions" hidden></div>
   <main id="app"></main>
   <div class="toast" id="toast" role="status" aria-live="polite"></div>
   <script src="relay-client.js" type="module"></script>