@leftoff/cli 0.9.8-beta.8 → 0.9.8

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/diff-view.js

@@ -0,0 +1,278 @@
+// 0.9.8 What it did: a file's changes drawn the way GitHub draws them (unified
+// view): two line-number gutters (old | new), a +/− column, added rows pale
+// green and removed rows pale red with a darker gutter, @@ bars with the
+// function they're in, "⋯ N unchanged lines" between hunks, and the words that
+// changed inside a paired −/+ line in a darker tint. Long lines wrap past the
+// gutters. The parsing is pure (checked without a browser); the drawing builds
+// DOM nodes and sets textContent only, so nothing from a file is ever parsed as
+// HTML.
+
+export const WORD_MAX = 500 // longer lines: no word highlight
+const CELLS_MAX = 40000 // token grid budget for one −/+ pair
+
+// "@@ -12,7 +12,9 @@ function foo()" -> { oldStart, oldCount, newStart, newCount, ctx }
+export function parseHunkHeader(line) {
+  const m = /^@@+ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@+ ?(.*)$/.exec(String(line || ''))
+  if (!m) return null
+  return { oldStart: +m[1], oldCount: m[2] == null ? 1 : +m[2], newStart: +m[3], newCount: m[4] == null ? 1 : +m[4], ctx: m[5] || '' }
+}
+
+// How much of a line its changed ranges cover (spaces not counted).
+function changedShare(s, ranges) {
+  let n = 0
+  for (const [a, b] of ranges) n += s.slice(a, b).replace(/\s+/g, '').length
+  return n / (s.replace(/\s+/g, '').length || 1)
+}
+
+const TOKEN = /[A-Za-z0-9_]+|\s+|[^A-Za-z0-9_\s]/g
+const tokens = (s) => s.match(TOKEN) || []
+
+// The changed parts of a removed line `a` and the added line `b` that replaced
+// it, as [start, end) character ranges: [rangesInA, rangesInB]. null when
+// there's nothing worth marking (too long, identical, or the whole line
+// changed, where a highlight says nothing the row colour doesn't).
+export function wordRanges(a, b) {
+  a = String(a == null ? '' : a); b = String(b == null ? '' : b)
+  if (a === b || a.length > WORD_MAX || b.length > WORD_MAX) return null
+  const ta = tokens(a), tb = tokens(b)
+  let p = 0
+  while (p < ta.length && p < tb.length && ta[p] === tb[p]) p++
+  let s = 0
+  while (s < ta.length - p && s < tb.length - p && ta[ta.length - 1 - s] === tb[tb.length - 1 - s]) s++
+  const ma = ta.slice(p, ta.length - s), mb = tb.slice(p, tb.length - s)
+  const keepA = new Uint8Array(ma.length), keepB = new Uint8Array(mb.length)
+  if (ma.length && mb.length && ma.length * mb.length <= CELLS_MAX) {
+    // longest common subsequence of the middle tokens
+    const n = ma.length, m = mb.length, w = m + 1
+    const L = new Uint16Array((n + 1) * w)
+    for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--) L[i * w + j] = ma[i] === mb[j] ? L[(i + 1) * w + j + 1] + 1 : Math.max(L[(i + 1) * w + j], L[i * w + j + 1])
+    let i = 0, j = 0
+    while (i < n && j < m) {
+      if (ma[i] === mb[j]) { keepA[i++] = 1; keepB[j++] = 1 } else if (L[(i + 1) * w + j] >= L[i * w + j + 1]) i++
+      else j++
+    }
+  }
+  const ranges = (all, mid, keep) => {
+    const out = []
+    let at = 0
+    for (let k = 0; k < p; k++) at += all[k].length
+    for (let k = 0; k < mid.length; k++) {
+      const len = mid[k].length
+      if (!keep[k]) {
+        const last = out[out.length - 1]
+        if (last && last[1] === at) last[1] = at + len
+        else out.push([at, at + len])
+      }
+      at += len
+    }
+    // a lone kept space between two changed spans joins them
+    for (let k = out.length - 2; k >= 0; k--) {
+      const gap = (all === ta ? a : b).slice(out[k][1], out[k + 1][0])
+      if (gap.length <= 1 && /^\s*$/.test(gap)) { out[k][1] = out[k + 1][1]; out.splice(k + 1, 1) }
+    }
+    return out
+  }
+  const ra = ranges(ta, ma, keepA), rb = ranges(tb, mb, keepB)
+  if (!ra.length && !rb.length) return null
+  // most of both lines changed: no highlight (GitHub does the same)
+  if (changedShare(a, ra) > 0.7 && changedShare(b, rb) > 0.7) return null
+  return [ra, rb]
+}
+
+// A file's patch (hunks only, as src/diff.js sends it) -> rows to draw:
+//   { k: 'gap', n }                      unchanged lines git left out
+//   { k: 'hunk', text, ctx, range }      the @@ bar
+//   { k: 'ctx' | 'add' | 'del', o, n, t, w } a line; w: changed ranges
+//   { k: 'note', t }                     "", "… more lines"
+// maxLine: the biggest line number (sizes the gutters).
+export function parsePatch(text) {
+  const lines = String(text == null ? '' : text).replace(/\r\n?/g, '\n').split('\n')
+  if (lines.length && lines[lines.length - 1] === '') lines.pop()
+  const rows = []
+  let o = 0, n = 0, maxLine = 0, prevEnd = 1, inHunk = false
+  let dels = [], adds = []
+  // a run of removed lines then added ones: each removed line pairs with the
+  // next added line it resembles (in order), so an inserted line between
+  // doesn't throw the pairs off; big runs pair by position
+  const pair = () => {
+    const near = dels.length * adds.length <= 400
+    let j = 0
+    for (let i = 0; i < dels.length && j < adds.length; i++) {
+      if (!near) { const w = wordRanges(dels[i].t, adds[j].t); if (w) { dels[i].w = w[0]; adds[j].w = w[1] } j++; continue }
+      let best = null, bk = -1, bs = Infinity
+      for (let k = j; k < adds.length; k++) {
+        const w = wordRanges(dels[i].t, adds[k].t)
+        if (!w) continue
+        const sc = changedShare(dels[i].t, w[0]) + changedShare(adds[k].t, w[1])
+        if (sc < bs) { best = w; bk = k; bs = sc }
+      }
+      if (best) { dels[i].w = best[0]; adds[bk].w = best[1]; j = bk + 1 }
+    }
+    dels = []; adds = []
+  }
+  for (const line of lines) {
+    const h = line.startsWith('@@') ? parseHunkHeader(line) : null
+    if (h) {
+      pair()
+      const gap = h.oldStart - prevEnd
+      if (gap > 0) rows.push({ k: 'gap', n: gap })
+      const m = /^(@@+ [^@]*@@+)/.exec(line)
+      rows.push({ k: 'hunk', text: line, range: m ? m[1] : line, ctx: h.ctx })
+      o = h.oldStart; n = h.newStart
+      prevEnd = h.oldStart + h.oldCount
+      maxLine = Math.max(maxLine, h.oldStart + h.oldCount, h.newStart + h.newCount)
+      inHunk = true
+      continue
+    }
+    if (!inHunk) continue // header lines before the first hunk
+    const c = line[0]
+    if (c === '+') { const r = { k: 'add', o: null, n: n++, t: line.slice(1) }; rows.push(r); adds.push(r) }
+    else if (c === '-') { if (adds.length) pair(); const r = { k: 'del', o: o++, n: null, t: line.slice(1) }; rows.push(r); dels.push(r) }
+    else if (c === ' ' || line === '') { pair(); rows.push({ k: 'ctx', o: o++, n: n++, t: line.slice(1) }) }
+    else { pair(); rows.push({ k: 'note', t: c === '\\' ? line.slice(1).trim() : line }) }
+  }
+  pair()
+  return { rows, maxLine }
+}
+
+// A unified patch from two texts (an Edit tool's old_string -> new_string),
+// hunks with 3 lines of context, numbered from `start` (1 when unknown). A
+// plain line LCS; null past maxLines on either side.
+export function makePatch(a, b, { start = 1, context = 3, maxLines = 2000 } = {}) {
+  const A = String(a == null ? '' : a).split('\n'), B = String(b == null ? '' : b).split('\n')
+  if (A.length > maxLines || B.length > maxLines) return null
+  if (A.length > 1 && B.length > 1 && A[A.length - 1] === '' && B[B.length - 1] === '') { A.pop(); B.pop() } // both end in a newline
+  // trim the common ends first, LCS on the middle only
+  let p = 0
+  while (p < A.length && p < B.length && A[p] === B[p]) p++
+  let q = 0
+  while (q < A.length - p && q < B.length - p && A[A.length - 1 - q] === B[B.length - 1 - q]) q++
+  const ma = A.slice(p, A.length - q), mb = B.slice(p, B.length - q)
+  const n = ma.length, m = mb.length
+  const ops = [] // [' ' | '-' | '+', text]
+  for (let i = 0; i < p; i++) ops.push([' ', A[i]])
+  if (n * m > 4e6) { for (const x of ma) ops.push(['-', x]); for (const x of mb) ops.push(['+', x]) } else {
+    const w = m + 1, L = new Uint32Array((n + 1) * w)
+    for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--) L[i * w + j] = ma[i] === mb[j] ? L[(i + 1) * w + j + 1] + 1 : Math.max(L[(i + 1) * w + j], L[i * w + j + 1])
+    let i = 0, j = 0
+    while (i < n || j < m) {
+      if (i < n && j < m && ma[i] === mb[j]) { ops.push([' ', ma[i]]); i++; j++ } else if (j < m && (i >= n || L[i * w + j + 1] >= L[(i + 1) * w + j])) { ops.push(['+', mb[j]]); j++ } else { ops.push(['-', ma[i]]); i++ }
+    }
+  }
+  for (let i = A.length - q; i < A.length; i++) ops.push([' ', A[i]])
+  // removed lines before added ones inside each change, like git
+  for (let k = 0; k < ops.length; k++) {
+    if (ops[k][0] === ' ') continue
+    let e = k; while (e < ops.length && ops[e][0] !== ' ') e++
+    const run = ops.slice(k, e); const sorted = [...run.filter((o) => o[0] === '-'), ...run.filter((o) => o[0] === '+')]
+    ops.splice(k, e - k, ...sorted); k = e - 1
+  }
+  const changed = ops.map((o, k) => (o[0] !== ' ' ? k : -1)).filter((k) => k >= 0)
+  if (!changed.length) return ''
+  // group changes into hunks: ranges of ops with `context` lines around them
+  const hunks = []
+  for (const k of changed) {
+    const lo = Math.max(0, k - context), hi = Math.min(ops.length - 1, k + context)
+    const last = hunks[hunks.length - 1]
+    if (last && lo <= last[1] + 1) last[1] = hi
+    else hunks.push([lo, hi])
+  }
+  let out = ''
+  let o = start, nn = start, at = 0
+  for (const [lo, hi] of hunks) {
+    for (; at < lo; at++) { if (ops[at][0] !== '+') o++; if (ops[at][0] !== '-') nn++ }
+    let oc = 0, nc = 0, body = ''
+    for (let k = lo; k <= hi; k++) { const [c, t] = ops[k]; if (c !== '+') oc++; if (c !== '-') nc++; body += c + t + '\n' }
+    out += '@@ -' + (oc ? o : o - 1) + ',' + oc + ' +' + (nc ? nn : nn - 1) + ',' + nc + ' @@\n' + body
+    for (; at <= hi; at++) { if (ops[at][0] !== '+') o++; if (ops[at][0] !== '-') nn++ }
+  }
+  return out
+}
+
+// GitHub's little 5-block bar for +add −del: 'a' green, 'd' red, 'n' grey.
+export function diffBlocks(add, del) {
+  add = Math.max(0, Number(add) || 0); del = Math.max(0, Number(del) || 0)
+  const total = add + del
+  const shown = Math.min(5, total)
+  if (!shown) return ['n', 'n', 'n', 'n', 'n']
+  let a = Math.round(shown * add / total)
+  if (add && !a) a = 1
+  if (del && a === shown && shown > 1) a = shown - 1
+  const d = shown - a
+  return [...Array(a).fill('a'), ...Array(d).fill('d'), ...Array(5 - shown).fill('n')]
+}
+
+// "src/lib/retry.js" -> ['src/lib/', 'retry.js']
+export function splitPath(p) {
+  const s = String(p == null ? '' : p)
+  const i = s.lastIndexOf('/')
+  return i < 0 ? ['', s] : [s.slice(0, i + 1), s.slice(i + 1)]
+}
+
+const MARK = { add: '+', del: '−', ctx: ' ' }
+
+// Draw a patch. doc: the document (anything with createElement). Returns a
+// div.gd; every piece of the file goes in through textContent.
+export function renderDiff(doc, text, { label = '', numbers = true } = {}) {
+  const { rows, maxLine } = parsePatch(text)
+  const el = (tag, cls, txt) => { const e = doc.createElement(tag); if (cls) e.className = cls; if (txt != null && txt !== '') e.textContent = txt; return e }
+  const root = el('div', 'gd gd-w' + (numbers ? Math.min(6, Math.max(2, String(maxLine || 1).length)) : 1))
+  if (label) root.setAttribute('aria-label', label)
+  for (const r of rows) {
+    const row = el('div', 'gd-row gd-' + r.k)
+    if (r.k === 'gap') {
+      row.appendChild(el('span', 'gd-gut gd-span', '⋯'))
+      row.appendChild(el('span', 'gd-c', r.n + ' unchanged line' + (r.n === 1 ? '' : 's')))
+    } else if (r.k === 'hunk') {
+      row.appendChild(el('span', 'gd-gut gd-span'))
+      const c = el('span', 'gd-c')
+      c.appendChild(el('span', 'gd-range', r.range))
+      if (r.ctx) { c.appendChild(doc.createTextNode(' ')); c.appendChild(el('span', 'gd-ctx', r.ctx)) }
+      row.appendChild(c)
+    } else if (r.k === 'note') {
+      row.appendChild(el('span', 'gd-gut gd-span'))
+      row.appendChild(el('span', 'gd-c', r.t))
+    } else {
+      row.appendChild(el('span', 'gd-gut gd-o', r.o == null || !numbers ? '' : String(r.o)))
+      row.appendChild(el('span', 'gd-gut gd-n', r.n == null || !numbers ? '' : String(r.n)))
+      const mk = el('span', 'gd-m', MARK[r.k])
+      mk.setAttribute('aria-label', r.k === 'add' ? 'added' : r.k === 'del' ? 'removed' : 'unchanged')
+      row.appendChild(mk)
+      const c = el('span', 'gd-c')
+      if (r.w && r.w.length) {
+        let at = 0
+        for (const [s, e] of r.w) {
+          if (s > at) c.appendChild(doc.createTextNode(r.t.slice(at, s)))
+          c.appendChild(el(r.k === 'add' ? 'ins' : 'del', 'gd-x', r.t.slice(s, e)))
+          at = e
+        }
+        if (at < r.t.length) c.appendChild(doc.createTextNode(r.t.slice(at)))
+      } else if (r.t) c.textContent = r.t
+      else c.textContent = '\u200b' // keeps an empty line's height
+      row.appendChild(c)
+    }
+    root.appendChild(row)
+  }
+  return root
+}
+
+// Fill each placeholder (<div class="gd-slot" data-gd-path="…">) the board's
+// HTML left for a file's lines. getFile(path) -> { lines } | null. A drawn
+// diff is kept per file answer, so a redraw of the page moves the same nodes
+// back in instead of drawing them again.
+const drawn = new WeakMap()
+export function hydrateDiffs(root, getFile) {
+  if (!root || !root.querySelectorAll) return 0
+  let k = 0
+  for (const slot of root.querySelectorAll('.gd-slot[data-gd-path]')) {
+    if (slot.firstChild) continue
+    const f = getFile(slot.getAttribute('data-gd-path'))
+    const text = f && typeof f === 'object' ? f.lines || f.patch : null
+    if (!text) continue
+    let node = drawn.get(f)
+    if (!node) { node = renderDiff(slot.ownerDocument || document, text, { label: 'Changes in ' + (f.path || f.what || ''), numbers: !f.patch || f.patchAt != null }); drawn.set(f, node) }
+    slot.appendChild(node)
+    k++
+  }
+  return k
+}