heyquilt 0.0.1 → 0.3.90

package/src/ui/mark.js

@@ -0,0 +1,104 @@
+// The Quilt mark (brand/SPEC.md): Patch Q. A nine-patch ring of eight pieces around an open
+// centre; the bottom-right piece is a half-square triangle, and its vermilion half is the Q's
+// tail. The wordmark is a drawn lowercase "quilt" whose i is dotted with the same folded square.
+// One source for every drawing: the app, the website (web/lib/mark.js is an identical copy) and
+// the brand kit (scripts/make-brand.cjs imports the geometry below). Colours come from the page:
+// --mark-ink for the pieces and letters, --mark-accent for the vermilion half (app.css, globals.css).
+
+/** The 57-unit grid: patch 17, gap 3, corner radius 2. */
+export const GRID = { size: 57, patch: 17, gap: 3, radius: 2 }
+/** The seven square pieces, clockwise from the top-left; the corner piece comes last (piece 8). */
+export const PIECES = [[0, 0], [20, 0], [40, 0], [40, 20], [20, 40], [0, 40], [0, 20]]
+/** The corner piece's two halves, split by a 3-unit seam (long edges on x + y = 94.88 and 99.12). */
+export const CORNER = {
+  ink: 'M42 40 H54.88 L40 54.88 V42 A2 2 0 0 1 42 40 Z',
+  accent: 'M57 42.12 V55 A2 2 0 0 1 55 57 H42.12 Z'
+}
+/**
+ * The wordmark on its 162 x 90 box (viewBox -6 -4 162 90): 11-unit strokes with flat ends.
+ * Guide lines: ascender 2, x-height 19, baseline 61.5, descender 80.
+ */
+export const WORD = {
+  viewBox: '-6 -4 162 90',
+  stroke: 11,
+  bowl: { cx: 22, cy: 40.25, r: 15.75 },
+  paths: [
+    'M37.75 19 V80', // q stem
+    'M55 19 V41 A15 15 0 0 0 85 41 V19 M85 19 V61.5', // u
+    'M101 19 V61.5', // i
+    'M117 2 V61.5', // l
+    'M138 8 V46 Q138 56 148 56 H152', // t
+    'M128 24.5 H152' // t bar
+  ],
+  dot: { ink: 'M95.5 2 L106.5 13 H95.5 Z', accent: 'M95.5 2 H106.5 V13 Z' }
+}
+/**
+ * Lockups: where the mark and the wordmark sit. Horizontal: the mark as tall as the "l" and one
+ * patch from the q. Stacked: the mark half the wordmark's width, one patch above it.
+ */
+export const LOCKUP = {
+  horizontal: { viewBox: '0 0 229 82', mark: 'translate(0 2) scale(1.04386)', word: 'translate(76.25 0)' },
+  stacked: { viewBox: '0 0 152 177', mark: 'translate(38 0) scale(1.324561)', word: 'translate(-0.75 96)' }
+}
+/** Pixel masters for 16, 24 and 32 px: [patch, gap, corner ink if px + py <= this, vermilion if >= this]. */
+export const PIXEL_MASTERS = { 16: [4, 2, 2, 4], 24: [6, 3, 3, 7], 32: [8, 4, 4, 10] }
+
+const rect = ([x, y]) => `x="${x}" y="${y}" width="${GRID.patch}" height="${GRID.patch}" rx="${GRID.radius}"`
+
+/** The mark's shapes. Pieces carry --o, their place in the piecing order, for the animations. */
+function pieces () {
+  return PIECES.map((p, i) => `<rect class="qm-p qm-i" style="--o:${i}" ${rect(p)}/>`).join('') +
+    `<path class="qm-p qm-i qm-c" style="--o:7" d="${CORNER.ink}"/><path class="qm-p qm-a qm-c" style="--o:7" d="${CORNER.accent}"/>`
+}
+
+/** The wordmark's shapes. */
+function letters () {
+  const { bowl } = WORD
+  return `<g class="qm-w" fill="none" stroke-width="${WORD.stroke}"><circle cx="${bowl.cx}" cy="${bowl.cy}" r="${bowl.r}"/>${WORD.paths.map((d) => `<path d="${d}"/>`).join('')}</g>` +
+    `<path class="qm-i" d="${WORD.dot.ink}"/><path class="qm-a" d="${WORD.dot.accent}"/>`
+}
+
+/**
+ * Every pixel of a pixel master: { ink: [[x, y, w, h]], accent: [...] }, rows merged into runs.
+ * The seven square pieces sit at 0, patch + gap and twice that; the corner piece is split along
+ * its diagonal by the rule in PIXEL_MASTERS.
+ */
+export function pixelRects (size) {
+  const m = PIXEL_MASTERS[size]
+  if (!m) throw new Error(`no pixel master for ${size} px`)
+  const [p, g, inkMax, accentMin] = m
+  const at = [0, p + g, 2 * (p + g)]
+  const ink = PIECES.map(([x, y]) => [at[x / 20], at[y / 20], p, p])
+  const accent = []
+  const c = at[2]
+  for (let py = 0; py < p; py++) {
+    if (inkMax - py >= 0) ink.push([c, c + py, inkMax - py + 1, 1])
+    const from = accentMin - py
+    if (from <= p - 1) accent.push([c + Math.max(0, from), c + py, p - Math.max(0, from), 1])
+  }
+  return { ink, accent }
+}
+
+let sewn = false
+
+/**
+ * The mark as inline SVG.
+ *  word:  the horizontal lockup, mark and "quilt" (default); false for the mark alone
+ *  sew:   piece it together once (`'first'`: only the first time this is called in the page)
+ *  loop:  the loading animation: pieced patch by patch, clockwise, the corner last, over and over
+ *  px:    16, 24 or 32 for the pixel master (crisp at that size; no animation)
+ */
+export function quiltMark ({ word = true, sew = false, loop = false, px = 0, cls = '' } = {}) {
+  const extra = cls ? ' ' + cls : ''
+  const label = loop ? 'Loading' : 'Quilt'
+  if (px) {
+    const { ink, accent } = pixelRects(px)
+    const r = (cl) => ([x, y, w, h]) => `<rect class="${cl}" x="${x}" y="${y}" width="${w}" height="${h}"/>`
+    return `<svg class="qm qm-sym qm-px${extra}" viewBox="0 0 ${px} ${px}" width="${px}" height="${px}" shape-rendering="crispEdges" role="img" aria-label="${label}">${ink.map(r('qm-i')).join('')}${accent.map(r('qm-a')).join('')}</svg>`
+  }
+  const doSew = sew === 'first' ? !sewn && (sewn = true) : !!sew
+  const mode = loop ? ' qm-loop' : doSew ? ' qm-sew' : ''
+  if (!word) return `<svg class="qm qm-sym${mode}${extra}" viewBox="0 0 ${GRID.size} ${GRID.size}" role="img" aria-label="${label}">${pieces()}</svg>`
+  const L = LOCKUP.horizontal
+  return `<svg class="qm qm-word${mode}${extra}" viewBox="${L.viewBox}" role="img" aria-label="${label}"><g transform="${L.mark}">${pieces()}</g><g class="qm-wm" transform="${L.word}">${letters()}</g></svg>`
+}

package/src/ui/merges.js

@@ -0,0 +1,158 @@
+// Merges: the buttons for a file changed in two places (the file tree marks them) and
+// the side-by-side view of one.
+import { esc, I, api, toast, loadingNote } from './common.js'
+import { changedLines } from './fileview.js'
+
+const you = (name, me, fallback = 'someone') => !name ? fallback : name === me ? 'you' : esc(name)
+const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1)
+
+/** How the opener's side came about (merges.js VIAS). */
+export function done (m, deleted = false) {
+  if (m.via === 'pull') return deleted ? 'pulled commits that delete this' : 'pulled commits that change this'
+  if (m.via === 'hold') return deleted ? 'deleted this during a git command' : 'changed this during a git command'
+  return deleted ? 'deleted this offline' : 'changed this offline'
+}
+
+/** One plain sentence: who changed what, where; then who holds the file now. */
+function describe (m, me) {
+  const held = m.heldBy && m.heldBy !== me && m.kind !== 'claimed' ? ` ${cap(esc(m.heldBy))} has it claimed now.` : ''
+  return what(m, me) + held
+}
+
+function what (m, me) {
+  const who = cap(you(m.by, me))
+  const other = you(m.others[0], me)
+  const did = done(m)
+  if (m.kind === 'ai') return `${who} ${did} and ${other} changed it in the session. An AI combined the two: have a look.`
+  if (m.kind === 'claimed' && !m.heldBy) return `${who} ${did} while ${you(m.claimedBy, me)} had it claimed. The session's version is in the file.`
+  if (m.kind === 'claimed') return `${who} ${did}, but ${you(m.heldBy, me)} ${m.heldBy === me ? 'have' : 'has'} it claimed. The session's version is in the file.`
+  if (m.oursDeleted) return `${who} ${done(m, true)} and ${other} changed it in the session.`
+  if (m.theirsHash === null) return `${who} ${did}, but it was deleted in the session.`
+  return `${who} ${did} and ${other} changed it in the session${m.reason ? ` (${esc(m.reason)})` : ''}.`
+}
+
+const mineLabel = (m, me) => m.oursDeleted ? 'Delete it' : m.by === me ? 'Keep mine' : `Keep ${esc(m.by)}'s`
+const theirsLabel = (m, me) => m.theirsHash === null ? 'Keep it deleted' : !m.others[0] ? "Keep the session's" : m.others[0] === me ? 'Keep mine' : `Keep ${esc(m.others[0])}'s`
+
+/**
+ * The buttons for one record. `full` (the compare view) also offers both
+ * versions on rows an AI combined. Viewers see the record but can't act.
+ */
+export function mergeActionsHtml (m, me, editors, { full = false, viewer = false } = {}) {
+  const id = esc(m.id)
+  const b = (how, label, cls = 'ghost') => `<button class="btn sm ${cls}" data-merge="${id}" data-how="${how}">${label}</button>`
+  if (m.state === 'done') return `<span class="tag">Settled by ${you(m.resolvedBy, me)}</span>`
+  if (viewer) return '<span class="tag">View only</span>'
+  // Markers are in the file: only "done" and "keep mine" still make sense.
+  if (m.state === 'editing') return `<span class="hint">Markers are in the file</span>${b('mine', mineLabel(m, me))}${b('agent', 'Resolved', 'primary')}`
+  if (m.kind === 'ai') return (full ? b('mine', mineLabel(m, me)) : '') + b('review', 'Looks fine', 'primary')
+  // Settling writes the file, and so would an AI sent to merge it: ask whoever holds it, or keep theirs.
+  if (m.heldBy && m.heldBy !== me) {
+    const ask = m.asked
+      ? `<span class="tag">Asked ${esc(m.heldBy)} for it</span>`
+      : `<button class="btn sm" data-merge="${id}" data-ask="${esc(m.path)}" title="Join the file queue: ${esc(m.heldBy)} hands it to you when done">Ask ${esc(m.heldBy)} for it</button>`
+    return b('theirs', theirsLabel(m, me)) + ask
+  }
+  const hand = m.binary || m.oursDeleted || m.theirsHash === null ? '' : b('hand', 'Edit by hand')
+  const [first, ...rest] = editors
+  const send = first
+    ? `<span class="merge-send"><button class="btn sm" data-merge="${id}" data-send="${esc(first.id)}" ${first.auto ? 'title="Your AI merges it on its own, on this computer, and says how it went in chat"' : ''}>${first.auto ? 'Have your AI merge it' : `Send to ${esc(first.name)}`}</button>${rest.length
+      ? `<select class="input" data-merge-apps="${id}" aria-label="Send to another app"><option value="">Other app…</option>${rest.map((e) => `<option value="${esc(e.id)}">${e.auto ? 'Your AI, on its own' : esc(e.name)}</option>`).join('')}</select>`
+      : ''}</span>`
+    : ''
+  return b('mine', mineLabel(m, me)) + b('theirs', theirsLabel(m, me)) + hand + send
+}
+
+function sentToast (r, name) {
+  if (r.app === 'auto') { toast(`Your AI is on it in ${r.tool || 'your AI tool'}. It says how it went in chat.`); return }
+  toast(r.filled ? `Opened ${name} with the merge prompt filled in: send it.` : r.copied ? `Opened ${name}. The merge prompt is on your clipboard: paste it in.` : `Opened ${name}.`)
+}
+
+const settledToast = { hand: 'Markers are in the file. Remove them and save to finish.', mine: 'Done', theirs: 'Done', review: 'Thanks for checking', agent: 'Done' }
+
+/**
+ * Wires the merge buttons inside `el` (the bar, or the compare view). Call once
+ * per mount: the listeners are delegated, so redraws need no rebinding.
+ * `onCompare(id)` opens the compare view; `editors()` names the apps.
+ */
+export function bindMerges (el, { sessionId, onCompare, editors }) {
+  const nameOf = (app) => (editors().find((e) => e.id === app) || {}).name || 'the app'
+  const send = async (id, app) => sentToast(await api('POST', `/api/sessions/${sessionId()}/merges/send`, { id, app }), nameOf(app))
+  el.addEventListener('click', async (e) => {
+    const cmp = e.target.closest('[data-compare]')
+    if (cmp) { onCompare(cmp.dataset.compare); return }
+    const btn = e.target.closest('button[data-merge]')
+    if (!btn) return
+    btn.disabled = true
+    try {
+      if (btn.dataset.send) await send(btn.dataset.merge, btn.dataset.send)
+      else if (btn.dataset.ask) {
+        const file = btn.dataset.ask
+        await api('POST', `/api/sessions/${sessionId()}/request-file`, { path: file, title: `Settle the merge of ${file}`, description: 'I changed this file outside the session while you had it. When you hand it over, I will merge my changes with yours.' })
+        toast(`Asked for ${file}. It comes to you, with their notes, when they hand it over.`)
+      }
+      else {
+        await api('POST', `/api/sessions/${sessionId()}/merges/resolve`, { id: btn.dataset.merge, how: btn.dataset.how })
+        toast(settledToast[btn.dataset.how] || 'Done')
+      }
+    } catch (err) { toast(err.message) }
+    btn.disabled = false // a settled row goes away on the next status
+  })
+  el.addEventListener('change', async (e) => {
+    const sel = e.target.closest('[data-merge-apps]')
+    if (!sel || !sel.value) return
+    const app = sel.value
+    sel.value = ''
+    sel.blur() // lets the bar redraw again
+    try { await send(sel.dataset.mergeApps, app) } catch (err) { toast(err.message) }
+  })
+}
+
+/** One side: its lines, with the ones that differ from the base highlighted. */
+function column (title, text, base, note) {
+  let body
+  if (text == null) body = `<div class="fv-note">${note}</div>`
+  else {
+    const lines = text.split('\n')
+    if (lines.length > 1 && lines[lines.length - 1] === '') lines.pop()
+    const changed = changedLines(base == null ? [] : base.split('\n'), lines)
+    body = `<table class="fv-code"><tbody>${lines.map((l, i) =>
+      `<tr${changed.has(i) ? ' class="mchg"' : ''}><td class="ln">${i + 1}</td><td class="lt">${esc(l) || ' '}</td></tr>`).join('')}</tbody></table>`
+  }
+  return `<div class="merge-col"><div class="merge-col-head">${title}</div><div class="fv-scroll">${body}</div></div>`
+}
+
+/** A short fingerprint of a text (FNV-1a and length), so a redraw check needn't keep or compare whole files. */
+function textSig (t) {
+  if (t == null) return t === undefined ? 'u' : 'n'
+  let h = 0x811c9dc5
+  for (let i = 0; i < t.length; i++) h = Math.imul(h ^ t.charCodeAt(i), 0x01000193)
+  return `${t.length}:${(h >>> 0).toString(36)}`
+}
+
+/**
+ * The compare view. `m`: the record without its texts, as status has it.
+ * `texts`: { ours, base } from the full record, `undefined` while it loads.
+ * `theirs`: the session's text now, `null` when it isn't there, `undefined` while it loads.
+ */
+export function renderMergeView (el, { merge: m, texts, theirs, me, editors, viewer = false }) {
+  const showing = el.querySelector(':scope > .merge-view')
+  // Don't redraw under someone picking an app.
+  if (showing && el.contains(document.activeElement) && document.activeElement.tagName === 'SELECT') return
+  const sig = JSON.stringify([m, textSig(texts?.ours), textSig(texts?.base), texts === undefined, textSig(theirs), me, editors.map((e) => e.id), viewer])
+  if (showing && el._mergeSig === sig) return
+  el._mergeSig = sig
+  if (!m) { el.innerHTML = '<div class="main-empty merge-view"><p class="hint">That merge is settled or gone.</p></div>'; return }
+  const ours = texts ? texts.ours : null
+  const base = texts ? texts.base : null
+  const mine = m.by === me ? 'Yours, from offline' : `${esc(m.by)}'s, from offline`
+  const sess = m.kind === 'ai' ? 'In the session now, combined by AI' : `In the session${m.others[0] ? `, from ${you(m.others[0], me)}` : ''}`
+  const oursNote = m.oursDeleted ? 'Deleted offline' : texts === undefined ? loadingNote() : m.local ? `Too big to show here. It's in the merge folder on ${m.by === me ? 'this computer' : `${esc(m.by)}'s computer`}.` : 'Not available'
+  const theirsNote = theirs === undefined ? loadingNote() : m.theirsHash === null ? 'Deleted in the session' : 'Not in the session any more'
+  el.innerHTML = `<div class="fv merge-view">
+    <div class="fv-banner"><span class="fv-path mono">${esc(m.path)}</span><span class="fv-edited">${describe(m, me)}</span><span class="spacer"></span>${mergeActionsHtml(m, me, editors, { full: true, viewer })}</div>
+    ${m.binary
+      ? `<div class="fv-note">${I.file} Binary file: pick a version above.</div>`
+      : `<div class="merge-cols">${column(mine, ours, base, oursNote)}${column(sess, theirs, base, theirsNote)}</div>`}
+  </div>`
+}

package/src/ui/rail-model.js

@@ -0,0 +1,78 @@
+// The Files rail (rail.js): the folded Files pane as signals instead of names. Who holds
+// what, since when, why, who waits for it and when it frees up on its own; files to merge.
+// Pure, so tests can run it without a page.
+import { stitchTime } from './loom-model.js'
+
+/** A claim whose holder does nothing in the session this long is let go of (the relay's claimIdleMs). */
+export const CLAIM_IDLE_MS = 20 * 60 * 1000
+
+const isFolder = (pattern) => /\/(\*\*)?$/.test(String(pattern))
+const claimFolder = (pattern) => String(pattern).replace(/\/\*\*$/, '').replace(/\/+$/, '') // as tree.js
+
+/**
+ * Everything the rail and its lock list show. `claims`: the session's ({ pattern, by, ts, note,
+ * active, activeAt, queue }); `merges`: files to merge ({ id, path, state }); `me`: your name;
+ * `owners`: AI session name -> its person (chat.js aiOwners), so a person's AI sessions are one
+ * holder, "<person>'s AI"; `aiName`: person -> that name; `files`: the session's paths (to count a
+ * folder's); `open`: paths you have open (a merge there is urgent); `focusOf`: name -> what they
+ * said they're doing (a lock's why when it has no note); `kindOf`: name -> 'agent' for an AI agent.
+ * Returns { locks, holders, waiting, mine, merges: { count, urgent } }, locks oldest first.
+ */
+export function railModel ({ claims = [], merges = [], me = '', owners = new Map(), aiName = (p) => `${p}'s AI`, files = [], open = [], focusOf = () => '', kindOf = () => '', now = Date.now(), idleMs = CLAIM_IDLE_MS } = {}) {
+  const fileSet = new Set(files)
+  const holderOf = (by) => owners.has(by) ? aiName(owners.get(by)) : by
+  const locks = (claims || []).filter((c) => c && c.pattern && c.by).map((c) => {
+    const bare = claimFolder(c.pattern)
+    // "src/auth", "src/auth/" and "src/auth/**" all claim the folder (tree.js claimFolder).
+    const folder = isFolder(c.pattern) || (!fileSet.has(bare) && files.some((f) => f.startsWith(`${bare}/`)))
+    const path = folder ? bare : String(c.pattern)
+    const queue = Array.isArray(c.queue) ? c.queue : []
+    const last = typeof c.activeAt === 'number' ? c.activeAt : c.ts || now
+    return {
+      pattern: c.pattern,
+      path,
+      folder,
+      count: folder ? files.filter((f) => f.startsWith(`${path}/`)).length : 1,
+      by: c.by,
+      holder: holderOf(c.by),
+      mine: c.by === me,
+      ours: c.by === me || owners.get(c.by) === me, // yours or one of your AI sessions'
+      away: c.active === false,
+      since: c.ts || now,
+      why: c.note || focusOf(c.by) || '',
+      queue: queue.map((r) => ({ by: holderOf(r.by), title: r.title || '' })),
+      freesAt: last + idleMs
+    }
+  }).sort((a, b) => a.since - b.since)
+
+  const holders = []
+  for (const l of locks) {
+    let h = holders.find((x) => x.name === l.holder)
+    if (!h) holders.push(h = { name: l.holder, by: l.by, ours: l.ours, ai: owners.has(l.by) || kindOf(l.by) === 'agent', locks: 0, waiting: 0 })
+    h.locks++
+    h.waiting += l.queue.length
+  }
+  const openSet = new Set(open)
+  const toMerge = (merges || []).filter((m) => m && m.state !== 'done')
+  return {
+    locks,
+    holders,
+    waiting: locks.filter((l) => l.mine && l.queue.length), // someone waits for a file you hold: yours to act on
+    mine: locks.filter((l) => l.ours).length,
+    merges: { count: toMerge.length, urgent: toMerge.some((m) => openSet.has(m.path)) }
+  }
+}
+
+/** "25m", how long a lock has been held. */
+export const heldFor = (l, now = Date.now()) => stitchTime(l.since, now)
+
+/**
+ * When a lock frees up if its holder stays idle: "frees in 12m if idle", or, with someone
+ * waiting, "goes to Sriram in 12m if idle"; "frees any moment" once that time has come.
+ */
+export function freesText (l, now = Date.now()) {
+  const next = l.queue[0]
+  const left = l.freesAt - now
+  if (left <= 30 * 1000) return next ? `goes to ${next.by} any moment` : 'frees any moment'
+  return `${next ? `goes to ${next.by}` : 'frees'} in ${stitchTime(now - left, now)} if idle`
+}

package/src/ui/rail.js

@@ -0,0 +1,173 @@
+// The Files rail: the folded Files pane (session.js) as signals instead of names. An hourglass
+// when someone waits for a file you hold (it pulses: it's yours to act on), the lock with how
+// many files are locked, then one avatar per holder with their count. Each opens the lock list
+// beside it (rail-model.js): who holds what, for how long, why, who waits for it, and when it
+// frees up on its own. The Loom's "holds" opens the same list for one lane.
+import { esc, I, avatar, basename } from './common.js'
+import { heldFor, freesText, CLAIM_IDLE_MS } from './rail-model.js'
+
+export const HOURGLASS = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2h12M6 22h12"/><path d="M7 2v4a5 5 0 0 0 10 0V2"/><path d="M7 22v-4a5 5 0 0 1 10 0v4"/></svg>'
+const AVATARS = 5 // holders shown on the rail; past that, a "+N" that opens everyone's
+
+let pop = null // the lock list, once made
+let open = null // { filter, anchor, pinned }: what the open list shows and where
+let last = null // { model, opts }: the latest model, so an open list follows it
+let hoverTimer = 0
+let leaveTimer = 0
+
+const who = (name, me) => name === me ? 'You' : name
+const whose = (name, me) => name === me ? 'Your locks' : `${name}'s locks`
+
+/** The rail's buttons for model `m` (railModel). */
+export function railHtml (m, { me, colorOf }) {
+  const out = []
+  if (m.waiting.length) {
+    const n = m.waiting.reduce((s, l) => s + l.queue.length, 0)
+    const what = `${n} waiting for ${m.waiting.length === 1 ? `${basename(m.waiting[0].path)}, which you hold` : `${m.waiting.length} files you hold`}`
+    out.push(`<button type="button" class="rail-sig waiting" data-rail="waiting" title="${esc(what)}" aria-label="${esc(what)}">${HOURGLASS}<span class="rail-n">${n}</span></button>`)
+  }
+  const total = m.locks.length
+  const lockWhat = total ? `${total} locked${m.mine ? `, ${m.mine} by you or your AI` : ''}. Who holds what, and for how long` : 'Nothing is locked'
+  out.push(`<button type="button" class="rail-sig lock${m.mine ? ' mine' : ''}${total ? '' : ' none'}" data-rail="all" title="${esc(lockWhat)}" aria-label="${esc(lockWhat)}">${I.lock}${total ? `<span class="rail-n">${total}</span>` : ''}</button>`)
+  if (m.holders.length) {
+    out.push('<span class="rail-sep" aria-hidden="true"></span>')
+    const shown = m.holders.length > AVATARS + 1 ? m.holders.slice(0, AVATARS) : m.holders
+    for (const h of shown) {
+      const what = `${who(h.name, me)}: ${h.locks} locked${h.waiting ? `, ${h.waiting} waiting` : ''}`
+      out.push(`<button type="button" class="rail-who${h.ai ? ' ai' : ''}" data-rail="who" data-name="${esc(h.name)}" title="${esc(what)}" aria-label="${esc(what)}">${avatar(h.name, colorOf(h.by))}<span class="rail-n">${h.locks}</span>${h.waiting ? '<span class="rail-q" aria-hidden="true"></span>' : ''}</button>`)
+    }
+    if (shown.length < m.holders.length) out.push(`<button type="button" class="rail-more" data-rail="all" title="Everyone's locks">+${m.holders.length - shown.length}</button>`)
+  }
+  return out.join('')
+}
+
+/** The lock list for `filter`: 'all', 'waiting', or { who: holder }. */
+export function locksHtml (m, filter, { me, colorOf, now = Date.now() }) {
+  const byWho = filter && typeof filter === 'object' ? filter.who : null
+  const rows = filter === 'waiting' ? m.waiting : byWho ? m.locks.filter((l) => l.holder === byWho) : m.locks
+  const title = filter === 'waiting' ? 'Waiting on you' : byWho ? whose(byWho, me) : 'Locked files'
+  const row = (l) => {
+    const dir = l.folder ? '' : l.path.includes('/') ? l.path.slice(0, l.path.lastIndexOf('/') + 1) : ''
+    const name = l.folder ? `${l.path}/` : basename(l.path)
+    const queue = l.queue.length
+      ? `<div class="lk-q">${HOURGLASS}<span>${l.queue.length} waiting: ${esc(l.queue.map((r) => who(r.by, me)).join(', '))} · ${esc(freesText(l, now))}</span></div>`
+      : `<div class="lk-free">${esc(freesText(l, now))}</div>`
+    return `<li class="lk-row${l.ours ? ' ours' : ''}">
+      <button type="button" class="lk-main"${l.folder ? '' : ` data-lk-file="${esc(l.path)}"`} title="${esc(l.folder ? `${l.path}/ and everything in it` : `Open ${l.path}`)}"${l.folder ? ' disabled' : ''}>
+        <span class="lk-dot" style="--c:${esc(colorOf(l.by))}"></span>
+        <span class="lk-name">${esc(name)}${l.folder ? `<span class="lk-count">${l.count} file${l.count === 1 ? '' : 's'}</span>` : ''}</span>
+        <span class="lk-held" title="Held since ${esc(new Date(l.since).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }))}">${esc(heldFor(l, now))}</span>
+      </button>
+      ${dir ? `<div class="lk-dir">${esc(dir)}</div>` : ''}
+      <div class="lk-who"><b>${esc(who(l.holder, me))}</b>${l.holder !== l.by ? ` <i>${esc(l.by)}</i>` : ''}${l.away ? ' <i>(away)</i>' : ''}${l.why ? ` · ${esc(l.why)}` : ''}</div>
+      ${queue}
+    </li>`
+  }
+  return `<div class="lk-head"><span>${esc(title)}</span><span class="lk-total">${rows.length}</span></div>
+    ${rows.length ? `<ul class="lk-list">${rows.map(row).join('')}</ul>` : `<p class="lk-none">${filter === 'waiting' ? 'Nobody is waiting for your files.' : byWho ? 'Nothing locked.' : 'Nothing is locked right now.'}</p>`}
+    <div class="lk-foot">A lock is let go after ${Math.round(CLAIM_IDLE_MS / 60000)} minutes with no activity from its holder.</div>`
+}
+
+/**
+ * Draws the rail into `el` and keeps an open lock list up to date. `opts`: { me, colorOf, onFile }.
+ */
+export function renderRail (el, model, opts) {
+  last = { model, opts }
+  const html = railHtml(model, opts)
+  if (el.dataset.html !== html) { el.innerHTML = html; el.dataset.html = html }
+  if (!el.dataset.bound) bindRail(el)
+  if (open && pop && !pop.hidden) {
+    if (!open.anchor.isConnected) {
+      // The rail redrew: keep the list on the button that opened it.
+      const again = el.querySelector(open.filter && typeof open.filter === 'object' ? `[data-rail="who"][data-name="${CSS.escape(open.filter.who)}"]` : `[data-rail="${open.filter}"]`)
+      if (again) open.anchor = again
+    }
+    fill()
+  }
+}
+
+function bindRail (el) {
+  el.dataset.bound = '1'
+  const filterOf = (b) => b.dataset.rail === 'who' ? { who: b.dataset.name } : b.dataset.rail
+  el.addEventListener('click', (e) => {
+    const b = e.target.closest('[data-rail]')
+    if (!b) return
+    const filter = filterOf(b)
+    if (open && open.pinned && same(open.filter, filter)) { closeLocks(); return }
+    openLocks(b, filter, { pinned: true })
+  })
+  el.addEventListener('pointerover', (e) => {
+    const b = e.target.closest('[data-rail]')
+    if (!b || e.pointerType === 'touch') return
+    clearTimeout(leaveTimer)
+    if (open && open.pinned) return
+    clearTimeout(hoverTimer)
+    hoverTimer = setTimeout(() => openLocks(b, filterOf(b), { pinned: false }), open ? 0 : 250)
+  })
+  el.addEventListener('pointerleave', () => { clearTimeout(hoverTimer); leaveSoon() })
+}
+
+const same = (a, b) => (a && typeof a === 'object' && b && typeof b === 'object') ? a.who === b.who : a === b
+
+function leaveSoon () {
+  if (!open || open.pinned) return
+  clearTimeout(leaveTimer)
+  leaveTimer = setTimeout(closeLocks, 300)
+}
+
+/** Opens the lock list beside `anchor`. `pinned`: opened by a click, so it stays until a click elsewhere or Escape. */
+export function openLocks (anchor, filter, { pinned = true } = {}) {
+  if (!last) return
+  if (!pop) {
+    pop = document.createElement('div')
+    pop.className = 'lk-pop'
+    pop.id = 'lock-list'
+    pop.setAttribute('role', 'dialog')
+    pop.setAttribute('aria-label', 'Locked files')
+    pop.hidden = true
+    document.body.appendChild(pop)
+    pop.addEventListener('click', (e) => {
+      const f = e.target.closest('[data-lk-file]')
+      if (f) { closeLocks(); last.opts.onFile(f.dataset.lkFile) }
+    })
+    pop.addEventListener('pointerenter', () => clearTimeout(leaveTimer))
+    pop.addEventListener('pointerleave', leaveSoon)
+    document.addEventListener('pointerdown', (e) => {
+      if (!open || pop.hidden || pop.contains(e.target) || open.anchor.contains(e.target)) return
+      if (e.target.closest?.('[data-rail], [data-loom-holds]')) return // their own click decides
+      closeLocks()
+    }, true)
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && open && !pop.hidden) { const a = open.anchor; closeLocks(); a.focus?.() } })
+  }
+  clearTimeout(leaveTimer)
+  const fresh = pop.hidden
+  open = { filter, anchor, pinned: pinned || !!(open && open.pinned && !fresh) }
+  pop.hidden = false
+  fill()
+  if (fresh) { pop.classList.remove('in'); void pop.offsetWidth; pop.classList.add('in') }
+  for (const b of document.querySelectorAll('[aria-controls="lock-list"]')) b.setAttribute('aria-expanded', 'false')
+  anchor.setAttribute('aria-controls', 'lock-list')
+  anchor.setAttribute('aria-expanded', 'true')
+}
+
+export function closeLocks () {
+  clearTimeout(hoverTimer)
+  clearTimeout(leaveTimer)
+  if (open) open.anchor.setAttribute?.('aria-expanded', 'false')
+  open = null
+  if (pop) pop.hidden = true
+}
+
+function fill () {
+  const { model, opts } = last
+  pop.innerHTML = locksHtml(model, open.filter, opts)
+  // Beside its button: to the right (the rail, a lane head), else below.
+  const r = open.anchor.getBoundingClientRect()
+  const w = pop.offsetWidth
+  const h = pop.offsetHeight
+  const right = r.right + 8 + w <= window.innerWidth - 8
+  const left = right ? r.right + 8 : Math.max(8, Math.min(r.left, window.innerWidth - w - 8))
+  const top = right ? r.top - 6 : r.bottom + 6
+  pop.style.left = `${left}px`
+  pop.style.top = `${Math.max(8, Math.min(top, window.innerHeight - h - 8))}px`
+}