@leftoff/cli 0.9.17-beta.7 → 0.9.17-beta.9

package/ui/fs-side.js

@@ -71,12 +71,12 @@ export function railHtml({ cpCount = 0, cu = true, away = '' } = {}, { esc, icon
 // The whole panel. side/foot: the panel's markup (built by app.js from the
 // session); label: the peek's one line; collapsed: the rail instead (desktop);
 // sheet: the phone's sheet is raised.
-export function fsSideHtml({ id, side = '', foot = '', label = '', away = '', cpCount = 0, cu = true, wt = false, look = 0, collapsed = false, sheet = false, width = SIDE_W_DEFAULT, viewport = 0 }, { esc, icon }) {
+export function fsSideHtml({ id, side = '', foot = '', label = '', away = '', cpCount = 0, cu = true, wt = false, look = 0, collapsed = false, sheet = false, scrolled = false, width = SIDE_W_DEFAULT, viewport = 0 }, { esc, icon }) {
   const peek = '<div class="fs-peek">' +
     '<button type="button" class="fs-peek-b" data-action="fs-sheet" aria-expanded="' + (sheet ? 'true' : 'false') + '" aria-controls="fsSide"><span class="fs-grip" aria-hidden="true"></span><span class="fs-peek-t">' + esc(label) + '</span>' + icon(sheet ? 'chevron-down' : 'chevron-up') + '</button>' +
     (cu ? '<button type="button" class="btn fs-peek-cu' + (away ? ' primary' : '') + '" data-action="scu-open" data-id="' + esc(id) + '"' + (away ? ' aria-label="' + esc(away + ' · Catch me up') + '"' : '') + '>' + icon('coffee') + 'Catch me up</button>' : '') +
     // 0.9.17 Walk me through it, beside Catch me up in the peek (its eye count when there's something to look at)
     (wt ? '<button type="button" class="btn fs-peek-wt" data-action="wt-open" data-id="' + esc(id) + '" aria-label="' + esc('Walk me through it' + (look ? ', ' + look + ' to look closely at' : '')) + '" data-tip="Walk me through the code changes">' + icon('git-compare') + (look ? '<span class="fs-peek-n" aria-hidden="true">' + esc(String(look)) + '</span>' : '') + '</button>' : '') + '</div>'
-  return '<aside class="fs-side' + (collapsed ? ' collapsed' : '') + (sheet ? ' sheet-up' : '') + '" id="fsSide" data-sid="' + esc(id) + '" aria-label="This session">' +
+  return '<aside class="fs-side' + (collapsed ? ' collapsed' : '') + (sheet ? ' sheet-up' : '') + (scrolled ? ' is-scrolled' : '') + '" id="fsSide" data-sid="' + esc(id) + '" aria-label="This session">' +
     resizeHandleHtml({ width, viewport }, { esc }) + peek + '<div class="fs-side-in">' + side + '</div>' + foot + railHtml({ cpCount, cu, away }, { esc, icon }) + '</aside>'
 }

package/ui/hosted-by.js

@@ -0,0 +1,50 @@
+// 0.9.18 Hosted by (Settings → Use from anywhere): which of your machines serves
+// <user>.leftoff.dev. The relay decides (relay/src/hosting.js): your preferred host
+// whenever it's online, else the one already hosting, else an online one (Macs
+// first). Here: each machine with its state by shape and word, the host marked,
+// "Make host" per online machine, and Preferred (Automatic or a machine).
+// Pure (no DOM), so the check and the unit tests render it directly.
+const STATE = {
+  online: ['●', 'Online'],
+  not_answering: ['◐', 'Not answering'],
+  reconnecting: ['◌', 'Reconnecting'],
+  asleep: ['○', 'Offline'],
+}
+export function hostState(m) { return STATE[m && m.state] || (m && m.online ? STATE.online : STATE.asleep) }
+const kind = (p) => (p === 'darwin' ? 'Mac' : p === 'linux' ? 'Linux' : p ? p : '')
+
+export function hostedByHtml(h, { esc = (s) => String(s == null ? '' : s), canChange = true, viewing = null } = {}) {
+  if (!h || !Array.isArray(h.macs) || !h.macs.length) return ''
+  let out = '<label>Hosted by</label><div class="hostedby" id="hostedBy">'
+  if (!h.supported) {
+    out += '<div class="hint nomt">Your relay serves the board from the machine that connected last. Choosing a host needs a relay update.</div></div>'
+    return out
+  }
+  const host = h.host || {}
+  const pref = host.preferred || null
+  out += '<ul class="hosts" role="list">'
+  for (const m of h.macs) {
+    const [shape, word] = hostState(m)
+    const isHost = m.machine === host.machine
+    const k = kind(m.platform)
+    out += '<li class="host-row' + (isHost ? ' is-host' : '') + (m.online ? ' on' : ' off') + '" data-machine="' + esc(m.machine) + '">' +
+      '<span class="host-shape" aria-hidden="true">' + shape + '</span>' +
+      '<span class="host-main"><b>' + esc(m.machine) + '</b>' + (isHost ? ' <span class="chip host-chip">Host</span>' : '') + (m.machine === pref ? ' <span class="chip pref-chip">Preferred</span>' : '') +
+      '<span class="faint host-sub">' + word + (k ? ' · ' + esc(k) : '') + (viewing && viewing === m.machine && !isHost ? ' · this browser' : '') + (m.serves === 0 ? ' · can’t open your paired browsers’ keys' : '') + '</span></span>'
+    if (canChange && !isHost) {
+      out += '<button type="button" class="btn sm host-make" data-action="relay-host" data-machine="' + esc(m.machine) + '"' + (m.online ? '' : ' disabled data-tip="' + esc(m.machine) + ' is offline: it can host once it’s online"') + '>Make host</button>'
+    }
+    out += '</li>'
+  }
+  out += '</ul>'
+  if (host.pending) out += '<div class="hint nomt host-pending">' + esc(host.pending.machine) + ' is back and takes over in a few seconds.</div>'
+  if (!host.machine) out += '<div class="hint nomt warnish">None of your machines is online. The first one to connect hosts.</div>'
+  // Preferred: a segmented choice, Automatic first
+  out += '<div class="host-pref" role="radiogroup" aria-label="Preferred host"><span class="host-pref-label">Preferred</span>'
+  const opt = (val, label, tip) => '<button type="button" role="radio" class="hp-opt' + ((pref || '') === val ? ' on' : '') + '" aria-checked="' + ((pref || '') === val ? 'true' : 'false') + '" data-action="relay-host-pref" data-machine="' + esc(val) + '" data-tip="' + esc(tip) + '"' + (canChange ? '' : ' disabled') + '>' + esc(label) + '</button>'
+  out += opt('', 'Automatic', 'Any online machine; a Mac before Linux, and the host stays put while it’s online')
+  for (const m of h.macs) out += opt(m.machine, m.machine, m.machine + ' hosts whenever it’s online; when it’s closed another machine takes over, and it takes back when it returns')
+  out += '</div>'
+  out += '<div class="hint">' + (pref ? esc(pref) + ' hosts whenever it’s online. ' : '') + 'When the host closes or loses its network, another online machine takes over within about half a minute. Phones and browsers stay paired.</div>'
+  return out + '</div>'
+}

package/ui/live-view.js

@@ -168,7 +168,7 @@ export function senderLabel(m) {
   if (!device && by.transport === 'local') device = 'this Mac'
   if (!device && m.where) { // older entries: just the where line
     const w = String(m.where)
-    device = /^on this machine/.test(w) ? 'this Mac' : (w.match(/ as ([^(·]+?)(?: \(|$| ·)/) || [])[1] || (w.match(/^from (.+?)’s board/) || [])[1] || null
+    device = /^on this machine/.test(w) ? 'this Mac' : (w.match(/ as ([^(·]+?)(?: \(|$| ·)/) || [])[1] || (w.match(/^from (.+?)’s board/) || [])[1] || (w.match(/^from (.+?) · (?:via relay|direct)\b/) || [])[1] || null // 2026-10-29: "from iPhone · via relay"
   }
   let label = 'You' + (device ? ' · from ' + device : '')
   const path = PATHS[by.transport] || null

package/ui/prs.js

@@ -93,6 +93,11 @@ export async function prCopyClick(btn, env = {}) {
 export function prMoreHtml(p, open = false) {
   return ' · <button type="button" class="pr-more pr-toggle" data-action="pr-expand" data-url="' + esc(p.url) + '" aria-expanded="' + !!open + '">' + (open ? 'Less' : 'More…') + '</button>'
 }
+// 2026-10-29 a compact row (closed): GitHub only; Copy link and Unlink come with the details
+export function prGhOnlyHtml(p) {
+  const url = safeUrl(p.url)
+  return url ? '<div class="pr-actions"><a class="pr-ic pr-gh" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer" data-tip="Open on GitHub" aria-label="Open ' + esc('#' + (p.number || '')) + ' on GitHub">' + GH_MARK + '</a></div>' : ''
+}
 export function prActionsHtml(p, { unlinkId = null } = {}) {
   const url = safeUrl(p.url), n = '#' + (p.number || '')
   if (!url && !unlinkId) return ''
@@ -113,21 +118,25 @@ export function sessionPrsSection(s, { mayEdit = true, open = null, details = {}
   const n = list.length + unchecked.length
   let h = '<h2>Pull requests' + (n ? ' <span class="count">' + n + '</span>' : '') + '</h2>'
   if (list.length) {
-    h += '<div class="prlist">' + list.map((p) => {
-      // 0.9.8: tap the title (or More…) for the same details as the PRs page, in place; GitHub ↗ still goes out
+    // 2026-10-29 one compact row each: the state (shape + word), #, the title on one line; tap the title for
+    // the repo, branch, checks and the details in place. Copy, GitHub and Unlink stay one tap away.
+    h += '<div class="prlist pr-compact">' + list.map((p) => {
       const isOpen = !!(open && open.has && open.has(p.url))
       return '<article class="prrow slim' + (isOpen ? ' open' : '') + '" data-pr="' + esc(p.url) + '"><div class="pr-main">' +
-        '<div class="pr-line1"><span class="pr-num">#' + esc(p.number) + '</span>' + stateHtml(p.state) + checksHtml(p.checks) + '</div>' +
-        '<div class="pr-title"><button type="button" class="linkish pr-title-btn" data-action="pr-expand" data-url="' + esc(p.url) + '" aria-expanded="' + isOpen + '">' + esc(p.title || 'Pull request #' + p.number) + '</button></div>' +
-        '<div class="pr-meta">' + esc(p.repo || '') + (whyText(p) ? ' · <span class="pr-why">' + esc(whyText(p)) + '</span>' : '') + prMoreHtml(p, isOpen) + '</div>' +
-        (isOpen ? prDetailHtml(p, details && details[p.url], {}) : '') + '</div>' +
-        prActionsHtml(p, { unlinkId: mayEdit ? s.id : null }) + '</article>'
+        '<div class="pr-c1">' + stateHtml(p.state) + '<span class="pr-num">#' + esc(p.number) + '</span>' +
+        '<span class="pr-title"><button type="button" class="linkish pr-title-btn" data-tip="' + esc(p.title || 'Pull request #' + p.number) + '" data-action="pr-expand" data-url="' + esc(p.url) + '" aria-expanded="' + isOpen + '">' + esc(p.title || 'Pull request #' + p.number) + '</button></span></div>' +
+        (isOpen ? '<div class="pr-meta">' + esc(p.repo || '') + (p.branch ? ' · <span class="mono">' + esc(p.branch) + '</span>' : '') + (whyText(p) ? ' · <span class="pr-why">' + esc(whyText(p)) + '</span>' : '') + checksHtml(p.checks) + prMoreHtml(p, isOpen) + '</div>' + prDetailHtml(p, details && details[p.url], {}) : '') + '</div>' +
+        (isOpen ? prActionsHtml(p, { unlinkId: mayEdit ? s.id : null }) : prGhOnlyHtml(p)) + '</article>'
     }).join('') + '</div>'
   }
-  if (unchecked.length) h += '<div class="pr-unlist">' + unchecked.map(uncheckedHtml).join('') + '</div>'
+  // several refs that couldn't be checked fold into one "+4 not checked" row
+  if (unchecked.length === 1) h += '<div class="pr-unlist">' + uncheckedHtml(unchecked[0]) + '</div>'
+  else if (unchecked.length > 1) h += '<details class="pr-unfold"><summary class="pr-unsum">' + STATE_IC.unchecked + '<span>+' + unchecked.length + ' not checked</span></summary><div class="pr-unlist">' + unchecked.map(uncheckedHtml).join('') + '</div></details>'
   if (!n) h += '<p class="nocp pr-none" data-tip="' + esc(PR_HOW) + '">No PR found for this session' + (noPrWhy(s) ? '<span class="pr-none-why"> · ' + esc(noPrWhy(s)) + '</span>' : '') +
     (mayEdit ? ' · <label class="linkish pr-none-link" for="' + esc(prInputId(s.id)) + '">Link a PR…</label>' : '') + '</p>'
-  if (mayEdit) h += '<form class="prlink addform sess-add" data-pr-link="' + esc(s.id) + '" autocomplete="off"><input id="' + esc(prInputId(s.id)) + '" name="ref" type="text" inputmode="url" placeholder="Link a PR: paste its link or #number" aria-label="Link a PR: paste its link or #number" autocapitalize="off" spellcheck="false" enterkeyhint="done"><button type="submit" class="btn sm">Link</button></form>'
+  const form = '<form class="prlink addform sess-add" data-pr-link="' + esc(s.id) + '" autocomplete="off"><input id="' + esc(prInputId(s.id)) + '" name="ref" type="text" inputmode="url" placeholder="Link a PR: paste its link or #number" aria-label="Link a PR: paste its link or #number" autocapitalize="off" spellcheck="false" enterkeyhint="done"><button type="submit" class="btn sm">Link</button></form>'
+  // 2026-10-29: with PRs already linked, the box waits behind one quiet "Link another PR…"
+  if (mayEdit) h += n ? '<details class="pr-linkd"><summary class="linkish">Link another PR…</summary>' + form + '</details>' : form
   return h
 }
 // 2026-10-28 No PR: one quiet line saying why, then Link a PR… (it focuses the box below).

package/ui/relay-client.js

@@ -58,7 +58,30 @@ async function loadDirect() {
 const INIT_WAIT_MS = 1200 // how long the first paint waits for this Mac's own answer
 const RELOAD_KEY = 'leftoff.direct.reloaded'
 
-function pickedMac() { try { return localStorage.getItem(MAC_KEY) } catch { return null } }
+// 0.9.18: a pick from the reconnecting screen ("Use laptop instead") lasts this tab only
+const TEMP_KEY = 'leftoff.relay.mac.temp', REJECT_KEY = 'leftoff.relay.rejected', REJECT_MS = 10 * 60 * 1000
+function pickedMac() { try { return localStorage.getItem(MAC_KEY) || sessionStorage.getItem(TEMP_KEY) } catch { return null } }
+function tempPick(mac) { try { sessionStorage.setItem(TEMP_KEY, mac) } catch {} }
+// Machines that just refused this browser's key (unknown_device / not_ready): skipped for a while,
+// so the board doesn't keep going back to a host that can't open it (today's "Reconnecting" loop).
+function rejected(now = Date.now()) {
+  try { const o = JSON.parse(sessionStorage.getItem(REJECT_KEY) || '{}'); return Object.keys(o).filter((m) => now - o[m] < REJECT_MS) } catch { return [] }
+}
+function reject(mac, now = Date.now()) {
+  if (!mac) return
+  try { const o = JSON.parse(sessionStorage.getItem(REJECT_KEY) || '{}'); o[mac] = now; sessionStorage.setItem(REJECT_KEY, JSON.stringify(o)) } catch {}
+}
+function unreject(mac) { try { const o = JSON.parse(sessionStorage.getItem(REJECT_KEY) || '{}'); if (o[mac]) { delete o[mac]; sessionStorage.setItem(REJECT_KEY, JSON.stringify(o)) } } catch {} }
+// Which machine this browser uses: your own pick while it's online, else the relay's host
+// (relay/src/hosting.js), else the last one that answered, else any online one that hasn't
+// just refused this browser. Pure, unit-tested.
+export function pickMac({ picked = null, online = [], host = null, rejected = [], good = null } = {}) {
+  const ok = (m) => m && online.includes(m) && !rejected.includes(m)
+  if (picked && online.includes(picked)) return picked
+  if (ok(host)) return host
+  if (ok(good)) return good
+  return online.find((m) => !rejected.includes(m)) || host || null
+}
 function remember(mac) {
   try { if (mac) localStorage.setItem(MAC_KEY, mac); else localStorage.removeItem(MAC_KEY) } catch {}
 }
@@ -73,8 +96,7 @@ async function refreshStatus() {
   const online = relay.status.macs.filter((m) => m.online).map((m) => m.machine)
   // on this Mac's direct path the board stays on this Mac, whatever the relay sees
   if (!onDirect()) {
-    const want = pickedMac()
-    relay.mac = want && online.includes(want) ? want : relay.status.default
+    relay.mac = pickMac({ picked: pickedMac(), online, host: relay.status.default, rejected: rejected(), good: lastGood() })
     cookieMac(relay.mac)
   }
   return relay.status
@@ -252,8 +274,27 @@ async function viaRelay(body, init, retried) {
   const gone = relay.mac
   const env = await sealRequest(relay.key, { device: relay.device, machine: gone, body })
   const res = await realFetch('/_relay/api', { method: 'POST', credentials: 'same-origin', headers: { 'content-type': 'application/json' }, body: JSON.stringify(env), signal: init.signal, cache: 'no-store' })
-  if (res.status === 200) { good(gone); return toResponse(await openResponse(relay.key, env, await res.json())) }
+  if (res.status === 200) {
+    good(gone); unreject(gone)
+    const out = toResponse(await openResponse(relay.key, env, await res.json()))
+    // 0.9.18: the host changed (made elsewhere, or a preferred machine came back): follow it
+    const host = res.headers.get('x-leftoff-host')
+    if (host && host !== relay.mac && relay.mac === gone && !pickedMac() && !onDirect() && /^[\w.-]{1,64}$/.test(host)) followHost(host)
+    return out
+  }
   const j = await res.clone().json().catch(() => ({}))
+  if ((j.code === 'unknown_device' || j.code === 'not_ready') && !retried) {
+    // 0.9.18: this machine can't open this browser's key (a sandbox outside your synced
+    // folder, a Mac still starting): another online machine that can takes over
+    reject(gone)
+    await refreshStatus().catch(() => {})
+    if (relay.mac && relay.mac !== gone) { window.dispatchEvent(new CustomEvent('leftoff-relay', { detail: { mac: relay.mac, switched: true } })); return viaRelay(body, init, true) }
+  }
+  if (res.status === 504 && j.code === 'timeout' && !retried) {
+    // the host stopped answering (a closed lid before the relay notices): ask who hosts now
+    await refreshStatus().catch(() => {})
+    if (relay.mac && relay.mac !== gone) { window.dispatchEvent(new CustomEvent('leftoff-relay', { detail: { mac: relay.mac, switched: true } })); return viaRelay(body, init, true) }
+  }
   if (authVerdict(res.status, j.code) !== 'ok') {
     // 0.9.17: the Mac that took over while yours restarted may not know this browser:
     // stay with the one that does, and look again (never forget the key on this)
@@ -277,6 +318,16 @@ async function viaRelay(body, init, retried) {
   return res
 }
 
+// The relay says another machine hosts now. Once per few seconds at most; the board
+// hears leftoff-relay { switched } as it does after a failover.
+let followedAt = 0
+function followHost(host) {
+  if (Date.now() - followedAt < 5000) return
+  followedAt = Date.now()
+  relay.mac = host; cookieMac(host)
+  try { window.dispatchEvent(new CustomEvent('leftoff-relay', { detail: { mac: host, switched: true, followed: true } })) } catch {}
+}
+
 function patchedFetch(input, init) {
   try {
     const url = new URL(typeof input === 'string' ? input : input.url, location.href)
@@ -433,7 +484,40 @@ function trouble(code) {
 }
 function reconnecting() {
   if (document.querySelector('.relay-screen')) return
-  screen('Reconnecting to your board…', '<p class="relay-wait" role="status"><span class="relay-dot" aria-hidden="true"></span>' + esc(relay.mac || 'Your Mac') + ' may be restarting. This takes a few seconds.</p>')
+  screen('Reconnecting to your board…', reconnectHtml({ status: relay.status, mac: relay.mac, rejected: rejected() }))
+  wirePicker()
+}
+// 0.9.18: the reconnecting screen says where each machine is (shape + word) and, when the
+// host is out but another machine is online, that it's switching; with several online, a
+// "Use <name> instead" button each (this tab only). Pure, unit-tested.
+export function reconnectHtml({ status = null, mac = null, rejected = [] } = {}) {
+  const macs = (status && status.macs) || []
+  const online = macs.filter((m) => m.online).map((m) => m.machine)
+  const name = mac || 'Your Mac'
+  const hostOut = mac && (!online.includes(mac) || rejected.includes(mac))
+  const others = online.filter((m) => m !== mac && !rejected.includes(m))
+  const target = pickMac({ online: others, host: status && status.default, rejected })
+  let h = '<p class="relay-wait" role="status"><span class="relay-dot" aria-hidden="true"></span>'
+  if (hostOut && target) h += esc(name) + (online.includes(mac) ? ' can’t open this browser’s key.' : ' is offline.') + ' ' + esc(target) + ' is online: switching to it…</p>'
+  else h += esc(name) + ' may be restarting. This takes a few seconds.</p>'
+  if (macs.length > 1) {
+    h += '<ul class="relay-hosts" aria-label="Your machines">'
+    for (const m of macs) {
+      const st = m.online ? (rejected.includes(m.machine) ? ['◐', 'can’t open this browser’s key'] : ['●', 'online']) : m.state === 'reconnecting' ? ['◌', 'reconnecting'] : ['○', 'offline']
+      h += '<li class="relay-host ' + (m.online ? 'on' : 'off') + '"><span class="relay-host-shape" aria-hidden="true">' + st[0] + '</span><b>' + esc(m.machine) + '</b><span class="relay-host-word">' + st[1] + (m.machine === mac ? ' · was hosting' : '') + '</span>'
+      if (others.length > 1 && others.includes(m.machine)) h += '<button type="button" class="btn relay-use" data-mac="' + esc(m.machine) + '">Use ' + esc(m.machine) + ' instead</button>'
+      h += '</li>'
+    }
+    h += '</ul>'
+  }
+  return h
+}
+export function wirePicker() {
+  document.querySelectorAll('.relay-use').forEach((b) => b.addEventListener('click', () => {
+    const m = b.getAttribute('data-mac')
+    if (!m) return
+    stopTrouble(); tempPick(m); unreject(m); good(m); cookieMac(m); location.reload()
+  }))
 }
 // One sealed ping per candidate Mac (the one that last answered first): 'ok' (with
 // the Mac), 'revoked', or 'retry'.
@@ -443,7 +527,10 @@ async function pingMacs() {
   if (res0 && res0.status === 401) { const j = await res0.json().catch(() => ({})); return { verdict: authVerdict(401, j.code), code: j.code || 'not_paired' } }
   if (res0 && res0.ok) { st = await res0.json().catch(() => null); if (st) relay.status = st }
   const online = st ? st.macs.filter((m) => m.online).map((m) => m.machine) : []
-  const order = [...new Set([lastGood(), relay.mac, st && st.default, ...online].filter((m) => m && online.includes(m)))]
+  // 0.9.18: the relay's host first, machines that just refused this browser last
+  const rej = rejected()
+  const order = [...new Set([st && st.default, lastGood(), relay.mac, ...online].filter((m) => m && online.includes(m)))].sort((a, b) => rej.includes(a) - rej.includes(b))
+  if (document.querySelector('.relay-screen') && !lostShown && !notPairedShown) { const w = document.querySelector('.relay-screen .relay-card'); if (w) { w.innerHTML = '<div class="relay-logo">Leftoff</div><h1>Reconnecting to your board…</h1>' + reconnectHtml({ status: relay.status, mac: relay.mac, rejected: rej }); wirePicker() } }
   let last = { verdict: 'retry', code: online.length ? 'unknown_device' : 'mac_offline' }
   for (const machine of order) {
     try {
@@ -503,6 +590,9 @@ export const leftoffRelay = {
   online(mac) { return !!mac && onlineMacs().includes(String(mac)) },
   // Switch Macs: the board reloads from the other one.
   pick(mac) { remember(mac); cookieMac(mac); location.reload() },
+  // 0.9.18 Hosted by: the user's host changed (Settings): drop this browser's own pick and follow it.
+  useHost(mac) { remember(null); try { sessionStorage.removeItem(TEMP_KEY) } catch {} if (mac && mac !== relay.mac) { unreject(mac); cookieMac(mac); location.reload() } },
+  get pinned() { return pickedMac() },
   // This browser revoked itself (0.6.6).
   unpaired() { notPaired('self') },
 }

package/ui/side-fold.js

@@ -0,0 +1,124 @@
+// 2026-10-29 A calmer session panel (Joel: "very noisy and SUPER SCROLLY").
+// The top stays open (the head, Catch me up / Walk, the newest checkpoint's
+// Stopped + Next, PRs, To do); everything else is a one-line header with a
+// count ("Files · 12"), closed until you open it. Open/closed is kept per
+// device (localStorage lo-side-fold-v1), not per session. Pure builders,
+// unit-tested (test/unit/calmside-1029.test.mjs); app.js wires them.
+
+export const FOLD_KEY = 'lo-side-fold-v1'
+
+const escD = (s) => String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')
+
+// { key: true | false } in one key; anything unreadable is "nothing chosen yet"
+export function createFoldStore(storage) {
+  const read = () => { try { const o = JSON.parse((storage && storage.getItem(FOLD_KEY)) || '{}'); return o && typeof o === 'object' && !Array.isArray(o) ? o : {} } catch { return {} } }
+  return {
+    open(key, dflt = false) { const v = read()[key]; return typeof v === 'boolean' ? v : !!dflt },
+    set(key, open) {
+      if (!key || !/^[\w.-]{1,40}$/.test(key)) return
+      const o = read(); o[key] = !!open
+      try { storage && storage.setItem(FOLD_KEY, JSON.stringify(o)) } catch {}
+    },
+  }
+}
+
+// A section as one line: "Files · 12", a chevron; its body under it when open.
+// body: the section's own markup (it keeps its id, so its painter still works).
+export function foldHtml({ key, title, count = null, body = '', open = false, cls = '' }, { esc = escD } = {}) {
+  if (!body) return ''
+  const n = count == null || count === '' ? '' : '<span class="fs-fold-n"> · ' + esc(String(count)) + '</span>'
+  return '<details class="fs-fold' + (cls ? ' ' + cls : '') + '" data-fold="' + esc(key) + '"' + (open ? ' open' : '') + '>' +
+    '<summary class="fs-fold-h"><span class="fs-fold-t">' + esc(title) + n + '</span><svg class="fs-fold-c" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m9 6 6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>' +
+    '<div class="fs-fold-b">' + body + '</div></details>'
+}
+
+// ------------------------------------------------------------ checkpoints
+
+// A path as the reader knows it: relative to the session's repo / worktree root,
+// else ~/ for the home folder. /Users/<u>/…/worktrees/<name>/src/a.js -> src/a.js
+export function relPath(p, { roots = [], home = '' } = {}) {
+  let s = String(p == null ? '' : p).trim()
+  if (!s) return ''
+  const rs = roots.filter((r) => typeof r === 'string' && r.length > 1).map((r) => r.replace(/\/+$/, '')).sort((a, b) => b.length - a.length)
+  for (const r of rs) if (s === r) return '.'; else if (s.startsWith(r + '/')) return s.slice(r.length + 1)
+  // a worktree folder of a tool (…/worktrees/<name>/rest): the rest
+  const wt = /^(?:\/Users\/[^/]+|\/home\/[^/]+|~)\/(?:[^/]+\/)*?(?:\.?worktrees|\.claude\/worktrees)\/[^/]+\/(.+)$/.exec(s)
+  if (wt) return wt[1]
+  const h = String(home || '').replace(/\/+$/, '')
+  if (h && s.startsWith(h + '/')) return '~/' + s.slice(h.length + 1)
+  const mh = /^\/(?:Users|home)\/[^/]+\/(.+)$/.exec(s)
+  if (mh) return '~/' + mh[1]
+  return s
+}
+// The roots a session's paths are relative to (worktree first, then repo, then its folder)
+export function rootsOf(s) {
+  const r = (s && s.repo) || {}
+  return [s && s.worktree && s.worktree.path, r.worktree, r.root, s && s.cwd].filter((x) => typeof x === 'string' && x.startsWith('/'))
+}
+
+// Files touched as chips: the first five, then "+N more" that opens the rest.
+export const FILES_SHOWN = 5
+export function filesTouchedHtml(files, { roots = [], home = '' } = {}, { esc = escD } = {}) {
+  const list = (Array.isArray(files) ? files : []).map((f) => String(f || '')).filter(Boolean)
+  if (!list.length) return ''
+  const chip = (f) => '<span class="chip mono" data-tip="' + esc(f) + '">' + esc(relPath(f, { roots, home })) + '</span>'
+  const first = list.slice(0, FILES_SHOWN), rest = list.slice(FILES_SHOWN)
+  return '<div class="files">' + first.map(chip).join('') +
+    (rest.length ? '<details class="files-more"><summary class="linkish">+' + rest.length + ' more</summary>' + rest.map(chip).join('') + '</details>' : '') + '</div>'
+}
+
+// Text a checkpoint was written from that wasn't a prompt: Claude Code's
+// wrappers (<task-notification>, <system-reminder>, a slash command's output…),
+// the same list the mod skips (mod/hooks/core.js NOT_A_PROMPT).
+const WRAPPER = /^\s*(?:Working on:\s*[“"]\s*)?(?:<(?:local-command-stdout|local-command-stderr|command-name|command-message|command-args|local-command-caveat|system-reminder|bash-input|bash-stdout|bash-stderr|user-prompt-submit-hook|task-notification|user-memory-input)\b|\[Request interrupted by user|Caveat: The messages below were generated)/
+export function isWrapperCp(cp) {
+  if (!cp) return false
+  return WRAPPER.test(String(cp.doing || '')) || (!String(cp.doing || '').trim() && WRAPPER.test(String(cp.stoppedAt || '')))
+}
+// Junk: a wrapper checkpoint written within a few minutes of another one (the
+// same moment twice). A lone one stays: it's all there is.
+export const JUNK_NEAR_MS = 5 * 60e3
+export function dropJunkCps(list) {
+  const all = Array.isArray(list) ? list : []
+  const t = (cp) => Date.parse((cp && cp.createdAt) || '')
+  return all.filter((cp) => !(isWrapperCp(cp) && all.some((o) => o !== cp && !isWrapperCp(o) && Math.abs(t(o) - t(cp)) <= JUNK_NEAR_MS)))
+}
+
+// ------------------------------------------------------------ status history
+
+// One small shape per change, the word and time in its tip (shape + word, never color alone).
+export const STATUS_SHAPE = { needs_input: '▲', active: '●', background: '◐', waiting: '◆', dormant: '○', stale: '◌', ended: '■' }
+export function statusStripHtml(changes, { label = {}, clock = (x) => x } = {}, { esc = escD } = {}) {
+  const list = (Array.isArray(changes) ? changes : []).slice(-24)
+  if (!list.length) return ''
+  return '<div class="sstrip" role="list" aria-label="Status history">' + list.map((c) => {
+    const w = label[c.status] || c.status || ''
+    const tip = w + ' · ' + clock(c.at)
+    return '<span class="ss s-' + esc(c.status) + '" role="listitem" tabindex="0" data-tip="' + esc(tip) + '" aria-label="' + esc(tip) + '">' + esc(STATUS_SHAPE[c.status] || '·') + '</span>'
+  }).join('') + '</div>'
+}
+
+// ------------------------------------------------------------ answered from the board
+
+// Where an answer came from, in the words of what actually happened. Older
+// answers said "over Tailscale" for anything from another device, the relay
+// included (src/answers.js whereFrom before 2026-10-29); they read right now.
+export function whereWords(w) {
+  let s = String(w || '').trim()
+  if (!s) return ''
+  const old = /^over Tailscale(?: as (.+?))?(?: \(through the relay\))?(?: \(relay\))?(?: · (.+))?$/.exec(s)
+  if (old && /\(through the relay\)|\(relay\)/.test(s)) return 'from ' + (old[1] || 'a paired device') + ' · via relay' + (old[2] ? ' · ' + old[2] : '')
+  return s
+}
+export const ANSWERED_SHOWN = 3
+// The newest three, "Show all N" for the rest (a <details>, so it stays put through redraws)
+export function answeredHtml(answers, { clock = (x) => x } = {}, { esc = escD } = {}) {
+  const list = (Array.isArray(answers) ? answers : []).slice().reverse()
+  if (!list.length) return ''
+  const row = (a) => '<li><span class="t">' + esc(clock(a.at)) + '</span><b>' + esc(a.summary) + '</b>' + (a.what ? ' · <span class="mono">' + esc(String(a.what).slice(0, 160)) + '</span>' : '') +
+    '<span class="where">' + esc(whereWords(a.where)) + (a.delivered === false ? ' · not picked up' : '') + '</span></li>'
+  const first = list.slice(0, ANSWERED_SHOWN), rest = list.slice(ANSWERED_SHOWN)
+  return '<ul class="answered">' + first.map(row).join('') + '</ul>' +
+    (rest.length ? '<details class="answered-more"><summary class="linkish">Show all ' + list.length + '</summary><ul class="answered">' + rest.map(row).join('') + '</ul></details>' : '') +
+    '<div class="hint">Also in answers.md in this session’s folder.</div>'
+}