@leftoff/cli 0.9.3 → 0.9.5

package/ui/picker.js

@@ -283,8 +283,9 @@ function onKey(host, e) {
 // choosing one closes the menu. Same look as the selects' menu: under (or
 // above) the ⋯ on a desktop, a bottom sheet under 600px. Arrows, Home/End,
 // Enter/Space, Escape (focus back on the ⋯), Tab, and a tap outside closes.
-//   items: [{ label, icon (svg markup, optional), attrs: { 'data-action': …, 'data-id': … }, cls }]
-let act = null // { anchor, menu, backdrop, items }
+//   items: [{ label, icon (svg markup, optional), attrs: { 'data-action': …, 'data-id': … }, cls, sub, on }]
+//   plus { note } (a plain line) and { …item, more: { title, items } } (a › to a second page)
+let act = null // { anchor, menu, backdrop, items, page, up }
 export function actionMenuOpen() { return !!act }
 export function closeActionMenu({ focus = false } = {}) {
   if (!act) return
@@ -294,18 +295,22 @@ export function closeActionMenu({ focus = false } = {}) {
   anchor.setAttribute('aria-expanded', 'false')
   if (focus && anchor.isConnected) anchor.focus()
 }
-function placeAction() {
+// h: the height to place for (a page change animates to it); keep: stay on the
+// side of the ⋯ the menu opened on, so a second page doesn't make it jump.
+function placeAction({ h: hTo, keep = false } = {}) {
   if (!act) return
   const { menu, anchor } = act
   const vw = document.documentElement.clientWidth, vh = (window.visualViewport && window.visualViewport.height) || window.innerHeight
   if (menu.classList.contains('sheet')) { menu.style.maxHeight = Math.round(vh * 0.72) + 'px'; return }
   const r = anchor.getBoundingClientRect()
   const pad = 8
-  const w = menu.offsetWidth, h = menu.offsetHeight
-  const up = vh - r.bottom - pad < h + 6 && r.top - pad > vh - r.bottom - pad
+  const w = menu.offsetWidth, h = hTo || menu.offsetHeight
+  const up = keep && act.up != null ? act.up : vh - r.bottom - pad < h + 6 && r.top - pad > vh - r.bottom - pad
+  act.up = up
   // right edges line up (the ⋯ sits at the end of the row), never past the viewport
   menu.style.left = Math.max(pad, Math.min(r.right - w, vw - pad - w)) + 'px'
-  menu.style.top = (up ? Math.max(pad, r.top - 6 - h) : r.bottom + 6) + 'px'
+  // never past the bottom either (a taller second page can't fall off the screen)
+  menu.style.top = (up ? Math.max(pad, r.top - 6 - h) : Math.max(pad, Math.min(r.bottom + 6, vh - pad - h))) + 'px'
   menu.classList.toggle('up', up)
 }
 function actFocus(k) {
@@ -314,6 +319,44 @@ function actFocus(k) {
   if (!n) return
   act.items[((k % n) + n) % n].focus()
 }
+const SVG = (d, cls = 'ic') => '<svg class="' + cls + '" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">' + d + '</svg>'
+const ACT_NEXT = SVG('<path d="m9 18 6-6-6-6"/>', 'ic lo-act-chev')
+const ACT_BACK = SVG('<path d="m15 18-6-6 6-6"/>', 'ic lo-act-chev')
+const ACT_CHECK = SVG('<path d="M20 6 9 17l-5-5"/>', 'ic lo-act-check')
+const reducedMotion = () => !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+// 0.9.4: show page p of the menu (0 is the main one). The new page slides in
+// from the side it lives on and the menu's height eases to the new one (its
+// width is fixed), unless you asked for less motion.
+function actPage(p, { focus } = {}) {
+  if (!act) return
+  const { menu } = act
+  const to = menu.querySelector('.lo-act-page[data-page="' + p + '"]'), from = act.page
+  if (!to || !from || to === from) return
+  const back = p < Number(from.dataset.page)
+  const h0 = menu.offsetHeight
+  from.hidden = true; to.hidden = false
+  from.classList.remove('lo-in-fwd', 'lo-in-back')
+  act.page = to
+  act.items = [...to.querySelectorAll('[role="menuitem"]')]
+  menu.classList.toggle('on-sub', p > 0)
+  const h1 = menu.offsetHeight
+  if (!reducedMotion()) {
+    to.classList.remove('lo-in-fwd', 'lo-in-back'); void to.offsetWidth
+    to.classList.add(back ? 'lo-in-back' : 'lo-in-fwd')
+    if (h1 !== h0) {
+      menu.classList.remove('lo-act-sizing')
+      menu.style.height = h0 + 'px'; void menu.offsetHeight
+      menu.classList.add('lo-act-sizing')
+      menu.style.height = h1 + 'px'
+      let t = 0
+      const done = (e) => { if (e && e.target !== menu) return; clearTimeout(t); menu.removeEventListener('transitionend', done); if (act && act.menu === menu) { menu.style.height = ''; menu.classList.remove('lo-act-sizing') } }
+      menu.addEventListener('transitionend', done); t = setTimeout(done, 320)
+    }
+  }
+  placeAction({ h: h1, keep: true })
+  const el = focus || (p > 0 ? (to.querySelector('.lo-act.on') || act.items[1] || act.items[0]) : act.items[0])
+  if (el) el.focus({ preventScroll: true })
+}
 export function openActionMenu(anchor, items, { title = '' } = {}) {
   if (act && act.anchor === anchor) { closeActionMenu({ focus: true }); return null }
   closeActionMenu(); closeMenu()
@@ -324,39 +367,62 @@ export function openActionMenu(anchor, items, { title = '' } = {}) {
   menu.id = id
   menu.setAttribute('role', 'menu')
   if (title) menu.setAttribute('aria-label', title)
-  // 0.9.2: an item may carry a sub line ({ sub }), be a plain line ({ note }:
-  // what the menu is about, read out as its description) or a row of small
-  // buttons ({ row: [items], label }), e.g. the other checkpoint lengths.
-  const one = (it, extra = '') => '<button type="button" role="menuitem" tabindex="-1" class="lo-act' + extra + (it.sub ? ' has-sub' : '') + (it.cls ? ' ' + esc(it.cls) : '') + '"' + attrs(it.attrs || {}) + '>' + (it.icon || '') +
-    (it.sub ? '<span class="lo-act-txt"><span>' + esc(it.label) + '</span><span class="lo-act-sub">' + esc(it.sub) + '</span></span>' : '<span>' + esc(it.label) + '</span>') + '</button>'
-  const notes = []
+  // 0.9.2: an item may carry a sub line ({ sub }) or be a plain line ({ note }:
+  // what the menu is about, read out as its description).
+  // 0.9.4: an item may open a second page ({ more: { title, items } }), the iOS
+  // way: the row itself does its action, and a › at its right edge (its own
+  // target) slides the menu over to that page, which starts with a ‹ title row
+  // (back). Items there may be { on }: a ✓, e.g. your default length.
+  const one = (it, extra = '') => '<button type="button" role="menuitem" tabindex="-1" class="lo-act' + extra + (it.sub ? ' has-sub' : '') + (it.on ? ' on' : '') + (it.cls ? ' ' + esc(it.cls) : '') + '"' + attrs(it.attrs || {}) + '>' + (it.icon || '') +
+    (it.sub ? '<span class="lo-act-txt"><span>' + esc(it.label) + '</span><span class="lo-act-sub">' + esc(it.sub) + '</span></span>' : '<span>' + esc(it.label) + '</span>') +
+    (it.on && it.onLabel ? '<span class="lo-vh">' + esc(it.onLabel) + '</span>' : '') + '</button>'
+  const notes = [], subs = []
+  const split = (it) => { subs.push(it.more); const p = subs.length
+    return '<div class="lo-act-split" role="none">' + one(it, ' lo-act-main') +
+      '<button type="button" role="menuitem" tabindex="-1" class="lo-act-next" data-act-page="' + p + '" aria-haspopup="menu" aria-label="' + esc(it.more.title) + '" title="' + esc(it.more.title) + '">' + ACT_NEXT + '</button></div>' }
+  const main = items.map((it, i) => it.note ? (notes.push(id + '-n' + i), '<div class="lo-act-note" id="' + id + '-n' + i + '" role="none">' + (it.icon || '') + '<span>' + esc(it.note) + '</span></div>')
+    : it.more ? split(it) : one(it)).join('')
+  const page = (m, p) => '<div class="lo-act-page" data-page="' + p + '" role="group" aria-label="' + esc(m.title) + '" hidden>' +
+    '<button type="button" role="menuitem" tabindex="-1" class="lo-act lo-act-back" data-act-back aria-label="' + esc('Back · ' + m.title) + '">' + ACT_BACK + '<span>' + esc(m.title) + '</span></button>' +
+    (m.items || []).map((x) => one({ ...x, icon: x.on ? ACT_CHECK : '<span class="ic" aria-hidden="true"></span>' })).join('') + '</div>'
   menu.innerHTML = (sheet && title ? '<div class="lo-sheet-head"><span>' + esc(title) + '</span><button type="button" class="lo-sheet-done" data-act-close>Done</button></div>' : '') +
-    items.map((it, i) => it.note ? (notes.push(id + '-n' + i), '<div class="lo-act-note" id="' + id + '-n' + i + '" role="none">' + (it.icon || '') + '<span>' + esc(it.note) + '</span></div>')
-      : it.row ? '<div class="lo-act-row" role="group"' + (it.label ? ' aria-label="' + esc(it.label) + '"' : '') + '>' + (it.label ? '<span class="lo-act-rowlabel" aria-hidden="true">' + esc(it.label) + '</span>' : '') + it.row.map((x) => one(x, ' alt')).join('') + '</div>'
-      : one(it)).join('')
+    (subs.length ? '<div class="lo-act-page" data-page="0" role="none">' + main + '</div>' + subs.map((m, j) => page(m, j + 1)).join('') : main)
+  if (subs.length) menu.classList.add('has-pages')
   if (notes.length) menu.setAttribute('aria-describedby', notes.join(' '))
   let backdrop = null
   if (sheet) { backdrop = document.createElement('div'); backdrop.className = 'lo-backdrop'; document.body.appendChild(backdrop) }
   document.body.appendChild(menu)
-  act = { anchor, menu, backdrop, items: [...menu.querySelectorAll('[role="menuitem"]')] }
+  const page0 = menu.querySelector('.lo-act-page[data-page="0"]')
+  act = { anchor, menu, backdrop, page: page0, up: null, items: [...(page0 || menu).querySelectorAll('[role="menuitem"]')] }
   anchor.setAttribute('aria-haspopup', 'menu')
   anchor.setAttribute('aria-controls', id)
   anchor.setAttribute('aria-expanded', 'true')
+  const backFocus = () => act && act.menu.querySelector('[data-act-page="' + act.page.dataset.page + '"]')
   menu.addEventListener('click', (e) => {
     if (e.target.closest('[data-act-close]')) { closeActionMenu({ focus: true }); return }
+    const next = e.target.closest('[data-act-page]')
+    if (next) { e.preventDefault(); actPage(Number(next.dataset.actPage)); return }
+    if (e.target.closest('[data-act-back]')) { e.preventDefault(); actPage(0, { focus: backFocus() }); return }
     // the item's own click goes on to the board's handler (the event's path is
     // already fixed); the menu just gets out of the way
     if (e.target.closest('[role="menuitem"]')) closeActionMenu()
   })
-  menu.addEventListener('mousemove', (e) => { const it = e.target.closest('[role="menuitem"]'); if (it && document.activeElement !== it) it.focus({ preventScroll: true }) })
+  menu.addEventListener('mousemove', (e) => { const it = e.target.closest('[role="menuitem"]'); if (it && document.activeElement !== it && act && act.page && act.page.contains(it)) it.focus({ preventScroll: true }) })
   menu.addEventListener('keydown', (e) => {
     const k = act ? act.items.indexOf(document.activeElement) : -1
+    const onSub = !!(act && act.page && Number(act.page.dataset.page) > 0)
     switch (e.key) {
       case 'ArrowDown': e.preventDefault(); actFocus(k + 1); return
       case 'ArrowUp': e.preventDefault(); actFocus(k < 0 ? -1 : k - 1); return
       case 'Home': e.preventDefault(); actFocus(0); return
       case 'End': e.preventDefault(); actFocus(-1); return
-      case 'Escape': e.preventDefault(); e.stopPropagation(); closeActionMenu({ focus: true }); return
+      case 'ArrowRight': {
+        const row = document.activeElement && document.activeElement.closest('.lo-act-split')
+        if (row) { e.preventDefault(); actPage(Number(row.querySelector('[data-act-page]').dataset.actPage)) }
+        return
+      }
+      case 'ArrowLeft': if (onSub) { e.preventDefault(); actPage(0, { focus: backFocus() }) } return
+      case 'Escape': e.preventDefault(); e.stopPropagation(); if (onSub) actPage(0, { focus: backFocus() }); else closeActionMenu({ focus: true }); return
       case 'Tab': e.preventDefault(); closeActionMenu({ focus: true }); return
       default:
         if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && act) {

package/ui/prs.js

@@ -60,7 +60,7 @@ export function sessionPrsSection(s, { mayEdit = true } = {}) {
         (mayEdit ? '<button type="button" class="btn sm" data-action="pr-unlink" data-id="' + esc(s.id) + '" data-url="' + esc(p.url) + '">Unlink</button>' : '') + '</div>'
     }).join('') + '</div>'
   } else h += '<div class="nocp">No pull requests linked yet. They link on their own from gh pr create, PR links in the chat, or the branch.</div>'
-  if (mayEdit) h += '<form class="prlink" data-pr-link="' + esc(s.id) + '" autocomplete="off"><input 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"><button type="submit" class="btn">Link</button></form>'
+  if (mayEdit) h += '<form class="prlink addform sess-add" data-pr-link="' + esc(s.id) + '" autocomplete="off"><input 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>'
   return h
 }
 // 0.8.5: why a PR is linked, in words (the daemon sends created / you / branch / manual).

package/ui/settings-dirty.js

@@ -0,0 +1,27 @@
+// Settings → Save (0.9.5): Save is on only while the form differs from what
+// was last saved. Pure, so the daemon-free unit tests can check the compare.
+
+// Deep equality for the plain values the Settings form reads: numbers, strings,
+// booleans, null, arrays and plain objects. A key that is missing equals one
+// that is undefined; NaN equals NaN (an emptied number field reads the same twice).
+export function sameValue(a, b) {
+  if (Object.is(a, b)) return true
+  if (a === undefined || b === undefined || a === null || b === null) return false
+  if (Array.isArray(a) || Array.isArray(b)) {
+    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false
+    return a.every((x, i) => sameValue(x, b[i]))
+  }
+  if (typeof a !== 'object' || typeof b !== 'object') return false
+  const keys = new Set([...Object.keys(a), ...Object.keys(b)])
+  for (const k of keys) if (!sameValue(a[k], b[k])) return false
+  return true
+}
+
+// The top-level fields that differ, in the order of `now` (then `saved`).
+export function changedKeys(saved, now) {
+  if (!saved || !now) return []
+  const keys = [...new Set([...Object.keys(now), ...Object.keys(saved)])]
+  return keys.filter((k) => !sameValue(saved[k], now[k]))
+}
+
+export const settingsDirty = (saved, now) => changedKeys(saved, now).length > 0

package/ui/writing.js

@@ -0,0 +1,55 @@
+// "Checkpoint now" while it's being written (0.9.5): a state that stays on the
+// card and the session page until the checkpoint lands or fails, instead of a
+// toast you can miss. Pure, so the unit tests can drive it with a fake clock.
+//
+// One entry per session id:
+//   writing  the request is out (this Mac's summarizer or the Mac it lives on)
+//   syncing  the other Mac took longer than we wait; it shows up when it syncs
+//   late     ...and still nothing after WRITING_SYNC_MS: a quiet note instead
+//   failed   it didn't work; the error stays until dismissed or the next try
+
+export const WRITING_SYNC_MS = 3 * 60 * 1000
+export const FRESH_MS = 2500
+
+export function beginWriting(map, id, { length = null, lastCpId = null, machine = null, now = Date.now() } = {}) {
+  map[id] = { phase: 'writing', length, lastCpId, machine, since: now }
+  return map[id]
+}
+
+export const isWriting = (map, id) => !!(map[id] && (map[id].phase === 'writing' || map[id].phase === 'syncing'))
+
+// The request came back: { ok: true }, { slow: true } (the other Mac is still at
+// it) or { error: 'message' }.
+export function settleWriting(map, id, outcome, now = Date.now()) {
+  const w = map[id]
+  if (!w) return null
+  if (outcome && outcome.ok) { delete map[id]; return null }
+  if (outcome && outcome.slow) { w.phase = 'syncing'; w.syncSince = now; return w }
+  w.phase = 'failed'; w.error = String((outcome && outcome.error) || 'Couldn’t write the checkpoint'); w.at = now
+  return w
+}
+
+// Read against the session as it is now. A synced checkpoint newer than the one
+// we started from ends syncing/late (returns { landed: id }); syncing too long
+// turns into late. Writing and failed don't change here.
+export function reconcileWriting(map, s, now = Date.now()) {
+  const w = s && map[s.id]
+  if (!w) return null
+  const newer = s.lastCheckpointId && s.lastCheckpointId !== w.lastCpId
+  if ((w.phase === 'syncing' || w.phase === 'late' || w.phase === 'failed') && newer) { delete map[s.id]; return { landed: s.lastCheckpointId } }
+  if (w.phase === 'syncing' && now - (w.syncSince || w.since) >= WRITING_SYNC_MS) w.phase = 'late'
+  return w
+}
+
+export function dismissWriting(map, id) { if (map[id] && (map[id].phase === 'failed' || map[id].phase === 'late')) delete map[id] }
+
+// The words shown. lengthLabel maps 'short' → 'Short'.
+export function writingText(w, lengthLabel = (k) => k) {
+  if (!w) return ''
+  const len = w.length ? ' · ' + lengthLabel(w.length) : ''
+  if (w.phase === 'writing') return 'Writing checkpoint' + len + (w.machine ? ' on ' + w.machine : '') + '…'
+  if (w.phase === 'syncing') return (w.machine || 'The other Mac') + ' is still writing it · it shows up here when it syncs…'
+  if (w.phase === 'late') return 'Not here yet · it shows up when ' + (w.machine || 'the other Mac') + ' syncs'
+  if (w.phase === 'failed') return 'Couldn’t write the checkpoint: ' + w.error
+  return ''
+}