@leftoff/cli 0.8.5 → 0.8.7

package/ui/picker.js

@@ -276,13 +276,117 @@ function onKey(host, e) {
   }
 }
 
+
+// 0.8.7: a card's "⋯" menu. Not a select: a list of actions (role menu, items
+// role menuitem). The items are real <button data-action …> elements, so the
+// board's one click handler runs them exactly as it ran the old row of buttons;
+// 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 }
+export function actionMenuOpen() { return !!act }
+export function closeActionMenu({ focus = false } = {}) {
+  if (!act) return
+  const { anchor, menu, backdrop } = act
+  act = null
+  menu.remove(); if (backdrop) backdrop.remove()
+  anchor.setAttribute('aria-expanded', 'false')
+  if (focus && anchor.isConnected) anchor.focus()
+}
+function placeAction() {
+  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
+  // 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'
+  menu.classList.toggle('up', up)
+}
+function actFocus(k) {
+  if (!act) return
+  const n = act.items.length
+  if (!n) return
+  act.items[((k % n) + n) % n].focus()
+}
+export function openActionMenu(anchor, items, { title = '' } = {}) {
+  if (act && act.anchor === anchor) { closeActionMenu({ focus: true }); return null }
+  closeActionMenu(); closeMenu()
+  const sheet = narrow()
+  const id = 'lo-act' + (++uid)
+  const menu = document.createElement('div')
+  menu.className = 'lo-menu lo-actmenu' + (sheet ? ' sheet' : '')
+  menu.id = id
+  menu.setAttribute('role', 'menu')
+  if (title) menu.setAttribute('aria-label', title)
+  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) => '<button type="button" role="menuitem" tabindex="-1" class="lo-act' + (it.cls ? ' ' + esc(it.cls) : '') + '"' + attrs(it.attrs || {}) + '>' + (it.icon || '') + '<span>' + esc(it.label) + '</span></button>').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"]')] }
+  anchor.setAttribute('aria-haspopup', 'menu')
+  anchor.setAttribute('aria-controls', id)
+  anchor.setAttribute('aria-expanded', 'true')
+  menu.addEventListener('click', (e) => {
+    if (e.target.closest('[data-act-close]')) { closeActionMenu({ focus: true }); 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('keydown', (e) => {
+    const k = act ? act.items.indexOf(document.activeElement) : -1
+    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 'Tab': e.preventDefault(); closeActionMenu({ focus: true }); return
+      default:
+        if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && act) {
+          const ch = e.key.toLowerCase()
+          const j = act.items.findIndex((x, i) => i > k && x.textContent.trim().toLowerCase().startsWith(ch))
+          const j2 = j >= 0 ? j : act.items.findIndex((x) => x.textContent.trim().toLowerCase().startsWith(ch))
+          if (j2 >= 0) { e.preventDefault(); actFocus(j2) }
+        }
+    }
+  })
+  placeAction()
+  actFocus(0)
+  return menu
+}
+// the ⋯ button itself: ArrowDown/Up opens the menu too (Enter and Space click it)
+export function actionMenuKey(anchor, e, open) {
+  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); open(); if (act && e.key === 'ArrowUp') actFocus(-1) }
+}
+
 if (typeof window !== 'undefined' && window.customElements && !customElements.get('lo-select')) {
   customElements.define('lo-select', LoSelect)
   customElements.define('lo-combo', LoCombo)
   // a click outside (or a tap on the page behind a sheet) closes; so does the page moving under a desktop menu
   document.addEventListener('pointerdown', (e) => { if (open && !open.menu.contains(e.target) && !open.host.contains(e.target)) closeMenu() }, true)
-  window.addEventListener('resize', () => { if (open) closeMenu() })
-  document.addEventListener('scroll', (e) => { if (open && !open.menu.contains(e.target)) place() }, true)
+  window.addEventListener('resize', () => { if (open) closeMenu(); if (act) closeActionMenu() })
+  document.addEventListener('scroll', (e) => { if (open && !open.menu.contains(e.target)) place(); if (act && !act.menu.contains(e.target)) placeAction() }, true)
+  // a tap outside a card's ⋯ menu closes it (and goes nowhere: a tap on the backdrop, or anywhere on a desktop page, only closes)
+  document.addEventListener('pointerdown', (e) => {
+    if (!act || act.menu.contains(e.target) || act.anchor.contains(e.target)) return
+    closeActionMenu()
+    // the click that ends this same tap is eaten; a later tap elsewhere is not
+    const x = e.clientX, y = e.clientY, at = Date.now()
+    const swallow = (ev) => {
+      document.removeEventListener('click', swallow, true)
+      if (Date.now() - at < 600 && Math.abs(ev.clientX - x) < 12 && Math.abs(ev.clientY - y) < 12) { ev.preventDefault(); ev.stopPropagation() }
+    }
+    document.addEventListener('click', swallow, true)
+    setTimeout(() => document.removeEventListener('click', swallow, true), 600)
+  }, true)
   // <label for="f-tz"> focuses (and on a click, opens) the control, as it would a select
   document.addEventListener('click', (e) => {
     const l = e.target.closest && e.target.closest('label[for]')

package/ui/repos.js

@@ -198,3 +198,22 @@ export function splitChips(chips, selected = [], max = 8) {
   for (const c of chips.slice(max)) (isSel(c) ? shown : more).push(c)
   return { shown, more }
 }
+
+// 0.8.6: find a session on the board. Every word must match one of: title,
+// repo, branch, worktree, folder, last reply, first prompt, checkpoint text
+// (extra), or the session id by prefix (paste it from /status, or cp:xxxxxx).
+export function searchMatches(s, q, extra = []) {
+  const words = String(q || '').toLowerCase().trim().split(/\s+/).filter(Boolean)
+  if (!words.length) return true
+  const cp = s.lastCheckpoint || null
+  const hay = [s.title, s.repoLabel, s.repoName, s.repo && s.repo.branch, s.repo && s.repo.github, s.worktree && s.worktree.name, s.worktree && s.worktree.branch, s.cwd, s.lastPreview, s.firstPrompt, s.machine,
+    cp && cp.doing, cp && cp.next, cp && cp.stoppedAt, ...extra].filter(Boolean).map((h) => String(h).toLowerCase())
+  const id = String(s.id || '').toLowerCase()
+  const short = String(s.shortId || '').toLowerCase()
+  return words.every((w) => {
+    const bare = w.replace(/^cp:/, '')
+    if (bare.length >= 4 && (id.startsWith(bare) || (short && short === bare))) return true
+    if (w.startsWith('cp:')) return false
+    return hay.some((h) => h.includes(w))
+  })
+}

package/ui/viewer.js

@@ -49,3 +49,18 @@ async function wouldPrompt(permissions) {
   }
   return known
 }
+
+// 0.8.6: which machine is "this one" for the person looking: the board's own
+// Mac on its localhost; over the tailnet the Mac whois named (when the folder
+// knows it); over the relay or unknown, none (never the serving Mac by default).
+export function viewerMachine(health) {
+  const h = health || {}
+  const v = h.viewer || null
+  if (!v) return null
+  if (v.remote === false) return v.machine || h.machine || null
+  return v.machine || null
+}
+export function thisOneSuffix(machine, health) {
+  const me = viewerMachine(health)
+  return me && machine === me ? ' (this one)' : ''
+}