@leftoff/cli 0.9.3 → 0.9.4

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.9.4] - 2026-10-14
+
+### Changed
+- The card's **⋯** menu has one **Checkpoint now** row again. Tap it for your default length, or tap **›** at its end to pick Short, Informative or Long.
+
 ## [0.9.3] - 2026-10-14
 
 ### Added

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

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "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.9.3' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.9.4' // keep in step with .claude-plugin/plugin.json
 
 const st = {
   internal: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftoff/cli",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "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

@@ -1784,13 +1784,42 @@ html.dv-open .lo-menu { z-index: 62; }
 .lo-act-sub { font-size: 12.5px; color: var(--muted); font-weight: 400; line-height: 1.35; }
 .lo-act-note { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); color: var(--text2); font-size: 13.5px; line-height: 1.4; white-space: normal; }
 .lo-act-note .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--muted); }
-.lo-act-row { display: flex; align-items: center; gap: 6px; padding: 2px 10px 6px 36px; }
-.lo-act-rowlabel { font-size: 12.5px; color: var(--muted); margin-right: 2px; }
-.lo-act.alt { width: auto; flex: 0 0 auto; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; color: var(--text2); }
 .lo-menu.sheet .lo-act-note { font-size: 15px; padding: 10px 10px 12px; }
 .lo-menu.sheet .lo-act-sub { font-size: 14px; }
-.lo-menu.sheet .lo-act-row { padding: 0 10px 10px 36px; gap: 8px; }
-.lo-menu.sheet .lo-act.alt { flex: 1 1 0; justify-content: center; padding: 11px 12px; font-size: 16px; min-height: 44px; }
+/* 0.9.4: a row with a second page (Checkpoint now ›), the iOS way: the row
+   does its action, the › at its right edge (its own target, a hairline before
+   it) slides the menu to the page; ‹ title goes back. Fixed width on a
+   desktop so the page change only eases the height. */
+.lo-actmenu.has-pages { overflow-x: hidden; }
+.lo-menu.lo-actmenu.has-pages:not(.sheet) { width: min(312px, calc(100vw - 16px)); max-width: none; }
+.lo-act-split { display: flex; align-items: stretch; position: relative; }
+.lo-act-split .lo-act-main { flex: 1 1 auto; min-width: 0; }
+.lo-act-next { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; margin-left: 2px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; position: relative; }
+.lo-act-next::before { content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 1px; background: var(--line); }
+.lo-act-next .ic { width: 16px; height: 16px; }
+.lo-act-next:hover, .lo-act-next:focus { outline: none; background: var(--bg2); color: var(--text); }
+[data-theme="dark"] .lo-act-next:hover, [data-theme="dark"] .lo-act-next:focus, :root:not([data-theme="light"]) .lo-act-next:hover, :root:not([data-theme="light"]) .lo-act-next:focus { background: var(--line); }
+.lo-act-next:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
+.lo-act-split:hover .lo-act-next::before, .lo-act-split:focus-within .lo-act-next::before { opacity: 0; }
+.lo-act-back { color: var(--text); font-weight: 600; border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; margin-bottom: 4px; }
+.lo-act-back .ic { color: var(--accent); }
+.lo-act-page .lo-act.has-sub { padding-top: 9px; padding-bottom: 9px; }
+.lo-act-page .lo-act.on { font-weight: 600; }
+.lo-act .lo-act-check { color: var(--accent); }
+.lo-act .lo-act-sub { white-space: normal; }
+.lo-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+.lo-menu.lo-act-sizing { transition: height .2s cubic-bezier(.2, .8, .2, 1), top .2s cubic-bezier(.2, .8, .2, 1); overflow-y: hidden; }
+@keyframes lo-page-fwd { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
+@keyframes lo-page-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
+.lo-act-page.lo-in-fwd { animation: lo-page-fwd .2s cubic-bezier(.2, .8, .2, 1); }
+.lo-act-page.lo-in-back { animation: lo-page-back .2s cubic-bezier(.2, .8, .2, 1); }
+.lo-menu.sheet .lo-act-next { width: 52px; min-height: 44px; }
+.lo-menu.sheet .lo-act-next .ic { width: 20px; height: 20px; }
+.lo-menu.sheet .lo-act-next::before { top: 12px; bottom: 12px; }
+.lo-menu.sheet .lo-act-page .lo-act.has-sub { padding-top: 12px; padding-bottom: 12px; }
+/* a phone keeps :hover on the last row tapped; only focus highlights there */
+@media (hover: none) { :root .lo-act:hover:not(:focus), :root .lo-act-next:hover:not(:focus) { background: none; } }
+@media (prefers-reduced-motion: reduce) { .lo-act-page.lo-in-fwd, .lo-act-page.lo-in-back { animation: none; } .lo-menu.lo-act-sizing { transition: none; } }
 .split { display: inline-flex; align-items: stretch; }
 .split .btn.split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
 .split .btn.split-more { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 8px; margin-left: 1px; display: inline-flex; align-items: center; }

package/ui/app.js

@@ -420,17 +420,19 @@ 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 }]
-// 0.9.2: an item may also be { note } (a plain line, no button) or { row: [items], label }
-// (small buttons side by side, e.g. the other checkpoint lengths), and carry a sub line.
+// 0.9.2: an item may also be { note } (a plain line, no button) and carry a sub line.
+// 0.9.4: or { …item, more: { title, items } }: the row does its action, and a ›
+// at its right edge opens a second page of items (e.g. the checkpoint lengths,
+// each with { sub, on }).
 function moreMenu(s, items, { project = true, title = '' } = {}) {
   items = items.concat([project ? projectMenuItem(s) : null]).filter(Boolean) // 0.9.0: Add to project… on every card with a repo
   if (!items.length) return ''
   const btn = (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.sub ? ' data-sub="' + esc(it.sub) + '"' : '') + '>' +
+    Object.entries(it.attrs || {}).map(([k, v]) => ' ' + k + '="' + esc(v) + '"').join('') + (it.title ? ' title="' + esc(it.title) + '"' : '') + (it.sub ? ' data-sub="' + esc(it.sub) + '"' : '') + (it.on ? ' data-on="' + esc(it.onLabel || 'on') + '"' : '') + '>' +
     (it.icon ? icon(it.icon) : '') + esc(it.label) + '</button>'
   return '<button type="button" class="btn icon-btn more" data-action="card-more" data-id="' + esc(s.id) + '"' + (title ? ' data-menu-title="' + esc(title) + '"' : '') + ' aria-label="More actions" title="More actions" aria-haspopup="menu" aria-expanded="false">' + icon('ellipsis') + '</button>' +
     '<template class="more-items">' + items.map((it) => it.note ? '<div class="more-note">' + (it.icon ? icon(it.icon) : '') + esc(it.note) + '</div>'
-      : it.row ? '<div class="more-row" data-label="' + esc(it.label || '') + '">' + it.row.map(btn).join('') + '</div>' : btn(it)).join('') + '</template>'
+      : it.more ? '<div class="more-split" data-more-title="' + esc(it.more.title) + '">' + btn(it) + '<div class="more-sub">' + it.more.items.map(btn).join('') + '</div></div>' : btn(it)).join('') + '</template>'
 }
 function openCardMenu(btn) {
   const tpl = btn.parentElement && btn.parentElement.querySelector('template.more-items')
@@ -440,12 +442,12 @@ function openCardMenu(btn) {
   const toItem = (b) => {
     const svg = b.querySelector('svg')
     const attrs = {}
-    for (const a of b.attributes) if ((a.name.startsWith('data-') && a.name !== 'data-sub') || a.name === 'title') attrs[a.name] = a.value
-    return { label: b.textContent.trim(), icon: svg ? svg.outerHTML : '', attrs, ...(b.dataset.sub ? { sub: b.dataset.sub } : {}) }
+    for (const a of b.attributes) if ((a.name.startsWith('data-') && a.name !== 'data-sub' && a.name !== 'data-on') || a.name === 'title') attrs[a.name] = a.value
+    return { label: b.textContent.trim(), icon: svg ? svg.outerHTML : '', attrs, ...(b.dataset.sub ? { sub: b.dataset.sub } : {}), ...(b.dataset.on ? { on: true, onLabel: b.dataset.on } : {}) }
   }
   const items = [...tpl.content.children].map((el) => {
     if (el.classList.contains('more-note')) { const svg = el.querySelector('svg'); return { note: el.textContent.trim(), icon: svg ? svg.outerHTML : '' } }
-    if (el.classList.contains('more-row')) return { row: [...el.querySelectorAll('button')].map(toItem), label: el.dataset.label || '' }
+    if (el.classList.contains('more-split')) return { ...toItem(el.querySelector(':scope > button')), more: { title: el.dataset.moreTitle || '', items: [...el.querySelectorAll('.more-sub > button')].map(toItem) } }
     return el.tagName === 'BUTTON' ? toItem(el) : null
   }).filter(Boolean)
   lastMenuAnchor = btn
@@ -463,12 +465,13 @@ function reachOf(s) {
 // The length "Checkpoint now" writes: yours from Settings → Summaries.
 function defaultLength() { const k = state.cfg && state.cfg.summary && state.cfg.summary.length; return LENGTH_CHOICES.some((o) => o.key === k) ? k : 'informative' }
 const lengthLabel = (k) => (LENGTH_CHOICES.find((o) => o.key === k) || LENGTH_CHOICES[1]).label
-// Checkpoint now at your length, then the other two lengths side by side.
+// 0.9.4: one row, "Checkpoint now" at your length; its › opens Short /
+// Informative / Long, each with its line, your default ticked.
 function checkpointItems() {
   const def = defaultLength()
   return [
-    { action: 'checkpoint', label: 'Checkpoint now', icon: 'bookmark-plus', sub: lengthLabel(def) + ' · your default', attrs: { 'data-length': def } },
-    { row: LENGTH_CHOICES.filter((o) => o.key !== def).map((o) => ({ action: 'checkpoint', label: o.label, title: o.label + ' checkpoint: ' + o.blurb, attrs: { 'data-length': o.key } })), label: 'Or' },
+    { action: 'checkpoint', label: 'Checkpoint now', icon: 'bookmark-plus', title: 'Checkpoint now · ' + lengthLabel(def), attrs: { 'data-length': def },
+      more: { title: 'Checkpoint length', items: LENGTH_CHOICES.map((o) => ({ action: 'checkpoint', label: o.label, sub: o.blurb, on: o.key === def, onLabel: 'your default', attrs: { 'data-length': o.key } })) } },
   ]
 }
 // The ⋯ menu when the Mac a session lives on can't be reached: why, in plain

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) {