@leftoff/cli 0.9.8-beta.21 → 0.9.8-beta.23

package/docs/SECURITY.md

@@ -79,7 +79,7 @@ You deploy the relay yourself, from `relay/` in this repo, to your own Cloudflar
 
 - **On the registry record of each signed-up name: the email address, `plan: "beta"`, `via: "signup"`, the Mac's name and its public signing key, and when it was created.** The email is there for the confirmation link, for "one name per email", and for billing later; it is not shown on the board or sent anywhere else. Names made with the admin token keep `plan: "free"` and no email.
 - **Pending signups**, for up to 30 minutes plus a day after they expire or are confirmed (so a polling CLI hears what happened): the name, email, Mac name and public key, and **SHA-256 hashes** of the link token and of the CLI's poll secret. The tokens themselves are never stored.
-- **Rate-limit stamps** for an hour: a SHA-256 hash of the requester's IP address, and the email address, with the times of their signups (5 an hour per IP, 3 per email).
+- **Rate-limit stamps** for an hour: SHA-256 hashes of the requester's IP address and of its /24 (IPv4) or /64 (IPv6) network, and the email address (with any `+tag` dropped, and dots too for Gmail), with the times of their signups (5 an hour per IP, 15 per network, 3 per email, 200 across the whole relay). A refused signup says which name an email already has only to a Mac that is one of that name's own.
 - **The confirmation email goes through Resend** (the relay's `RESEND_API_KEY`), so Resend sees the address, the subject and the link, the same as for the site's "Claim your name" emails.
 - **leftoff.dev sees the name**, when the relay asks who claimed it, and **the name and email** when the relay tells it a signup was confirmed. Both calls carry the shared `RELAY_LOOKUP_KEY` secret as a bearer token; the site's answer to the lookup is the claim's status and email, which the relay compares and doesn't store.
 - Confirming takes a **POST from the page's Confirm button**; opening the link (a GET) never confirms, so mail scanners and link previews can't. The name is then bound to the Mac's public key from the signup request: only a Mac holding the matching private key can connect as that Mac, exactly like `relay register`.

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

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.9.8-beta.21",
+  "version": "0.9.8-beta.23",
   "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.8-beta.21' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.9.8-beta.23' // 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.8-beta.21",
+  "version": "0.9.8-beta.23",
   "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

@@ -1722,6 +1722,8 @@ html.dv-open .lo-menu { z-index: 62; }
 .syncdetails { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
 .syncitem.red b { color: var(--red); }
 .stale-line { font-size: 12.5px; margin: -6px 0 12px; }
+.machine-only { font-size: 13px; margin: 12px 0 -4px; color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
+.machine-only .linkish { min-height: 44px; font-weight: 600; }
 .chip.machine.stale { border-style: dashed; }
 .rchip .rx { margin-left: 4px; font-size: 11px; opacity: .7; }
 .syncdetails .joinline { margin-top: 4px; }
@@ -2413,6 +2415,9 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 .tabstrip, .openrow, .tabpager { display: none; }
 .tabstrip[hidden], .openrow[hidden], .tabpager[hidden] { display: none !important; }
 .tab-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.strip-tip { position: fixed; z-index: 70; left: 0; top: 0; padding: 4px 8px; border-radius: 7px; background: var(--card2); border: 1px solid var(--line-strong); box-shadow: var(--toast-shadow); color: var(--text2); font-size: 12px; line-height: 1.3; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .12s, transform .12s, visibility 0s .12s; }
+.strip-tip.on { opacity: 1; visibility: visible; transform: none; transition: opacity .12s, transform .12s; }
+@media (prefers-reduced-motion: reduce) { .strip-tip, .strip-tip.on { transition: none; transform: none; } }
 .preview .tab-t, .tab-s.preview .tab-t, .ochip.preview .tab-t { font-style: italic; }
 .tab-live, .tab-need { flex: none; width: 8px; height: 8px; border-radius: 50%; position: relative; }
 .tab-live { background: var(--green); animation: live-pulse 1.6s ease-in-out infinite; }
@@ -2442,6 +2447,7 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
   .tab-keep .ic { width: 12px; height: 12px; }
   .tab-keep { opacity: 0; }
   .tab-cell:hover .tab-keep, .tab-keep:focus-visible, .tab-cell.on .tab-keep { opacity: 1; }
+  .tab-cell.preview { min-width: 164px; } /* the pin and the ×, with room for the title */
   .tab-cell.dragging { opacity: .5; }
   .tab-cell.drop-before { box-shadow: inset 2px 0 0 var(--accent); }
   .tab-all { flex: none; width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-left: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer; }
@@ -2468,7 +2474,7 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
   .ochip-cell { flex: none; display: flex; align-items: stretch; max-width: 62vw; border: 1px solid var(--line); border-radius: 22px; background: var(--card); scroll-snap-align: start; }
   .ochip-cell.preview { border-style: dashed; }
   .ochip { display: flex; align-items: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 0 14px; color: var(--text); text-decoration: none; font-size: 15px; max-width: 100%; min-width: 0; }
-  .ochip-cell:not(.preview) .ochip { padding-right: 2px; }
+  .ochip-cell .ochip { padding-right: 2px; }
   .ochip-x { flex: none; width: 44px; min-height: 44px; border: 0; background: none; color: var(--muted); display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 22px; }
   .ochip-x .ic { width: 15px; height: 15px; }
   .tabpager { padding: 4px max(8px, env(safe-area-inset-left)) 0; }

package/ui/app.js

@@ -25,7 +25,7 @@ import { mdInline, renderSection } from './changelog-md.js'
 import { cardPrsHtml, sessionPrsSection, prsPageHtml, prsBodyHtml, prRowHtml, prRows, readPrFilter, prsHash } from './prs.js'
 import { wantsSetupBanner, setupCandidate, localLeftoffAnswers, thisOneSuffix, isPhoneUa } from './viewer.js'
 import { restoreAccess, hintHtml, restoreWhen, askLine } from './restore-gate.js'
-import { defaultEmoji, PICKER_SET, isEmoji } from './machines.js'
+import { defaultEmoji, PICKER_SET, isEmoji, boardMachineFilter, machineOnlyLabel } from './machines.js'
 import { sessionTitle, titleIsWhere, titleHtml, cardPills, foldsAsEmpty, threadHtml, earlierHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom, jumpView, liveBadgeHtml, lockPulses, liveWorking } from './live-view.js' // 0.9.8 Live link polish
 import { statusView, elapsedText } from './live-status.js'
 import { anyPending, shouldPoll, streamDead, isStale, liveSignature, wakeReason, createWake, createWatchdog, HEARTBEAT_MS, POLL_MS, AWAY_MS } from './live-wake.js' // 0.9.8 live after sleep
@@ -330,6 +330,13 @@ function staleLine(sessions) {
   const ms = [...new Set(sessions.filter((x) => !x.isLocal && x.machine in st).map((x) => x.machine))]
   return ms.length ? '<div class="stale-line faint">' + ms.map((m) => esc(m) + ': showing data as of ' + esc(st[m] ? ago(st[m]) : 'its last sync')).join(' · ') + '</div>' : ''
 }
+// 0.9.8: a board filtered to one Mac says so, with the way back to every Mac.
+function machineOnlyLine() {
+  if (!state.machine) return ''
+  const known = { machines: (state.health && state.health.machines) || [], agents: agentNames() }
+  const agent = known.agents.includes(state.machine) && !known.machines.includes(state.machine)
+  return '<div class="machine-only" role="status">' + (agent ? '' : mEmoji(state.machine) + ' ') + esc(machineOnlyLabel(state.machine, known)) + ' · <button type="button" class="linkish" data-action="machine-all">Show all Macs</button></div>'
+}
 function staleNote(machine) {
   const st = state.health && state.health.sync && state.health.sync.stale
   if (!st || !machine || !(machine in st)) return ''
@@ -768,9 +775,16 @@ async function projectAction(action, btn) {
   }
 }
 let lastMenuAnchor = null
+// The board's Machine filter, kept in this browser ('' = every Mac).
+function setMachineFilter(m) {
+  state.machine = m || ''
+  try { if (state.machine) localStorage.setItem('cp.machine', state.machine); else localStorage.removeItem('cp.machine') } catch {}
+}
 
 async function viewBoard() {
   if (!state.health) await refreshHealth()
+  // 0.9.8: a saved Machine filter for a Mac (or agent) the board no longer knows is dropped
+  if (state.machine && state.health && boardMachineFilter(state.machine, { machines: state.health.machines || [], agents: agentNames() }) !== state.machine) setMachineFilter('')
   if (state.health && state.health.update && state.health.update.available && !state.updates) { try { state.updates = await api('GET', '/v1/updates') } catch {} }
   const [{ sessions: all, viewer, closedCount, todoCount, parked = [] }] = await Promise.all([api('GET', '/v1/sessions?limit=200' + (state.machine ? '&machine=' + encodeURIComponent(state.machine) : '')), loadProjects()])
   // 0.8.2: parked sessions have their own section (any age), not a status group
@@ -830,6 +844,7 @@ async function viewBoard() {
   const todoN = f.repos.length || sp || pj ? inRepos.reduce((n, s) => n + ((s.todos && s.todos.length) || 0), 0) : (todoCount || 0)
   html += '<div class="stats">' + Object.entries(FILTERS).map(([k, fl]) =>
     '<button type="button" class="stat' + (filter === k ? ' on' : '') + '" data-action="filter" data-filter="' + k + '" aria-pressed="' + (filter === k) + '" title="' + esc(filter === k ? 'Showing ' + fl.label.toLowerCase() + ' · tap to show all' : 'Show ' + fl.label.toLowerCase()) + '"><div class="n">' + count(k) + (k === 'needs' && todoN ? '<span class="todo-subn" title="To-dos handed back to you (not counted as waiting)">' + todoN + (todoN === 1 ? ' to-do' : ' to-dos') + '</span>' : '') + '</div><div class="k"><span class="pill ' + fl.cls + '" aria-hidden="true"></span>' + esc(fl.label) + '</div></button>').join('') + '</div>'
+  html += machineOnlyLine() // 0.9.8: in the filter rows, with the spaces and repos it narrows
   html += spaceTabs(spaces, sp, spCounts, 'board-space', allShown.length)
   html += projectRow(spaced, pj, 'board-project')
   if (filter === 'closed') {
@@ -851,7 +866,7 @@ async function viewBoard() {
     html += '<div class="empty mt"><p><strong>No sessions yet.</strong></p><p>Start Claude Code with the mod loaded (<code>claude --plugin-dir ./mod</code>) or install the settings hooks (<code>leftoff init --hooks</code>). Sessions show up here as soon as you send a prompt.</p></div>'
   } else if (!list.length && shown.length) {
     const pjName = pj ? (projectsUi.list.find((p) => p.id === pj) || {}).name : null
-    const inWhat = (pjName ? ' in ' + pjName : '') + (f.repos.length ? ' in ' + f.repos.join(', ') : '') + (sp ? ' in ' + sp : '')
+    const inWhat = (pjName ? ' in ' + pjName : '') + (f.repos.length ? ' in ' + f.repos.join(', ') : '') + (sp ? ' in ' + sp : '') + (state.machine ? ' on ' + state.machine : '')
     html += '<div class="empty mt">' + (filter ? 'Nothing ' + esc(FILTERS[filter].label.toLowerCase()) + esc(inWhat) + ' right now.' : 'No sessions' + esc(inWhat) + ' today.') +
       ' <button type="button" class="linkish" data-action="clear-filters">Show everything</button></div>'
   } else if (list.length) {
@@ -4422,6 +4437,15 @@ async function refreshTabSessions() {
     paintTabs()
   } catch {}
 }
+// What had focus in the strip, to find it again after a repaint: the same control,
+// else (Keep open is gone once kept) the same tab's ×, else the tab itself.
+function tabFocusKey(el) {
+  const d = el.dataset, q = (a, v) => '[' + a + '="' + CSS.escape(v) + '"]'
+  if (d.tabClose) return [q('data-tab-close', d.tabClose), q('data-tab', d.tabClose)]
+  if (d.tabKeep) return [q('data-tab-keep', d.tabKeep), q('data-tab-close', d.tabKeep), q('data-tab', d.tabKeep)]
+  if (d.tab) return [q('data-tab', d.tab)]
+  return el.id ? ['#' + CSS.escape(el.id)] : null
+}
 function paintTabs() {
   const views = tabViews()
   const strip = document.getElementById('tabStrip'), row = document.getElementById('openRow'), pager = document.getElementById('tabPager')
@@ -4429,10 +4453,10 @@ function paintTabs() {
   const sh = stripHtml(views, tabsUi.active, tabsUi.route === 'board', esc)
   if (sh !== tabsUi.html.strip) {
     const sc = strip.querySelector('.tab-scroll'), left = sc ? sc.scrollLeft : 0
-    const had = strip.contains(document.activeElement) ? (document.activeElement.dataset.tab || document.activeElement.dataset.tabClose || document.activeElement.dataset.tabKeep || document.activeElement.id) : null
+    const had = strip.contains(document.activeElement) ? tabFocusKey(document.activeElement) : null
     strip.innerHTML = sh; tabsUi.html.strip = sh
     const nsc = strip.querySelector('.tab-scroll'); if (nsc) nsc.scrollLeft = left
-    if (had) { const el = strip.querySelector('[data-tab="' + CSS.escape(had) + '"], [data-tab-close="' + CSS.escape(had) + '"], [data-tab-keep="' + CSS.escape(had) + '"], #' + CSS.escape(had)); if (el) el.focus({ preventScroll: true }) }
+    if (had) { const el = had.map((q) => strip.querySelector(q)).find(Boolean); if (el) el.focus({ preventScroll: true }) }
   }
   strip.hidden = false
   const rh = openRowHtml(views, esc)
@@ -4500,6 +4524,32 @@ document.addEventListener('click', (e) => {
   if (t && !e.metaKey && !e.ctrlKey && t.dataset.tab !== 'board') { e.preventDefault(); goTab(t.getAttribute('href')) }
 })
 document.addEventListener('dblclick', (e) => { const t = e.target.closest && e.target.closest('#tabStrip .tab-cell'); if (t) { e.preventDefault(); keepTab(t.dataset.tabId) } })
+// The strip's buttons name themselves in a styled tip under them (hover after a
+// beat, keyboard focus at once), not a native title. The strip scrolls sideways,
+// which clips anything hanging below it, so the tip is one fixed element on the page.
+{
+  const tip = document.createElement('span'); tip.className = 'strip-tip'; tip.setAttribute('aria-hidden', 'true'); document.body.appendChild(tip)
+  let cur = null, timer = 0
+  const hide = () => { clearTimeout(timer); cur = null; tip.classList.remove('on') }
+  const show = (el, delay) => {
+    clearTimeout(timer); cur = el
+    timer = setTimeout(() => {
+      if (cur !== el || !el.isConnected) return hide()
+      tip.textContent = el.dataset.tip
+      const r = el.getBoundingClientRect(), w = tip.offsetWidth
+      tip.style.left = Math.round(Math.max(8, Math.min(innerWidth - w - 8, r.left + r.width / 2 - w / 2))) + 'px'
+      tip.style.top = Math.round(r.bottom + 4) + 'px'
+      tip.classList.add('on')
+    }, delay)
+  }
+  const tipped = (e) => e.target.closest && e.target.closest('#tabStrip [data-tip]')
+  document.addEventListener('pointerover', (e) => { const el = tipped(e); if (!el) { if (cur) hide() } else if (e.pointerType === 'mouse' && el !== cur) show(el, 350) })
+  document.addEventListener('pointerout', (e) => { const el = tipped(e); if (el && el === cur && !el.contains(e.relatedTarget)) hide() })
+  document.addEventListener('focusin', (e) => { const el = tipped(e); if (el && el.matches(':focus-visible')) show(el, 0); else if (cur) hide() })
+  document.addEventListener('focusout', (e) => { if (tipped(e) === cur) hide() })
+  for (const ev of ['pointerdown', 'scroll', 'hashchange', 'resize']) window.addEventListener(ev, hide, true)
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && cur) hide() })
+}
 // Working in a session keeps its tab: a Live message, typing there, answering Claude there
 const promoteActive = () => { if (tabsUi.active && tabsUi.route === 's') { const m = promote(tabsUi.m, tabsUi.active); if (m !== tabsUi.m) { setTabs(m); paintTabs() } } }
 for (const ev of ['input', 'change', 'submit']) document.addEventListener(ev, (e) => { if (e.target && $app.contains(e.target) && e.target.type !== 'search') promoteActive() }, true)
@@ -5298,7 +5348,8 @@ document.addEventListener('click', async (ev) => {
     if (action === 'tl-session') { const tf = state.tlFilter || {}; location.hash = timelineHash({ ...tf, session: btn.dataset.session || null }); return }
     if (action === 'tl-trigger') { const tf = state.tlFilter || {}; location.hash = timelineHash({ ...tf, trigger: btn.dataset.trigger || null }); return }
     if (action === 'tl-clear') { saveRepos(window.localStorage, []); location.hash = '#/timeline?repo='; return }
-    if (action === 'clear-filters') { state.moreOpen = false; state.boardSpace = null; saveSpace(null); return setBoardFilter({ repos: [], status: null, project: null }) }
+    if (action === 'clear-filters') { state.moreOpen = false; state.boardSpace = null; saveSpace(null); setMachineFilter(''); return setBoardFilter({ repos: [], status: null, project: null }) }
+    if (action === 'machine-all') { setMachineFilter(''); return render() }
     // Projects (0.9.0): the filter chips, the chip on a card, and the menus
     if (action === 'board-project' || action === 'project-filter') {
       ev.preventDefault(); ev.stopPropagation()
@@ -5926,7 +5977,7 @@ document.addEventListener('change', async (ev) => {
     return cuLoadOptions().then(render)
   }
   if (ev.target.id === 'tlSession') { const tf = state.tlFilter || {}; location.hash = timelineHash({ ...tf, session: ev.target.value || null }); return }
-  if (ev.target.id === 'machineFilter') { state.machine = ev.target.value; localStorage.setItem('cp.machine', state.machine); render() }
+  if (ev.target.id === 'machineFilter') { setMachineFilter(ev.target.value); render() }
 })
 
 // Moving between Settings sections only swaps the section shown (v0.5.9): a

package/ui/machines.js

@@ -41,3 +41,20 @@ export function machineEmojis(names, chosen = {}) {
   for (const n of all) if (!out[n]) { out[n] = defaultEmoji(n, taken); taken.add(out[n]) }
   return out
 }
+
+// 0.9.8: the board's Machine filter is saved in the browser (cp.machine). A
+// filter left on (picked once to find another Mac's session) quietly hid every
+// other Mac's sessions, and with them that Mac's space tab, on that browser
+// only. A saved filter is used only while the board still knows that Mac (or
+// agent); '' = every Mac.
+export function boardMachineFilter(saved, { machines = [], agents = [] } = {}) {
+  const m = String(saved || '')
+  if (!m) return ''
+  if (!machines.length && !agents.length) return m // the board hasn't heard yet
+  return machines.includes(m) || agents.includes(m) ? m : ''
+}
+// The line a filtered board shows: whose sessions these are.
+export function machineOnlyLabel(m, { machines = [], agents = [] } = {}) {
+  if (!m) return ''
+  return agents.includes(m) && !machines.includes(m) ? 'Only ' + m + '’s items' : 'Only ' + m + '’s sessions'
+}

package/ui/tabs.js

@@ -143,6 +143,7 @@ export function tabView(t, session, { title, working } = {}) {
 }
 
 const X = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>'
+const PIN = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><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"/></svg>'
 const BOARD_IC = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>'
 const DOTS = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>'
 const PREV = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m15 18-6-6 6-6"/></svg>'
@@ -156,6 +157,8 @@ function marks(v, esc) {
 function label(v) { return (v.preview ? 'Preview: ' : '') + v.title + (v.working ? ' · Claude is working' : '') + (v.needs ? ' · needs you' : '') }
 
 // The strip (700px and up): Board, then the open sessions, then ⋯ (all of them).
+// Every session tab has a × (a preview has its Keep-open pin before it); the
+// buttons' names show as styled tips (data-tip, app.js), not native titles.
 // The current tab is aria-current="true" (the current item of this set); the rail keeps "page".
 export function stripHtml(views, activeId, onBoard, esc) {
   const board = '<a class="tab tab-board' + (onBoard ? ' on' : '') + '" href="#/" data-tab="board"' + (onBoard ? ' aria-current="true"' : '') + ' title="Board">' + BOARD_IC + '<span class="tab-t">Board</span></a>'
@@ -165,12 +168,13 @@ export function stripHtml(views, activeId, onBoard, esc) {
       '<a class="tab tab-s' + (on ? ' on' : '') + (v.preview ? ' preview' : '') + '" href="' + esc(v.href) + '" data-tab="' + esc(v.id) + '"' + (on ? ' aria-current="true"' : '') + ' title="' + esc(v.title + (v.preview ? ' · preview: double-click to keep it open' : '')) + '" aria-label="' + esc(label(v)) + '" draggable="true">' +
       '<span class="tab-t">' + esc(v.title) + '</span>' + marks(v, esc) + '</a>' +
       (v.preview
-        ? '<button type="button" class="tab-x tab-keep" data-tab-keep="' + esc(v.id) + '" title="Keep open" aria-label="' + esc('Keep ' + v.title + ' open') + '"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><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"/></svg></button>'
-        : '<button type="button" class="tab-x" data-tab-close="' + esc(v.id) + '" title="Close tab" aria-label="' + esc('Close ' + v.title) + '">' + X + '</button>') +
+        ? '<button type="button" class="tab-x tab-keep" data-tab-keep="' + esc(v.id) + '" data-tip="Keep open" aria-label="' + esc('Keep ' + v.title + ' open') + '">' + PIN + '</button>'
+        : '') +
+      '<button type="button" class="tab-x" data-tab-close="' + esc(v.id) + '" data-tip="Close tab" aria-label="' + esc('Close ' + v.title) + '">' + X + '</button>' +
       '</div>'
   }).join('')
   return '<div class="tabstrip-in">' + board + '<div class="tab-scroll" role="list">' + tabs + '</div></div>' +
-    '<button type="button" class="tab-all" id="tabAll" title="All open sessions" aria-label="All open sessions (' + views.length + ')" aria-haspopup="menu"' + (views.length ? '' : ' hidden') + '>' + DOTS + '</button>'
+    '<button type="button" class="tab-all" id="tabAll" data-tip="All open sessions" aria-label="All open sessions (' + views.length + ')" aria-haspopup="menu"' + (views.length ? '' : ' hidden') + '>' + DOTS + '</button>'
 }
 
 // The menu behind ⋯ (picker.js's action menu): every open session, in order.
@@ -181,12 +185,12 @@ export function allTabsItems(views, activeId) {
   })))
 }
 
-// The phone's Open row on the board: the same order, the same marks, the preview in italics.
+// The phone's Open row on the board: the same order, the same marks, the preview in italics, a × on each.
 export function openRowHtml(views, esc) {
   if (!views.length) return ''
   return '<div class="openrow-h"><span>Open</span><span class="faint">' + views.length + '</span></div><div class="openrow-chips">' + views.map((v) =>
     '<span class="ochip-cell' + (v.preview ? ' preview' : '') + '"><a class="ochip' + (v.preview ? ' preview' : '') + '" href="' + esc(v.href) + '" data-tab="' + esc(v.id) + '" aria-label="' + esc(label(v)) + '"><span class="tab-t">' + esc(v.title) + '</span>' + marks(v, esc) + '</a>' +
-    (v.preview ? '' : '<button type="button" class="ochip-x" data-tab-close="' + esc(v.id) + '" aria-label="' + esc('Close ' + v.title) + '" title="Close">' + X + '</button>') + '</span>').join('') + '</div>'
+    '<button type="button" class="ochip-x" data-tab-close="' + esc(v.id) + '" aria-label="' + esc('Close ' + v.title) + '">' + X + '</button></span>').join('') + '</div>'
 }
 
 // A session page on a phone: "2 of 4" with ‹ › (44px) for people who don't swipe,