@leftoff/cli 0.8.6 → 0.8.7

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 What changed in Leftoff (called Checkpoints until 0.4.5), newest first. The board's **What's new** page and `leftoff changelog` both read this file.
 
+## [0.8.7] - 2026-10-13
+
+### Changed
+- Session cards keep their buttons on one row: the main button (Go or Resume), a copy icon for the resume command, and **⋯** for Checkpoint now, Pin, Archive and Done with it.
+
 ## [0.8.6] - 2026-10-13
 
 ### Added

package/mod/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "Leftoff (formerly Checkpoints): WTF was I working on? Tracks every Claude Code session on this machine, writes a 3-line checkpoint when one goes quiet, and adds /cp (checkpoint now), /cp-name and a /leftoff pane. Talks to the local Leftoff daemon on 127.0.0.1:7429 and falls back to writing markdown in ~/checkpoints.",
   "author": {
     "name": "Joel"

package/mod/hooks/register.js

@@ -28,7 +28,7 @@ const END_TIMEOUT_MS = 1000
 const MODEL_TIMEOUT_MS = 20000
 
 // Module state. $.state is not used: the pane redraws with $.ui.invalidate.
-const MOD_VERSION = '0.8.6' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.8.7' // keep in step with .claude-plugin/plugin.json
 
 const st = {
   internal: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftoff/cli",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "Leftoff: WTF was I working on? Tracks every Claude Code session, writes a 3-line checkpoint when one goes quiet, and gives you a daily digest and a board, on your Mac and (optionally) your phone.",
   "keywords": [
     "claude",

package/ui/app.css

@@ -1630,3 +1630,26 @@ html.dv-open, html.dv-open body { overflow: hidden; }
   .emoji-sheet-wrap { align-items: flex-end; }
   .emoji-sheet { width: 100vw; border-radius: 16px 16px 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
 }
+
+/* 0.8.7: a card's actions are one row: main button, copy icon, ⋯ (the rest in a menu) */
+.card > .actions-row { flex-wrap: nowrap; align-items: center; min-width: 0; }
+.card > .actions-row > .btn:not(.icon-btn), .card > .actions-row > .go-off { min-width: 0; flex: 0 1 auto; }
+.card > .actions-row > .btn:not(.icon-btn) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 1.45; }
+.card > .actions-row > .btn:not(.icon-btn) .ic { vertical-align: -2px; margin-right: 5px; }
+.card > .actions-row > .go-off { display: inline-flex; align-items: center; gap: 6px; overflow: hidden; }
+.card > .actions-row > .go-off .why { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.card > .actions-row > .ro { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.btn.icon-btn { flex: none; width: 30px; height: 28px; padding: 0; justify-content: center; }
+.btn.icon-btn .ic { width: 15px; height: 15px; margin: 0; }
+.card > .actions-row > .btn.more { margin-left: auto; }
+.btn.copy-resume.copied { color: var(--green, #2fbf71); border-color: currentColor; }
+.lo-actmenu { min-width: 190px; max-width: min(320px, calc(100vw - 16px)); overflow-y: auto; }
+.lo-act { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text2); font: inherit; font-size: 14px; text-align: left; cursor: pointer; white-space: nowrap; }
+.lo-act .ic { width: 16px; height: 16px; flex: none; color: var(--muted); }
+.lo-act:hover, .lo-act:focus { outline: none; background: var(--bg2); color: var(--text); }
+[data-theme="dark"] .lo-act:hover, [data-theme="dark"] .lo-act:focus, :root:not([data-theme="light"]) .lo-act:hover, :root:not([data-theme="light"]) .lo-act:focus { background: var(--line); }
+.lo-act:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
+.lo-act:disabled { opacity: .55; cursor: progress; }
+.lo-menu.sheet.lo-actmenu { max-width: none; }
+.lo-menu.sheet .lo-act { padding: 14px 10px; font-size: 16px; }
+@media (pointer: coarse) { .btn.icon-btn { width: 36px; height: 34px; } }

package/ui/app.js

@@ -2,7 +2,7 @@
 // /v1 API on the same origin (auth rides the cookie set at GET /).
 import { goWithFeedback, goState, GIVE_UP_MS } from './go.js'
 import { icon } from './icons.js'
-import { selectHtml, comboHtml, closeMenu } from './picker.js'
+import { selectHtml, comboHtml, closeMenu, openActionMenu, closeActionMenu, actionMenuKey } from './picker.js'
 import { SETTINGS, settingsKeyFor } from './settings-nav.js'
 import { inStatus, repoChips, applyFilter, readFilter, saveRepos, filterHash, toggleRepo, chipSelected, splitChips, repoMatches, orderSelectedFirst, searchMatches } from './repos.js'
 import { needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer, turnsHtml, dismissedHtml } from './needs.js'
@@ -98,7 +98,13 @@ function toastUndo(msg, onUndo, ms = 5000) {
   toast.t = setTimeout(() => t.classList.remove('show', 'has-action'), ms)
 }
 async function copy(text) {
-  try { await navigator.clipboard.writeText(text); toast('Copied: ' + text) } catch { prompt('Copy this:', text) }
+  try { await navigator.clipboard.writeText(text); toast('Copied: ' + text); return true } catch { prompt('Copy this:', text); return false }
+}
+// 0.8.7: the copy icon says it worked for a moment (a check, "Copied"), then goes back.
+function copiedMark(btn) {
+  clearTimeout(btn._copied)
+  btn.classList.add('copied'); btn.innerHTML = icon('check'); btn.setAttribute('aria-label', 'Copied'); btn.title = 'Copied'
+  btn._copied = setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = icon('copy'); btn.setAttribute('aria-label', 'Copy resume command'); btn.title = 'Copy resume command' }, 1500)
 }
 const pill = (status) => '<span class="pill s-' + esc(status) + '">' + esc(LABEL[status] || status) + '</span>'
 
@@ -402,8 +408,44 @@ function agentCard(s) {
     agentListChips(s) + (n ? cardBadge(n) : '') + agentCpBlock(s.latestCheckpoint) +
     '<a class="cplink" href="' + href + '">' + (s.checkpointCount ? s.checkpointCount + (s.checkpointCount === 1 ? ' checkpoint' : ' checkpoints') : 'Session') + ' →</a>' +
     '<div class="actions-row">' + (n ? agentReplyButton(a, 'btn') : '') +
-      '<span class="ro">read-only · from ' + esc(a.display || a.name) + '’s feed</span></div></article>'
+      roNote('read-only · from ' + (a.display || a.name) + '’s feed') + '</div></article>'
+}
+
+// 0.8.7: a card's actions are one row: its main button (Go, or Resume once it's
+// closed), a small copy icon for the resume command, and "⋯" for the rest. The
+// ⋯ menu's items ride in the card as an inert <template> (real buttons with the
+// same data-action as before), so the one click handler below runs them unchanged.
+function copyResumeIcon(s) {
+  return '<button type="button" class="btn icon-btn copy-resume" data-action="resume" data-id="' + esc(s.id) + '" aria-label="Copy resume command" title="Copy resume command">' + icon('copy') + '</button>'
+}
+// items: [{ action, label, icon, title, attrs }]
+function moreMenu(s, items) {
+  items = items.filter(Boolean)
+  if (!items.length) return ''
+  return '<button type="button" class="btn icon-btn more" data-action="card-more" data-id="' + esc(s.id) + '" aria-label="More actions" title="More actions" aria-haspopup="menu" aria-expanded="false">' + icon('ellipsis') + '</button>' +
+    '<template class="more-items">' + items.map((it) => '<button type="button" data-action="' + esc(it.action) + '" data-id="' + esc(s.id) + '"' +
+      Object.entries(it.attrs || {}).map(([k, v]) => ' ' + k + '="' + esc(v) + '"').join('') + (it.title ? ' title="' + esc(it.title) + '"' : '') + '>' +
+      (it.icon ? icon(it.icon) : '') + esc(it.label) + '</button>').join('') + '</template>'
+}
+function openCardMenu(btn) {
+  const tpl = btn.parentElement && btn.parentElement.querySelector('template.more-items')
+  if (!tpl) return
+  const card = btn.closest('.card')
+  const title = card && card.querySelector('.title a') ? card.querySelector('.title a').textContent.trim() : ''
+  const items = [...tpl.content.querySelectorAll('button')].map((b) => {
+    const svg = b.querySelector('svg')
+    const attrs = {}
+    for (const a of b.attributes) if (a.name.startsWith('data-') || a.name === 'title') attrs[a.name] = a.value
+    return { label: b.textContent.trim(), icon: svg ? svg.outerHTML : '', attrs }
+  })
+  openActionMenu(btn, items, { title })
 }
+const sessionMenuItems = (s) => s.isLocal ? [
+  { action: 'checkpoint', label: 'Checkpoint now', icon: 'bookmark-plus' },
+  { action: 'pin', label: s.pinned ? 'Unpin' : 'Pin', icon: s.pinned ? 'pin-off' : 'pin' },
+  { action: 'archive', label: 'Archive', icon: 'archive' },
+] : []
+const roNote = (t) => '<span class="ro" title="' + esc(t) + '">' + esc(t) + '</span>'
 
 function card(s) {
   if (s.agent) return agentCard(s)
@@ -419,11 +461,9 @@ function card(s) {
       (s.needsInput && s.lastNotification && !s.needsYou ? '<span class="chip">' + esc(s.lastNotification.replace(/_/g, ' ')) + '</span>' : '') + '</div>' +
     cardPrsHtml(s.prs) + listChips(s) + cardHandoffChips(s) + nb + cpBlock(s.latestCheckpoint) +
     '<a class="cplink" href="#/s/' + encodeURIComponent(s.id) + '">' + (s.checkpointCount ? s.checkpointCount + (s.checkpointCount === 1 ? ' checkpoint' : ' checkpoints') : 'Session history') + ' →</a>' +
-    '<div class="actions-row">' + goButton(s) +
-      '<button type="button" class="btn" data-action="resume">Copy resume</button>' +
-      (s.isLocal ? '<button type="button" class="btn" data-action="checkpoint">Checkpoint now</button>' +
-        '<button type="button" class="btn" data-action="pin">' + (s.pinned ? 'Unpin' : 'Pin') + '</button>' +
-        '<button type="button" class="btn" data-action="archive">Archive</button>' : '<span class="ro">' + (s.peer && s.peer.ok ? 'lives on ' + esc(s.machine) + ' · answering and Go work through it' : 'read-only here · lives on ' + esc(s.machine)) + '</span>') +
+    '<div class="actions-row">' + (goButton(s) || (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '')) +
+      copyResumeIcon(s) +
+      (s.isLocal ? moreMenu(s, sessionMenuItems(s)) : roNote(s.peer && s.peer.ok ? 'lives on ' + s.machine + ' · answering and Go work through it' : 'read-only here · lives on ' + s.machine)) +
     '</div></article>'
 }
 
@@ -669,9 +709,8 @@ function closedCard(s, viewer) {
       '<span class="chip machine' + (s.isLocal ? '' : ' remote') + '" title="' + (s.isLocal ? 'this machine' : 'another machine') + '">⌂ ' + esc(s.machine) + '</span>' + modelChip(s) +
       '<span title="' + esc(clock(s.endedAt)) + '">ended ' + esc(ago(s.endedAt)) + '</span><span>·</span><span>' + esc(s.turns) + (s.turns === 1 ? ' turn' : ' turns') + '</span></div>' +
     cardHandoffChips(s) + cpBlock(s.latestCheckpoint, { showWhen: false }) +
-    '<div class="actions-row">' + resumeButton(s, viewer) +
-      '<button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '">Copy resume</button>' +
-      '<a class="btn" href="' + href + '">' + (s.checkpointCount ? s.checkpointCount + (s.checkpointCount === 1 ? ' checkpoint' : ' checkpoints') : 'Details') + ' →</a>' +
+    '<div class="actions-row">' + resumeButton(s, viewer) + copyResumeIcon(s) +
+      moreMenu(s, [{ action: 'open-href', label: s.checkpointCount ? s.checkpointCount + (s.checkpointCount === 1 ? ' checkpoint' : ' checkpoints') : 'Details', icon: 'history', attrs: { 'data-href': href } }]) +
     '</div></article>'
 }
 function closedRepaint() {
@@ -743,9 +782,8 @@ function parkedCard(s, viewer) {
       (s.isLocal ? '' : '<span class="chip machine remote" title="another machine">⌂ ' + esc(s.machine) + '</span>') + modelChip(s) +
       '<span title="' + esc(clock(p.at)) + '">parked ' + esc(ago(p.at)) + '</span>' + (open ? '<span>·</span><span>still open</span>' : '') + '</div>' +
     (note ? '<div class="park-note"><span class="k">' + (p.note ? 'Note' : 'Next') + '</span> ' + esc(note) + '</div>' : '') +
-    '<div class="actions-row">' + main +
-      (open ? '' : '<button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '">Copy resume</button>') +
-      '<button type="button" class="linkish park-done" data-action="unpark" data-id="' + esc(s.id) + '" title="No longer parked' + (open ? '' : '; it goes to Closed') + '">Done with it</button>' +
+    '<div class="actions-row">' + main + (open ? '' : copyResumeIcon(s)) +
+      moreMenu(s, [{ action: 'unpark', label: 'Done with it', icon: 'circle-check', title: 'No longer parked' + (open ? '' : '; it goes to Closed') }]) +
     '</div></article>'
 }
 // The session page's Park row (0.8.2): any open session, Codex too, with an
@@ -2983,6 +3021,12 @@ document.addEventListener('input', (ev) => {
 })
 document.addEventListener('keydown', (ev) => { if (ev.target.id === 'prs-q' && ev.key === 'Escape' && ev.target.value) { ev.preventDefault(); ev.target.value = ''; ev.target.dispatchEvent(new Event('input', { bubbles: true })) } })
 
+window.addEventListener('hashchange', () => closeActionMenu())
+// 0.8.7: a card's ⋯ opens from the keyboard with the arrows too (Enter and Space click it).
+document.addEventListener('keydown', (ev) => {
+  const b = ev.target && ev.target.closest && ev.target.closest('[data-action="card-more"]')
+  if (b) actionMenuKey(b, ev, () => openCardMenu(b))
+})
 document.addEventListener('click', async (ev) => {
   const btn = ev.target.closest('[data-action]')
   if (!btn) return
@@ -3289,6 +3333,8 @@ document.addEventListener('click', async (ev) => {
       try { await api('POST', '/v1/needs/restore', action === 'need-restore-all' ? { all: true } : { key: btn.dataset.need }); toast(action === 'need-restore-all' ? 'Restored' : 'Restored to Needs you') } catch (e) { toast(e.message, 5000); btn.disabled = false; return }
       return render()
     }
+    if (action === 'card-more') { ev.preventDefault(); return openCardMenu(btn) }
+    if (action === 'open-href') { location.hash = btn.dataset.href; return }
     if (action === 'go') return goClick(btn, id, s)
     if (action === 'resume-open') { const ok = await resumeOpen(btn, btn.dataset.id || id); if (ok && btn.closest('.parked-card')) await render(); return ok }
     if (action === 'unpark') {
@@ -3304,9 +3350,10 @@ document.addEventListener('click', async (ev) => {
     if (action && action.startsWith('sync-') || action === 'peer-trust') return syncAction(action, btn)
     if (action === 'resume') {
       const cmd = s ? s.resumeCommand : (await api('GET', '/v1/sessions/' + encodeURIComponent(id))).resumeCommand
-      await copy(cmd)
+      if (await copy(cmd) && btn.classList.contains('copy-resume')) copiedMark(btn)
     } else if (action === 'checkpoint') {
       btn.disabled = true; btn.textContent = 'Writing…'
+      if (!btn.isConnected) toast('Writing a checkpoint…', 20000) // from the ⋯ menu, which has closed
       const cp = await api('POST', '/v1/sessions/' + encodeURIComponent(id) + '/checkpoints', { trigger: 'manual', generate: true })
       toast('Checkpoint saved · Next: ' + cp.next)
       render()

package/ui/icons.js

@@ -31,7 +31,14 @@ export const ICONS = {
   "chevron-right": "<path d=\"m9 18 6-6-6-6\"/>",
   "chevron-left": "<path d=\"m15 18-6-6 6-6\"/>",
   "mail": "<rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"/> <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"/>",
-  "search": "<circle cx=\"11\" cy=\"11\" r=\"8\"/> <path d=\"m21 21-4.3-4.3\"/>"
+  "search": "<circle cx=\"11\" cy=\"11\" r=\"8\"/> <path d=\"m21 21-4.3-4.3\"/>",
+  "copy": "<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"/> <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/>",
+  "ellipsis": "<circle cx=\"12\" cy=\"12\" r=\"1\"/> <circle cx=\"19\" cy=\"12\" r=\"1\"/> <circle cx=\"5\" cy=\"12\" r=\"1\"/>",
+  "pin": "<path d=\"M12 17v5\"/> <path d=\"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z\"/>",
+  "pin-off": "<path d=\"M12 17v5\"/> <path d=\"M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89\"/> <path d=\"m2 2 20 20\"/> <path d=\"M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11\"/>",
+  "archive": "<rect width=\"20\" height=\"5\" x=\"2\" y=\"3\" rx=\"1\"/> <path d=\"M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8\"/> <path d=\"M10 12h4\"/>",
+  "bookmark-plus": "<path d=\"m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z\"/> <path d=\"M12 7v6\"/> <path d=\"M15 10H9\"/>",
+  "circle-check": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <path d=\"m9 12 2 2 4-4\"/>"
 }
 
 export function icon(name, cls = 'ic') {

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]')