heyquilt 0.0.1 → 0.3.106

package/src/ui/signin.js

@@ -0,0 +1,75 @@
+// The sign-in screen. Until this computer is linked to a heyquilt.com account the
+// app shows only this. Signing in opens the website, where you approve this computer.
+import { $, esc, api, loadingNote } from './common.js'
+import { quiltMark } from './mark.js'
+
+const SIGNUP = 'https://heyquilt.com/signup'
+let poller = null
+
+function screen (inner) {
+  clearInterval(poller)
+  $('#app').innerHTML = `<div class="signin"><div class="card signin-card">
+    <div class="signin-mark">${quiltMark({ word: false })}</div>
+    ${inner}
+  </div></div>`
+}
+
+/** Shows the sign-in screen. `onSignedIn` runs once this computer is approved. */
+export function renderSignIn (message = '', onSignedIn = () => window.location.reload()) {
+  screen(`
+    <h1>Sign in to Quilt</h1>
+    ${message ? `<p class="signin-note">${esc(message)}</p>` : ''}
+    <button class="btn primary signin-btn" id="signin-go">Sign in</button>
+    <p class="hint">New to Quilt? <a href="${SIGNUP}" target="_blank" rel="noopener">Create an account</a></p>
+    <p class="error" id="signin-error"></p>`)
+  $('#signin-go').onclick = () => begin(onSignedIn)
+}
+
+async function begin (onSignedIn) {
+  const btn = $('#signin-go')
+  btn.disabled = true
+  try {
+    const acc = await api('POST', '/api/account/start')
+    // A computer linked before is signed straight back in: nothing to approve.
+    if (acc.signedIn) return onSignedIn()
+    window.open(acc.link.verificationUrl, '_blank', 'noopener')
+    waiting(acc.link, onSignedIn)
+  } catch (err) {
+    btn.disabled = false
+    $('#signin-error').textContent = err.message
+  }
+}
+
+function waiting (link, onSignedIn) {
+  screen(`
+    <h1>Sign in to Quilt</h1>
+    <p>Approve this computer in your browser</p>
+    <div class="signin-code" aria-label="Your code">${esc(link.userCode)}</div>
+    <p class="hint">Check the page shows this code.</p>
+    <p class="signin-wait">${loadingNote('Waiting for you to approve it…')}</p>
+    <div class="signin-actions"><button class="btn" id="signin-cancel">Cancel</button><button class="btn primary" id="signin-again">Open the page again</button></div>`)
+  $('#signin-again').onclick = () => window.open(link.verificationUrl, '_blank', 'noopener')
+  $('#signin-cancel').onclick = async () => {
+    await api('POST', '/api/account/cancel').catch(() => {})
+    renderSignIn('', onSignedIn)
+  }
+  poller = setInterval(async () => {
+    let acc
+    try { acc = await api('GET', '/api/account') } catch { return }
+    if (acc.signedIn) { clearInterval(poller); onSignedIn(); return }
+    // No link any more (cancelled elsewhere, or the app restarted): nothing left to wait for.
+    if (!acc.link) return over('That sign-in was stopped. Start over to get a new code.', onSignedIn)
+    const st = acc.link.state
+    if (st === 'expired') over('That code expired. Start over to get a new one.', onSignedIn)
+    else if (st === 'denied') over('This computer was not approved. Start over to try again.', onSignedIn)
+    else if (st === 'failed') over(acc.link.error || 'Signing in did not work. Start over to try again.', onSignedIn)
+  }, 2000)
+}
+
+function over (message, onSignedIn) {
+  screen(`
+    <h1>Sign in to Quilt</h1>
+    <p class="signin-note">${esc(message)}</p>
+    <button class="btn primary signin-btn" id="signin-go">Start over</button>`)
+  $('#signin-go').onclick = () => begin(onSignedIn)
+}

package/src/ui/sounds.js

@@ -0,0 +1,110 @@
+// Sounds for the moments that need you: someone mentions you or writes to you directly,
+// someone asks to be let in (only when you may let them in), or a task is handed to you.
+// What to play is worked out by pure helpers (tested in node); the tones are made with
+// Web Audio, so there are no sound files to ship and nothing for the CSP to allow.
+
+/** The events that can play a sound, the profile setting that turns each on, and its label. */
+export const SOUND_EVENTS = [
+  { kind: 'mention', setting: 'soundMentions', label: 'Mentions and direct messages', hint: 'Someone writes @you, or sends you a direct message.' },
+  { kind: 'letIn', setting: 'soundLetIn', label: 'Requests to join', hint: 'Someone asks to be let in, and you may let them in.' },
+  { kind: 'task', setting: 'soundTasks', label: 'Tasks for you', hint: 'A task is assigned to you or to your AI.' }
+]
+
+const escapeRe = (s) => String(s).replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+
+/** True when `text` mentions `name` the way chat does: @ starts a word, the name ends one, and "@Name's AI" is the AI's. */
+export function mentions (text, name) {
+  const n = String(name || '').trim()
+  if (!n || !text) return false
+  return new RegExp(`(^|[^\\w@])@${escapeRe(n)}(?![\\w-])(?!'s AI(?![\\w-]))`, 'iu').test(String(text))
+}
+
+/** Whether a live chat message is for `me`: a direct message to me, or one that mentions me. Never my own. */
+export function messageSound (message, me) {
+  if (!message || !me || typeof message.by !== 'string' || message.by === me) return null
+  if (message.to) return message.to === me ? 'mention' : null
+  return mentions(message.text, me) ? 'mention' : null
+}
+
+/** Whether someone new is asking to be let in. `waiting` is only sent to people who may let them in. */
+export function letInSound (before, after) {
+  if (!Array.isArray(after) || !after.length) return null
+  const known = new Set((Array.isArray(before) ? before : []).map((p) => p && p.key))
+  return after.some((p) => p && p.key && !known.has(p.key)) ? 'letIn' : null
+}
+
+const forMe = (t, me) => !!t && !t.archived && t.assignee === me && t.column !== 'done'
+
+/** Whether a task became mine (to me or to my AI) between two task lists, by someone else. */
+export function taskSound (before, after, me) {
+  if (!me || !Array.isArray(after)) return null
+  const was = new Map((Array.isArray(before) ? before : []).map((t) => [t && t.id, t]))
+  for (const t of after) {
+    if (!forMe(t, me)) continue
+    const old = was.get(t.id)
+    if (old && old.assignee === me && !!old.forAi === !!t.forAi) continue
+    // Your own new task, assigned to you as you add it, needs no sound.
+    if (!old && t.by === me) continue
+    return 'task'
+  }
+  return null
+}
+
+/** Whether `kind` is switched on in the profile. Every sound is on unless switched off. */
+export function soundOn (profile, kind) {
+  const ev = SOUND_EVENTS.find((e) => e.kind === kind)
+  return !!ev && (profile ? profile[ev.setting] : undefined) !== false
+}
+
+// A short, soft chime per event: [frequency Hz, start s, length s].
+const TONES = {
+  mention: [[880, 0, 0.12], [1318.5, 0.1, 0.18]],
+  letIn: [[659.3, 0, 0.12], [880, 0.12, 0.12], [1046.5, 0.24, 0.2]],
+  task: [[987.8, 0, 0.1], [740, 0.1, 0.18]]
+}
+const GAP_MS = 1500 // one sound for a burst of events, not one per event
+
+let ctx = null
+let last = 0
+
+function audio () {
+  const AC = globalThis.AudioContext || globalThis.webkitAudioContext
+  if (!AC) return null
+  if (!ctx) ctx = new AC()
+  if (ctx.state === 'suspended') ctx.resume().catch(() => {})
+  return ctx
+}
+
+/** Plays the chime for `kind`, at most once every GAP_MS. `force` skips the gap (the Settings preview). */
+export function playSound (kind, { force = false } = {}) {
+  const tones = TONES[kind]
+  if (!tones) return false
+  const now = Date.now()
+  if (!force && now - last < GAP_MS) return false
+  last = now
+  try {
+    const ac = audio()
+    if (!ac) return false
+    const t0 = ac.currentTime + 0.01
+    for (const [freq, start, len] of tones) {
+      const osc = ac.createOscillator()
+      const gain = ac.createGain()
+      osc.type = 'sine'
+      osc.frequency.value = freq
+      gain.gain.setValueAtTime(0.0001, t0 + start)
+      gain.gain.exponentialRampToValueAtTime(0.18, t0 + start + 0.015)
+      gain.gain.exponentialRampToValueAtTime(0.0001, t0 + start + len)
+      osc.connect(gain).connect(ac.destination)
+      osc.start(t0 + start)
+      osc.stop(t0 + start + len + 0.02)
+    }
+    return true
+  } catch { return false }
+}
+
+/** Browsers start audio muted until the page is used: wake it on the first click or key. */
+export function unlockSounds () {
+  const wake = () => { try { audio() } catch {} }
+  globalThis.addEventListener?.('pointerdown', wake, { once: true })
+  globalThis.addEventListener?.('keydown', wake, { once: true })
+}

package/src/ui/tool-logo.js

@@ -0,0 +1,86 @@
+// Favicon marks for AI coding tools shown in the partner feed (conversation
+// chips and AI reply badges). Names match profile/tool strings in TOOLS.
+// Browser-free so unit tests can import it from Node.
+
+function esc (s) {
+  return String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]))
+}
+
+/** Accessible display name for a tool string (empty → "AI"). */
+export function toolLabel (tool) {
+  const t = String(tool || '').trim()
+  return t || 'AI'
+}
+
+// Company domains for Google's favicon service (sz=128 → crisp at 14–16px).
+const DOMAINS = {
+  'Claude Code': 'anthropic.com',
+  Cursor: 'cursor.com',
+  Codex: 'openai.com',
+  Windsurf: 'windsurf.com',
+  'GitHub Copilot': 'github.com',
+  Zed: 'zed.dev',
+  Aider: 'aider.chat/docs',  // root returns Google's empty globe; /docs has the real icon
+  xAI: 'x.ai'
+  // Other → generic sparkle below
+}
+
+const faviconImg = (domain) =>
+  `<img class="tool-mark" src="https://www.google.com/s2/favicons?domain=${esc(domain)}&sz=128" width="16" height="16" alt="" />`
+
+const GENERIC = (
+  // Tiny inline SVG sparkle — fallback ONLY for unknown / empty / Other
+  `<svg class="tool-mark" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false">` +
+  '<path fill="currentColor" d="M12 2l1.9 5.6L19.5 9.5l-5.6 1.9L12 17l-1.9-5.6L4.5 9.5l5.6-1.9z"/>' +
+  '<path fill="currentColor" d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z"/>' +
+  '</svg>'
+)
+
+const ALIASES = {
+  claude: 'Claude Code',
+  'claude code': 'Claude Code',
+  'claude-code': 'Claude Code',
+  anthropic: 'Claude Code',
+  cursor: 'Cursor',
+  codex: 'Codex',
+  openai: 'Codex',
+  windsurf: 'Windsurf',
+  codeium: 'Windsurf',
+  copilot: 'GitHub Copilot',
+  'github copilot': 'GitHub Copilot',
+  'vs code': 'GitHub Copilot',
+  vscode: 'GitHub Copilot',
+  zed: 'Zed',
+  aider: 'Aider',
+  xai: 'xAI',
+  'x.ai': 'xAI',
+  grok: 'xAI',
+  other: 'Other'
+}
+
+/** Canonical TOOLS key for a free-form tool string, or null if unknown. */
+export function resolveToolKey (tool) {
+  const raw = String(tool || '').trim()
+  if (!raw) return null
+  if (Object.prototype.hasOwnProperty.call(DOMAINS, raw) || raw === 'Other') return raw
+  const lower = raw.toLowerCase()
+  if (ALIASES[lower]) return ALIASES[lower]
+  for (const key of [...Object.keys(DOMAINS), 'Other']) {
+    if (key.toLowerCase() === lower) return key
+  }
+  return null
+}
+
+/**
+ * HTML for a provider logo. Uses title + aria-label for the tool name so the
+ * visible string can be dropped from chips/badges. Known tools get a Google
+ * favicon <img>; unknown / empty / Other get a generic AI sparkle mark.
+ */
+export function toolLogo (tool, { className = 'tool-logo' } = {}) {
+  const label = toolLabel(tool)
+  const key = resolveToolKey(tool)
+  const domain = key && DOMAINS[key]
+  const mark = domain ? faviconImg(domain) : GENERIC
+  const cls = className ? ` class="${esc(className)}"` : ''
+  return `<span${cls} title="${esc(label)}" aria-label="${esc(label)}">${mark}</span>`
+}

package/src/ui/tree.js

@@ -0,0 +1,281 @@
+// The shared project's file tree: who edited what recently, what's claimed.
+import { esc, I, ago, colorFor, loadingNote } from './common.js'
+
+/** Where each person's chat files are kept (CHAT_FILES in pathrules.js, which the page can't load). */
+export const CHAT_FILES = 'Chat files'
+
+export const RECENT_MS = 2 * 60 * 1000
+/** How long a file brought in from GitHub keeps its GitHub badge (an edit in the session takes it away sooner). */
+export const GITHUB_BADGE_MS = 10 * 60 * 1000
+
+const shortAgo = (ts) => {
+  const s = Math.max(0, Math.round((Date.now() - ts) / 1000))
+  return s < 60 ? `${s}s` : `${Math.round(s / 60)}m`
+}
+
+/** Who holds a claim, as the tree shows it: "you", "Duncan", or "Duncan (away)" when they aren't in the session. */
+export const claimHolder = (c, me) => c.by === me && c.active !== false ? 'you' : `${c.by}${c.active === false ? ' (away)' : ''}`
+
+const queueOf = (c) => (c && Array.isArray(c.queue) ? c.queue : [])
+
+/** A claim's tooltip: who, since when, their note, the account that holds it, and who waits for it. */
+export const claimTitle = (c, me) => [
+  `Claimed by ${claimHolder(c, me)}${c.ts ? ` at ${new Date(c.ts).toLocaleString()}` : ''}`,
+  c.note || '',
+  c.byId ? `Account: ${c.byId}` : '',
+  c.activeAt ? `Last active ${new Date(c.activeAt).toLocaleTimeString()}; let go after 20 minutes with no activity` : '',
+  ...queueOf(c).map((r, i) => `${i + 1}. ${r.by === me ? 'You' : r.by} waiting: ${r.title}`)
+].filter(Boolean).join('\n')
+
+/** "src/auth", "src/auth/", "src/auth/**" all claim the folder src/auth. */
+export const claimFolder = (pattern) => String(pattern).replace(/\/\*\*$/, '').replace(/\/+$/, '')
+
+function buildTree (files) {
+  const root = { name: '', path: '', dirs: new Map(), files: [] }
+  for (const f of files) {
+    const parts = f.path.split('/')
+    let node = root
+    for (let i = 0; i < parts.length - 1; i++) {
+      const p = parts.slice(0, i + 1).join('/')
+      if (!node.dirs.has(parts[i])) node.dirs.set(parts[i], { name: parts[i], path: p, dirs: new Map(), files: [] })
+      node = node.dirs.get(parts[i])
+    }
+    node.files.push({ ...f, name: parts[parts.length - 1] })
+  }
+  return root
+}
+
+/**
+ * Claims on files or folders inside a folder (not the folder itself): a collapsed folder shows them,
+ * so a claim deep in the tree is seen without opening every folder.
+ */
+export function claimsInside (claims, dir) {
+  const pre = dir ? `${dir}/` : ''
+  return (claims || []).filter((c) => { const f = claimFolder(c.pattern); return f !== dir && f.startsWith(pre) })
+}
+
+/** The badge a collapsed folder shows for the claims inside it: "Brandon", "you +1", with each claim in the tooltip. */
+export function insideBadge (claims, me) {
+  if (!claims.length) return ''
+  const holders = [...new Set(claims.map((c) => claimHolder(c, me)))]
+  const label = holders.length > 1 ? `${holders[0]} +${holders.length - 1}` : holders[0]
+  const title = claims.map((c) => `${claimFolder(c.pattern)}: ${claimHolder(c, me)}${c.note ? ` (${c.note})` : ''}`).join('\n')
+  const away = claims.every((c) => c.active === false)
+  // Only boxes inside (boxes.js): the box mark, so a folded folder reads like its files.
+  if (claims.every((c) => c.box)) {
+    const who = [...new Set(claims.map((c) => c.by === me || c.of === me ? 'you' : c.by))]
+    return `<span class="t-badge box inside" title="${esc(`Unfinished work inside:\n${claims.map((c) => `${c.pattern}: ${c.by === me || c.of === me ? 'yours' : c.by}`).join('\n')}`)}">${I.box}${esc(who.length > 1 ? `${who[0]} +${who.length - 1}` : who[0])}</span>`
+  }
+  return `<span class="t-badge claim inside${away ? ' away' : ''}" title="${esc(`Claimed inside:\n${title}`)}">${I.lock}${esc(label)}</span>`
+}
+
+function hasRecent (node, me) {
+  return node.files.some((f) => f.edited && f.edited.by !== me && Date.now() - f.edited.ts < RECENT_MS) ||
+    [...node.dirs.values()].some((d) => hasRecent(d, me))
+}
+
+/**
+ * @param {HTMLElement} el
+ * @param {{ files: object[], claims: object[] }} tree
+ * @param {{ me: string, expanded: object, selected: string|null }} view
+ */
+export function renderTree (el, tree, { me, expanded, selected }) {
+  if (!tree) { el.innerHTML = `<div class="empty-note" style="padding:12px 14px">${loadingNote('Loading files…')}</div>`; return }
+  const files = tree.files
+  if (!files.length) { el.innerHTML = '<div class="empty-note" style="padding:12px 14px">No shared files yet.</div>'; return }
+  const folderClaims = new Map()
+  for (const c of tree.claims) folderClaims.set(claimFolder(c.pattern), c)
+  const root = buildTree(files)
+  const rows = []
+
+  // A box (boxes.js): someone's unfinished work, marked in amber; theirs isn't in this folder yet.
+  const boxMine = (c) => c.by === me || c.of === me
+  const boxBadge = (c) => `<span class="t-badge box${boxMine(c) ? ' own' : ''}" title="${esc(boxMine(c) ? `Your unfinished work: in your folder only, until you commit it${queueOf(c).length ? `. ${queueOf(c).length} waiting for it` : ''}` : `${c.by}'s unfinished work: not in your folder until they commit it. See it under them in People.`)}">${I.box}${esc(boxMine(c) ? 'you' : c.by)}${queueOf(c).length ? ` · ${queueOf(c).length} waiting` : ''}</span>`
+  const claimBadge = (c) => c && c.box ? boxBadge(c) : c ? `<span class="t-badge claim${c.active === false ? ' away' : ''}" title="${esc(claimTitle(c, me))}">${I.lock}${esc(claimHolder(c, me))}${queueOf(c).length ? ` · ${queueOf(c).length} waiting` : ''}</span>` : ''
+  // Who just edited a file: a button to its Changes tab. Its +/− shows in the row's change card.
+  const editBadge = (f, byOther) => `<button type="button" class="t-badge ${byOther ? 'edit' : 'mine'}" data-changes="${esc(f.path)}" aria-label="See what changed in ${esc(f.path)}">${esc(f.edited.by === me ? 'you' : f.edited.by)} · ${shortAgo(f.edited.ts)}</button>`
+  const walk = (node, depth) => {
+    const dirs = [...node.dirs.values()].sort((a, b) => (a.path === CHAT_FILES) - (b.path === CHAT_FILES) || a.name.localeCompare(b.name)) // chat files last
+    for (const d of dirs) {
+      const open = expanded[d.path] ?? depth === 0
+      const claim = folderClaims.get(d.path)
+      // The chat files folder (session.js): each person's own copy of what was sent in chat, nothing to claim.
+      if (d.path === CHAT_FILES) {
+        rows.push(`<div class="t-row t-dir t-chat" role="treeitem" aria-expanded="${open}" tabindex="-1" data-dir="${esc(d.path)}" style="--depth:${depth}" title="Files sent in this session's chat. Only people in the session get them; never synced or committed.">
+          <span class="t-caret${open ? ' open' : ''}">${I.caret}</span><span class="t-name">${esc(d.name)}</span><span class="t-badge chat">${I.lock}session only</span></div>`)
+        if (open) walk(d, depth + 1)
+        continue
+      }
+      rows.push(`<div class="t-row t-dir" role="treeitem" aria-expanded="${open}" tabindex="-1" data-dir="${esc(d.path)}" style="--depth:${depth}">
+        <span class="t-caret${open ? ' open' : ''}">${I.caret}</span><span class="t-name">${esc(d.name)}</span>
+        ${!open && hasRecent(d, me) ? '<span class="t-dot" title="Recently edited inside"></span>' : ''}${claim ? claimBadge(claim) : !open ? insideBadge(claimsInside(tree.claims, d.path), me) : ''}
+        <button class="t-more" data-more="${esc(d.path)}" data-kind="dir" aria-label="More for ${esc(d.name)}">${I.more}</button></div>`)
+      if (open) walk(d, depth + 1)
+    }
+    for (const f of node.files.sort((a, b) => a.name.localeCompare(b.name))) {
+      if (f.chat) {
+        rows.push(`<div class="t-row t-file${selected === f.path ? ' on' : ''}" role="treeitem" tabindex="-1" data-file="${esc(f.path)}" style="--depth:${depth}" title="${esc(`Sent in chat by ${f.chat.by === me ? 'you' : f.chat.by}${f.chat.to ? ` to ${f.chat.to === me ? 'you' : f.chat.to}` : ''}`)}">
+          <span class="t-ico">${I.file}</span><span class="t-name">${esc(f.name)}</span><span class="t-badge chat">${esc(f.chat.by === me ? 'you' : f.chat.by)}</span></div>`)
+        continue
+      }
+      const recent = !!f.edited && Date.now() - f.edited.ts < RECENT_MS
+      const byOther = recent && f.edited.by !== me
+      const ownClaim = f.claim && claimFolder(f.claim.pattern) === f.path ? f.claim : null
+      // The holder of a claim is the one editing it: their claim badge says so, one badge is enough on a narrow row.
+      // GitHub's version, not edited in the session since: GitHub's commit takes the "who edited" place, for ten
+      // minutes after it came in (an older relay doesn't say when: then after the commit).
+      const gh = f.github && Date.now() - (f.github.came || f.github.at || 0) < GITHUB_BADGE_MS ? f.github : null
+      const ghBadge = gh ? `<span class="t-badge gh" title="${esc(`From GitHub: ${gh.sha.slice(0, 7)}${gh.by ? ` by ${gh.by}` : ''}${gh.subject ? `: ${gh.subject}` : ''}. Not edited in the session since.`)}">${I.github}<span class="t-gh">${esc(gh.by || 'GitHub')}${gh.at ? ` · ${shortAgo(gh.at)}` : ''}</span></span>` : ''
+      const ghost = ownClaim && ownClaim.box && !boxMine(ownClaim)
+      rows.push(`<div class="t-row t-file${selected === f.path ? ' on' : ''}${ghost ? ' ghost' : ''}" role="treeitem" tabindex="-1" data-file="${esc(f.path)}" style="--depth:${depth}" title="${esc(f.path)}">
+        <span class="t-ico">${I.file}</span><span class="t-name">${esc(f.name)}</span>${ghBadge}
+        ${recent && !gh && !(ownClaim && ownClaim.by === f.edited.by) ? editBadge(f, byOther) : ''}
+        ${claimBadge(ownClaim)}
+        <button class="t-more" data-more="${esc(f.path)}" data-kind="file" aria-label="More for ${esc(f.name)}">${I.more}</button></div>`)
+    }
+  }
+  walk(root, 0)
+  el.innerHTML = `<div class="t-list" role="tree">${rows.join('')}</div>`
+}
+
+/**
+ * The ⋯ menu for a file or folder: claim it (with an optional note) or
+ * release your claim. Others' claims are shown with their file queue: ask for the file
+ * (join the queue) or withdraw; the holder hands it off to the first one waiting, with
+ * context. The owner may release anyone's claim (it goes to the first one waiting).
+ */
+export function openTreeMenu (anchor, { path, kind, claim, me, owner, onClaim, onRelease, onClearAway, onRequest, onWithdraw, onHandoff, onOpen }) {
+  closeTreeMenu()
+  const menu = document.createElement('div')
+  menu.className = 'popover tree-menu'
+  menu.setAttribute('role', 'menu')
+  const isAway = claim && claim.active === false
+  const mine = claim && claim.by === me && !isAway
+  const theirs = claim && !mine
+  const queue = queueOf(claim)
+  const myRequest = queue.find((r) => r.by === me)
+  // The owner may release anyone's claim; anyone may release one held under their name from before.
+  const canRelease = theirs && (owner || (isAway && claim.by === me))
+  const waiting = queue.length ? `<div class="pop-queue"><div class="label">File queue</div>${queue.map((r, i) => `<div class="pop-req"><b>${i + 1}. ${esc(r.by === me ? 'You' : r.by)}</b> ${esc(r.title)}${r.description ? `<div class="hint">${esc(r.description)}</div>` : ''}</div>`).join('')}</div>` : ''
+  menu.innerHTML = `
+    <div class="pop-title">${esc(path)}</div>
+    ${kind === 'file' ? `<button class="pop-item" data-act="open" role="menuitem">${I.file}Open</button>` : ''}
+    ${theirs ? `<div class="pop-note" title="${esc(claimTitle(claim, me))}">${I.lock}<span>Claimed by <b>${esc(claimHolder(claim, me))}</b>${claim.note ? `: ${esc(claim.note)}` : ''}</span></div>` : ''}
+    ${waiting}
+    ${mine && !queue.length ? `<button class="pop-item" data-act="release" role="menuitem">${I.lock}Release your claim</button>` : ''}
+    ${mine && queue.length && onHandoff ? `<form class="pop-form" data-form="handoff"><label class="label" for="handoff-context">Hand off to ${esc(queue[0].by)}</label>
+      <textarea class="input" id="handoff-context" rows="3" maxlength="2000" placeholder="What you changed, what's left, anything they should know" required></textarea>
+      <button class="btn sm primary" type="submit">Hand off</button></form>` : ''}
+    ${canRelease ? `<button class="pop-item" data-act="release" role="menuitem">${I.lock}${queue.length ? `Release ${esc(claim.by)}'s claim (goes to ${esc(queue[0].by)})` : `Release ${esc(claim.by)}'s claim`}</button>` : ''}
+    ${isAway && owner && onClearAway ? '<button class="pop-item" data-act="clear-away" role="menuitem">Release every claim held by someone away</button>' : ''}
+    ${myRequest && onWithdraw ? '<button class="pop-item" data-act="withdraw" role="menuitem">Withdraw your request</button>' : ''}
+    ${theirs && !myRequest && kind === 'file' && onRequest ? `<form class="pop-form" data-form="request"><label class="label" for="req-title">Ask for this file</label>
+      <input class="input" id="req-title" maxlength="120" placeholder="Working on … for …" autocomplete="off" required>
+      <textarea class="input" id="req-desc" rows="3" maxlength="300" placeholder="What you plan to change, in short (300 characters)"></textarea>
+      <button class="btn sm primary" type="submit">Join the queue</button></form>` : ''}
+    ${!claim ? `<form class="pop-form" data-form="claim"><label class="label" for="claim-note">Claim this ${kind === 'dir' ? 'folder' : 'file'}</label>
+      <input class="input" id="claim-note" placeholder="What are you doing? (optional)" autocomplete="off">
+      <button class="btn sm primary" type="submit">${I.lock}Claim</button></form>` : ''}`
+  document.body.appendChild(menu)
+  const r = anchor.getBoundingClientRect()
+  const w = 280
+  menu.style.left = `${Math.max(8, Math.min(r.right - w, window.innerWidth - w - 8))}px`
+  menu.style.top = `${Math.max(8, Math.min(r.bottom + 4, window.innerHeight - menu.offsetHeight - 8))}px`
+  menu.addEventListener('click', (e) => {
+    const b = e.target.closest('[data-act]')
+    if (!b) return
+    if (b.dataset.act === 'open') onOpen()
+    if (b.dataset.act === 'release') onRelease()
+    if (b.dataset.act === 'clear-away') onClearAway()
+    if (b.dataset.act === 'withdraw') onWithdraw(myRequest.id)
+    closeTreeMenu()
+  })
+  const form = menu.querySelector('form')
+  const val = (sel) => menu.querySelector(sel).value.trim()
+  if (form) {
+    form.onsubmit = (e) => {
+      e.preventDefault()
+      const f = form.dataset.form
+      if (f === 'claim') onClaim(val('#claim-note'))
+      if (f === 'request') onRequest({ title: val('#req-title'), description: val('#req-desc') })
+      if (f === 'handoff') onHandoff({ to: queue[0].id, context: val('#handoff-context') })
+      closeTreeMenu()
+    }
+    setTimeout(() => form.querySelector('.input')?.focus(), 0)
+  } else {
+    menu.querySelector('.pop-item')?.focus()
+  }
+  const away = (e) => { if (!menu.contains(e.target) && e.target !== anchor) closeTreeMenu() }
+  const esc_ = (e) => { if (e.key === 'Escape') { closeTreeMenu(); anchor.focus?.() } }
+  setTimeout(() => document.addEventListener('mousedown', away), 0)
+  document.addEventListener('keydown', esc_)
+  closeTreeMenu.cleanup = () => { document.removeEventListener('mousedown', away); document.removeEventListener('keydown', esc_); menu.remove() }
+}
+
+export function closeTreeMenu () {
+  if (closeTreeMenu.cleanup) { closeTreeMenu.cleanup(); closeTreeMenu.cleanup = null }
+}
+
+// ------------------------------------------------------------ change card --
+// Hovering (or arrowing to) a file the session changed shows a card beside the
+// row: its +/− in this session, who made them and when. session.js decides when.
+
+const CARD_PEOPLE = 4
+const CARD_FOOT = {
+  all: 'Click to open · its <b>Changes</b> tab shows the diff',
+  some: 'Click to open · its <b>Changes</b> tab shows the latest diffs',
+  none: 'Click to open · its line-by-line diff is no longer kept'
+}
+
+/**
+ * The card for one file, from changes.js fileChanges().
+ * @param {{ path: string, added: number, removed: number, kind?: string, by: object[] }} f
+ * @param {{ who?: (name: string) => string, colorOf?: (name: string) => string|null, kept?: 'all'|'some'|'none'|null }} [o]
+ *   kept: how much of it the history still has a diff for (null: not known yet)
+ */
+export function changeCardHtml (f, { who = (n) => n, colorOf = () => null, kept = null } = {}) {
+  const by = [...(f.by || []).filter((b) => !b.pulled), ...(f.by || []).filter((b) => b.pulled)] // their own edits before git pulls
+  const person = (b) => `<li>
+      <span class="tcard-dot" style="--c:${esc(colorFor(b.name, colorOf(b.name)))}"></span>
+      <span class="tcard-who">${esc(who(b.name))}${b.pulled ? ' <i>pulled from git</i>' : ''}</span>
+      <span class="tcard-delta"><span class="add">+${b.added}</span> <span class="del">−${b.removed}</span></span>
+      <span class="tcard-ago">${esc(ago(b.ts))}</span>
+    </li>`
+  const more = by.length - CARD_PEOPLE
+  return `<div class="tcard-path">${esc(f.path)}</div>
+    <div class="tcard-total"><span class="add">+${f.added}</span> <span class="del">−${f.removed}</span><span class="tcard-in">in this session${f.kind === 'created' ? ' · new file' : ''}</span></div>
+    ${by.length ? `<ul class="tcard-people">${by.slice(0, CARD_PEOPLE).map(person).join('')}${more > 0 ? `<li class="tcard-more">and ${more} more</li>` : ''}</ul>` : ''}
+    <div class="tcard-foot">${CARD_FOOT[kept] || 'Click to open'}</div>`
+}
+
+let card = null
+
+/** Shows `html` in the card beside `row` (to its right, or under it when there's no room). */
+export function showChangeCard (row, html) {
+  if (!card) {
+    card = document.createElement('div')
+    card.className = 'tcard'
+    card.id = 'tree-change-card'
+    card.setAttribute('role', 'tooltip')
+    document.body.appendChild(card)
+  }
+  const fresh = card.hidden !== false
+  card.innerHTML = html
+  card.hidden = false
+  if (fresh) { card.classList.remove('in'); void card.offsetWidth; card.classList.add('in') }
+  const r = row.getBoundingClientRect()
+  const w = card.offsetWidth
+  const h = card.offsetHeight
+  const right = r.right + 8 + w <= window.innerWidth - 8
+  const left = right ? r.right + 8 : Math.max(8, Math.min(r.left + 16, window.innerWidth - w - 8))
+  const top = right ? r.top - 6 : r.bottom + 4
+  card.style.left = `${left}px`
+  card.style.top = `${Math.max(8, Math.min(top, window.innerHeight - h - 8))}px`
+  for (const el of document.querySelectorAll('[aria-describedby="tree-change-card"]')) if (el !== row) el.removeAttribute('aria-describedby')
+  row.setAttribute('aria-describedby', 'tree-change-card')
+}
+
+export function hideChangeCard () {
+  if (card) card.hidden = true
+  for (const el of document.querySelectorAll('[aria-describedby="tree-change-card"]')) el.removeAttribute('aria-describedby')
+}