@leftoff/cli 0.9.8-beta.6 → 0.9.8-beta.7

package/docs/peer-protocol.md

@@ -111,6 +111,8 @@ Only Macs registered for that user can connect: the first with `leftoff relay re
 
 Every few seconds (`peers.pollMs`, default 4 s) each daemon asks every machine that accepts for `needs.list`, so another Mac's permission prompts and questions show on this board with a ⌂ machine chip. Answer, reply and Go on another machine's session go out as envelopes. When that isn't possible, the button is grey and says why: not allowed on that machine, unreachable, key changed, no key yet (that Mac needs 0.5.2), or no route. Answering from a phone keeps its own rules (Settings → Privacy & security), and Go stays a local-browser action.
 
+Phone notifications (0.9.8) ride the same envelopes: `push.sync` carries the Web Push subscriptions a browser turned on (endpoint, keys, a device label) with the VAPID keys they were made with, plus 30-day removal tombstones; each side merges (newer word per endpoint wins) and answers with its own, so every Mac can push for its own sessions and only those. It is answered even when a Mac doesn't allow incoming commands, because it runs nothing there. Kept on each Mac in `~/.config/checkpoints/push/` (0600), never in the synced folder. Shared when a device subscribes or unsubscribes, at start, and every 20 minutes.
+
 ## Pairing through Syncthing (0.5.3)
 
 Before two Macs share a folder they have no channel to each other, so pairing rides on Syncthing itself. Leftoff never opens a port for it.

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

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

@@ -2313,3 +2313,18 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
   .card > .actions-row > .btn.icon-btn { width: 44px; }
   .card > .actions-row > .btn:not(.icon-btn) { min-width: 44px; }
 }
+
+/* Phone notifications (0.9.8): the one per-device button, in More and Settings → General */
+.push-slot[hidden] { display: none; }
+.push-box { display: flex; gap: 10px; align-items: flex-start; }
+.push-box > .ic { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--muted); }
+.push-main { min-width: 0; flex: 1; }
+.push-line { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text2); }
+.push-line strong { color: var(--text); font-weight: 600; }
+.push-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
+.push-acts .btn { min-height: 44px; padding: 0 14px; font-size: 14px; white-space: nowrap; justify-content: center; }
+.push-note { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
+.push-note.bad { color: var(--red, #c0392b); }
+.moremenu .push-slot { border-top: 1px solid var(--line); margin-top: 6px; padding: 12px 8px 6px; }
+.moremenu:has(.push-slot:not([hidden])) { width: 270px; }
+.form .push-slot { grid-column: 1 / -1; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card2, transparent); margin-top: 4px; }

package/ui/app.js

@@ -21,6 +21,7 @@ import { restoreAccess, hintHtml, restoreWhen, askLine } from './restore-gate.js
 import { defaultEmoji, PICKER_SET, isEmoji } from './machines.js'
 import { sessionTitle, titleIsWhere, titleHtml, cardPills, foldsAsEmpty, threadHtml, earlierHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom, jumpView, liveBadgeHtml, lockPulses } from './live-view.js' // 0.9.8 Live link polish
 import { statusView, elapsedText } from './live-status.js'
+import { mountPush, paintPush } from './push.js' // 0.9.8 phone notifications
 import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref, docMenuItems, docFileName, renderDoc } from './handoffs.js'
 const $app = document.getElementById('app')
 // 0.9.8: the pulsing dots (Live while Claude works, active, a blocking ask) keep their beat through the board's redraws
@@ -2616,6 +2617,7 @@ async function viewSettings() {
     general: '<div class="section">Needs you</div>' +
       '<label for="f-notify">Notify me</label><label class="check"><input id="f-notify" type="checkbox"' + (c.notify && c.notify.needsYou === false ? '' : ' checked') + '><span>Show a notification when a prompt or question has waited ' + esc((c.notify && c.notify.delaySec != null) ? c.notify.delaySec : 10) + ' seconds</span></label>' +
       '<div class="hint">With <code>terminal-notifier</code>, a click jumps to the session.</div>' +
+      '<div class="full push-slot" data-push-slot hidden></div>' +
       '<div class="section">Appearance</div>' +
       '<label>Theme</label><div class="theme" role="group" aria-label="Theme">' + ['light', 'dark', 'system'].map((t) => '<button type="button" data-theme-set="' + t + '" aria-pressed="' + (pref === t) + '">' + THEME_ICONS[t] + (t === 'system' ? 'System' : t[0].toUpperCase() + t.slice(1)) + '</button>').join('') + '</div>' +
       advanced('general', '<label for="f-dormant">Dormant after (min)</label><input id="f-dormant" type="number" min="1" step="1" value="' + esc(c.dormantAfterMin) + '">' +
@@ -3533,6 +3535,7 @@ function openMore() {
   if (!m) return
   closeQuickLook(); toggleStatus(false)
   paintMoreDots()
+  paintPush()
   m.hidden = false
   if (b) b.setAttribute('aria-expanded', 'true')
   const first = m.querySelector('a.on') || m.querySelector('a')
@@ -4973,3 +4976,6 @@ connect()
 // The home-screen app's service worker (v0.4.6): it only serves an offline page
 // when the Mac can't be reached; it caches no API data and no board pages.
 if ('serviceWorker' in navigator && window.isSecureContext) navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(() => {})
+// 0.9.8: phone notifications. The one per-device button (More on a phone,
+// Settings → General everywhere); the service worker shows the pushes.
+mountPush({ api })

package/ui/index.html

@@ -46,6 +46,7 @@
     <a href="#/digest" data-route="digest" role="menuitem"><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 18h-5"/> <path d="M18 14h-8"/> <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9a2 2 0 0 1 2-2h2"/> <rect width="8" height="4" x="10" y="6" rx="1"/></svg><span>Digest</span></a>
     <a href="#/whats-new" data-route="whats-new" role="menuitem"><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="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/> <path d="M20 2v4"/> <path d="M22 4h-4"/> <circle cx="4" cy="20" r="2"/></svg><span>What’s new</span><span class="newdot" hidden></span></a>
     <a href="#/settings" data-route="settings" role="menuitem"><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="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/> <circle cx="12" cy="12" r="3"/></svg><span>Settings</span><span class="topdot" hidden></span></a>
+    <div class="push-slot" data-push-slot role="group" aria-label="Notifications" hidden></div>
   </div>
   <div class="quicklook" id="quickLook" role="dialog" aria-labelledby="qlTitle" hidden></div>
   <div class="statuspop" id="statusPop" role="dialog" aria-label="Status" hidden></div>

package/ui/live-status.js

@@ -12,6 +12,10 @@
 //     └─► failed                       └─► stopped (the turn ended with no answer)
 //   received/working with nothing new for LIVE_QUIET_MS reads "quiet" until
 //   something happens again; replied and failed are final.
+//   A message that arrived while Claude was already working on another one is
+//   folded into that turn (folded: the id of the message that owns the turn):
+//   it has no Working bubble of its own, and when the turn ends it is
+//   "Answered with the reply above".
 
 export const LIVE_QUIET_MS = 3 * 60 * 1000
 export const LIVE_PHASES = ['sent', 'received', 'working', 'replied', 'stopped', 'failed']
@@ -22,7 +26,7 @@ const clip = (s, n) => { const t = String(s == null ? '' : s).replace(/\s+/g, '
 export function initStatus(at = 0) { return { phase: 'sent', at, last: at, tool: null, waiting: null, ran: [], endedAt: null } }
 
 // One thing that happened to the message. ev: { type, at, tool?, detail?, asked?, text? }
-//   delivered | failed | started | tool | tool_done | ask | ask_done | text | reply | ended
+//   delivered | failed | started | tool | tool_done | ask | ask_done | text | reply | ended | folded | answered | lost
 export function stepStatus(st, ev = {}) {
   const s = { ...(st || initStatus(ev.at || 0)), ran: [...((st && st.ran) || [])] }
   const at = ev.at || s.last
@@ -43,6 +47,8 @@ export function stepStatus(st, ev = {}) {
     case 'ask_done': s.waiting = null; break
     case 'reply': s.phase = 'replied'; s.tool = null; s.waiting = null; s.endedAt = at; break
     case 'ended': s.tool = null; s.waiting = null; s.endedAt = at; s.phase = ev.text ? 'replied' : 'stopped'; break
+    case 'folded': if (s.phase === 'sent' || s.phase === 'received') s.phase = 'working'; s.folded = ev.owner || true; s.tool = null; s.waiting = null; break
+    case 'answered': s.phase = 'replied'; s.folded = ev.owner || s.folded || true; s.tool = null; s.waiting = null; s.endedAt = at; break // folded: the reply above is its answer
     case 'lost': s.tool = null; s.waiting = null; s.endedAt = at; s.phase = 'stopped'; s.lost = true; break // a restart came in between and no answer is in the transcript
     default: return s
   }
@@ -53,22 +59,23 @@ export function stepStatus(st, ev = {}) {
 // The line under the message: { label, steps, spin, tone, elapsedMs }
 export function statusView(st, now = Date.now()) {
   if (!st) return null
-  const quiet = (st.phase === 'received' || st.phase === 'working') && now - (st.last || st.at) >= LIVE_QUIET_MS
+  const quiet = !st.folded && (st.phase === 'received' || st.phase === 'working') && now - (st.last || st.at) >= LIVE_QUIET_MS
   const elapsedMs = Math.max(0, (st.endedAt || now) - (st.at || now))
   let label
   if (st.phase === 'sent') label = 'Sent, waiting for the session'
   else if (st.phase === 'received') label = quiet ? 'Received · no word from Claude yet' : 'Received · Claude is starting…'
+  else if (st.phase === 'working' && st.folded) label = 'Taken into the turn above'
   else if (st.phase === 'working') {
     if (st.waiting) label = 'Waiting for your OK' + (st.waiting.tool ? ' (' + st.waiting.tool + (st.waiting.detail ? ': ' + st.waiting.detail : '') + ')' : '')
     else if (st.tool) label = 'Claude is working… (running ' + st.tool.name + (st.tool.detail ? ': ' + st.tool.detail : '') + ')'
     else label = quiet ? 'Claude has been quiet for a while (check the terminal)' : 'Claude is working…'
-  } else if (st.phase === 'replied') label = 'Replied'
+  } else if (st.phase === 'replied') label = st.folded ? 'Answered with the reply above' : 'Replied'
   else if (st.phase === 'stopped') label = st.lost ? 'No reply recorded' : 'Stopped without a reply'
   else label = 'Didn’t arrive'
   const at = { sent: 0, received: 1, working: 2, replied: 3, stopped: 3, failed: 0 }[st.phase] || 0
   const steps = ['Sent', 'Received', st.phase === 'stopped' ? (st.lost ? 'No reply' : 'Stopped') : 'Working', st.phase === 'stopped' ? null : 'Replied'].filter(Boolean)
     .map((name, i) => ({ name, state: st.phase === 'failed' ? (i === 0 ? 'bad' : 'todo') : i < at ? 'done' : i === at ? (FINAL.has(st.phase) || st.phase === 'stopped' ? 'done' : 'now') : 'todo' }))
-  const spin = !quiet && (st.phase === 'sent' || st.phase === 'received' || st.phase === 'working') && !st.waiting
+  const spin = !quiet && !st.folded && (st.phase === 'sent' || st.phase === 'received' || st.phase === 'working') && !st.waiting
   const tone = st.phase === 'failed' ? 'bad' : st.phase === 'stopped' || quiet || st.waiting ? 'warn' : st.phase === 'replied' ? 'good' : 'busy'
   return { label, steps, spin, tone, quiet, elapsedMs, final: FINAL.has(st.phase) || st.phase === 'stopped' }
 }

package/ui/live-view.js

@@ -176,6 +176,21 @@ export function earlierHtml(n, { esc }) {
   if (!(n > 0)) return ''
   return '<li class="lv-earlier" data-key="earlier" data-sig="' + esc(String(n)) + '" data-older="1"><button type="button" class="btn live-earlier" data-action="live-earlier">Show earlier <span class="faint">(' + esc(String(n)) + (n === 1 ? ' turn' : ' turns') + ')</span></button></li>'
 }
+// A message's time is when it was sent (a clock time today, the date before):
+// a relative "just now" drawn once stays "just now" while the bubble sits there.
+export function sentLabel(iso, now = Date.now()) {
+  const t = iso ? Date.parse(iso) : NaN
+  if (!Number.isFinite(t)) return ''
+  const d = new Date(t), n = new Date(now)
+  const today = d.getFullYear() === n.getFullYear() && d.getMonth() === n.getMonth() && d.getDate() === n.getDate()
+  return today ? d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' }) : d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })
+}
+function timeHtml(iso, { esc, now }) {
+  const label = sentLabel(iso, now)
+  if (!label) return ''
+  const full = new Date(Date.parse(iso)).toLocaleString(undefined, { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })
+  return '<time class="faint" datetime="' + esc(new Date(Date.parse(iso)).toISOString()) + '" title="' + esc(full) + '">' + esc(label) + '</time>'
+}
 export function entryHtml(m, { esc, ago, md, now = Date.now(), status = null }) {
   const who = senderLabel(m)
   const title = m.from === 'you' ? senderTitle(m) : ''
@@ -197,7 +212,7 @@ export function entryHtml(m, { esc, ago, md, now = Date.now(), status = null })
     foot = '<div class="lv-tick ' + (m.state === 'failed' ? 'bad' : '') + '">' + esc(m.state === 'failed' ? (m.errorText || 'Didn’t arrive') : m.state === 'received' ? 'Received ✓✓' : 'Sent ✓') + '</div>'
   }
   const sig = entrySig(m) + (m.from === 'claude' && status ? statusSig(status) : '')
-  return '<li class="lv lv-' + esc(m.from) + (m.history ? ' lv-history' : '') + '" data-key="' + esc(entryKey(m)) + '" data-sig="' + esc(sigHash(sig)) + '"><div class="lv-who"' + (title ? ' title="' + esc(title) + '"' : '') + '>' + esc(who) + ' <span class="faint">' + esc(ago(m.at)) + '</span></div>' + body + foot + '</li>'
+  return '<li class="lv lv-' + esc(m.from) + (m.history ? ' lv-history' : '') + '" data-key="' + esc(entryKey(m)) + '" data-sig="' + esc(sigHash(sig)) + '"><div class="lv-who"' + (title ? ' title="' + esc(title) + '"' : '') + '>' + esc(who) + ' ' + timeHtml(m.at, { esc, now }) + '</div>' + body + foot + '</li>'
 }
 
 const FINAL_PHASES = new Set(['replied', 'failed', 'stopped'])
@@ -208,6 +223,8 @@ export function deliveryHtml(st, { esc, error = null }) {
   if (!st) return ''
   if (st.phase === 'failed') return '<div class="lv-tick bad" role="status">' + esc(error || 'Didn’t arrive') + '</div>'
   const got = st.phase !== 'sent'
+  // folded into a turn Claude was already on: the reply above answers it too, no Working bubble of its own
+  if (st.folded) return '<div class="lv-tick got lv-folded" role="status" title="It arrived while Claude was working, so Claude took it into that turn">Received <span aria-hidden="true">✓✓</span> · ' + esc(st.phase === 'replied' ? 'Answered with the reply above' : 'Taken into the turn above') + '</div>'
   return '<div class="lv-tick' + (got ? ' got' : '') + '" title="' + esc(got ? 'Claude Code received it' : 'Waiting for the session to pick it up') + '">' + (got ? 'Received <span aria-hidden="true">✓✓</span>' : 'Sent <span aria-hidden="true">✓</span>') + '</div>'
 }
 
@@ -255,8 +272,9 @@ export function pendingClaudeHtml(you, { esc, ago, now = Date.now() }) {
   const key = 'ans_' + you.id + ':claude'
   let inner
   if (st.phase === 'stopped') inner = '<div class="lv-text lv-none">' + esc(st.lost ? 'No reply recorded' : 'Stopped without a reply') + '</div>' + toolsHtml(st, { esc, now })
+  else if (st.phase === 'replied') inner = '<div class="lv-text lv-none">Replied in the terminal</div>' + toolsHtml(st, { esc, now }) // settled, its words not kept: never a Working bubble
   else inner = workingHtml(st, { esc, now })
-  return '<li class="lv lv-claude lv-pending' + (st.phase === 'stopped' ? ' lv-ended' : '') + '" data-key="' + esc(key) + '" data-pending="1" data-sig="' + esc(sigHash('pending' + statusSig(st))) + '"><div class="lv-who">Claude <span class="faint">' + esc(ago(st.last ? new Date(st.last).toISOString() : you.at)) + '</span></div>' + inner + '</li>'
+  return '<li class="lv lv-claude lv-pending' + (FINAL_PHASES.has(st.phase) ? ' lv-ended' : '') + '" data-key="' + esc(key) + '" data-pending="1" data-sig="' + esc(sigHash('pending' + statusSig(st))) + '"><div class="lv-who">Claude ' + timeHtml(st.last ? new Date(st.last).toISOString() : you.at, { esc, now }) + '</div>' + inner + '</li>'
 }
 
 // The whole thread: each message you sent, then Claude's side of that turn.
@@ -268,7 +286,7 @@ export function threadHtml(msgs, opts) {
   for (const m of list) {
     if (m.from === 'claude') { const you = m.replyTo ? byId.get(m.replyTo) : null; html += entryHtml(m, { ...opts, status: you && you.status ? you.status : null }); continue }
     html += entryHtml(m, opts)
-    if (m.status && !answered.has(m.id) && m.status.phase !== 'failed' && m.status.phase !== 'sent') html += pendingClaudeHtml(m, opts)
+    if (m.status && !m.status.folded && !answered.has(m.id) && m.status.phase !== 'failed' && m.status.phase !== 'sent') html += pendingClaudeHtml(m, opts)
   }
   return html
 }
@@ -290,7 +308,7 @@ export { ranWithoutAsking }
 // A content signature, to replace only the entries that changed (the time-ago
 // text is left out so a minute ticking over doesn't redraw a reply).
 function sigHash(s) { let h = 5381; for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) | 0; return (h >>> 0).toString(36) }
-export function entrySig(m) { return JSON.stringify([m.text, m.state, m.status && [m.status.phase, m.status.tool, m.status.waiting, (m.status.ran || []).length, m.status.endedAt], m.done, m.ranWithoutAsking, m.errorText]) }
+export function entrySig(m) { return JSON.stringify([m.text, m.state, m.status && [m.status.phase, m.status.tool, m.status.waiting, (m.status.ran || []).length, m.status.endedAt, m.status.folded || null], m.done, m.ranWithoutAsking, m.errorText]) }
 
 // ------------------------------------------------------------ the DOM keeper
 

package/ui/push.js

@@ -0,0 +1,140 @@
+// Phone notifications (0.9.8): the one per-device button. No setting: the
+// button and the browser's own permission prompt are the opt-in, and the same
+// button turns them off for this device. The Mac that owns a session sends
+// the push (src/push.js); this file only subscribes this browser.
+//
+// iPhone: Web Push works for a board added to the Home Screen (iOS 16.4+), so
+// Safari in a tab gets one line saying how, and the button appears in the
+// Home Screen app. Pure parts (pushSupport, pushUi) are shared with the tests.
+
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => '&#' + c.charCodeAt(0) + ';')
+const BELL = '<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="M10.268 21a2 2 0 0 0 3.464 0"/> <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>'
+
+export const isIos = (ua = '', touch = 0) => /iPhone|iPad|iPod/.test(ua) || (/Macintosh/.test(ua) && touch > 1)
+
+// What this browser can do -> { state } : insecure | add_to_home | unsupported | denied | off
+export function pushSupport({ ua = '', touch = 0, standalone = false, hasPush = false, hasSW = false, secure = true, permission = 'default' } = {}) {
+  const ios = isIos(ua, touch)
+  if (!secure) return { state: 'insecure', ios }
+  if (ios && !standalone) return { state: 'add_to_home', ios }
+  if (!hasPush || !hasSW) return { state: 'unsupported', ios }
+  if (permission === 'denied') return { state: 'denied', ios }
+  return { state: 'off', ios }
+}
+
+// The block for a slot. st: pushSupport() plus { on, busy, note, noteBad }
+export function pushUi(st = {}) {
+  const note = st.note ? '<p class="push-note' + (st.noteBad ? ' bad' : '') + '" role="status">' + esc(st.note) + '</p>' : ''
+  const busy = st.busy ? ' disabled aria-busy="true"' : ''
+  const wrap = (inner) => '<div class="push-box">' + BELL + '<div class="push-main">' + inner + note + '</div></div>'
+  switch (st.on ? 'on' : st.state) {
+    case 'add_to_home': return wrap('<p class="push-line">Add Leftoff to your Home Screen first (Share → Add to Home Screen), then turn on notifications here.</p>')
+    case 'denied': return wrap('<p class="push-line">Notifications are blocked for Leftoff on this device. Allow them in ' + (st.ios ? 'Settings → Notifications → Leftoff' : 'the browser’s site settings') + ', then come back.</p>')
+    case 'on': return wrap('<p class="push-line"><strong>Notifications on for this device</strong></p><div class="push-acts"><button type="button" class="btn" data-push="test"' + busy + '>Send a test</button><button type="button" class="btn ghost" data-push="off"' + busy + '>Turn off</button></div>')
+    case 'off': return wrap('<p class="push-line">Get a notification when Claude needs you or a Live reply lands.</p><div class="push-acts"><button type="button" class="btn primary" data-push="on"' + busy + '>' + (st.busy ? 'Turning on…' : 'Turn on notifications') + '</button></div>')
+    default: return '' // no Push here (or not https): nothing to offer
+  }
+}
+
+const b64u = (buf) => btoa(String.fromCharCode(...new Uint8Array(buf))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+const unb64u = (s) => Uint8Array.from(atob(String(s).replace(/-/g, '+').replace(/_/g, '/') + '==='.slice((String(s).length + 3) % 4)), (c) => c.charCodeAt(0))
+
+const ui = { st: null, on: false, sub: null, busy: false, note: '', noteBad: false, api: null, refreshed: false }
+
+function env() {
+  return {
+    ua: navigator.userAgent, touch: navigator.maxTouchPoints || 0,
+    standalone: !!(window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) || navigator.standalone === true,
+    hasPush: 'PushManager' in window && 'Notification' in window, hasSW: 'serviceWorker' in navigator,
+    secure: !!window.isSecureContext, permission: 'Notification' in window ? Notification.permission : 'default',
+  }
+}
+
+async function registration() {
+  if (!('serviceWorker' in navigator)) return null
+  return (await navigator.serviceWorker.getRegistration('/')) || (await navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(() => null))
+}
+
+const keyOf = (sub) => { try { const k = sub.options && sub.options.applicationServerKey; return k ? b64u(k) : null } catch { return null } }
+
+async function load() {
+  const e = env()
+  ui.st = pushSupport(e)
+  ui.sub = null; ui.on = false
+  if (ui.st.state !== 'off') return
+  try { const reg = await registration(); ui.sub = reg && reg.pushManager ? await reg.pushManager.getSubscription() : null } catch { ui.sub = null }
+  ui.on = !!ui.sub && e.permission === 'granted'
+  // Once a page load: tell this Mac again (it shares with your other Macs), so a
+  // Mac that lost track, or a new one, knows this device.
+  if (ui.on && !ui.refreshed && ui.api) { ui.refreshed = true; ui.api('POST', '/v1/push/subscribe', { subscription: ui.sub.toJSON(), serverKey: keyOf(ui.sub), ua: navigator.userAgent }).catch(() => {}) }
+}
+
+export function paintPush() {
+  const slots = document.querySelectorAll('[data-push-slot]')
+  if (!slots.length) return
+  const html = ui.st ? pushUi({ ...ui.st, on: ui.on, busy: ui.busy, note: ui.note, noteBad: ui.noteBad }) : ''
+  for (const el of slots) { el.innerHTML = html; el.hidden = !html; el.setAttribute('data-pp', '1') }
+}
+
+async function turnOn() {
+  // The permission prompt first, straight from the tap (iOS asks only then).
+  const perm = await Notification.requestPermission()
+  if (perm !== 'granted') { ui.st = pushSupport(env()); ui.note = perm === 'denied' ? '' : 'Notifications weren’t allowed. Tap again to try.'; return }
+  await registration()
+  const reg = await navigator.serviceWorker.ready
+  const info = await ui.api('GET', '/v1/push')
+  let sub = await reg.pushManager.getSubscription()
+  // An existing subscription stays (the Mac that made it shares its key); a new one uses this Mac's key.
+  if (!sub) sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: unb64u(info.publicKey) })
+  await ui.api('POST', '/v1/push/subscribe', { subscription: sub.toJSON(), serverKey: keyOf(sub) || info.publicKey, ua: navigator.userAgent })
+  ui.sub = sub; ui.on = true; ui.refreshed = true
+  ui.note = 'You’ll get a notification when Claude needs you or a Live reply lands.'
+}
+
+async function turnOff() {
+  const sub = ui.sub
+  if (sub) {
+    const endpoint = sub.endpoint
+    try { await sub.unsubscribe() } catch {}
+    await ui.api('POST', '/v1/push/unsubscribe', { endpoint }).catch(() => {})
+  }
+  ui.sub = null; ui.on = false
+  ui.note = 'Notifications off for this device.'
+}
+
+async function sendTest() {
+  const r = await ui.api('POST', '/v1/push/test', { endpoint: ui.sub && ui.sub.endpoint })
+  if (r && r.ok) { ui.note = 'Sent from ' + (r.machine || 'your Mac') + '. It should show up in a few seconds.'; return }
+  if (r && r.error === 'not_subscribed') { ui.on = false; ui.sub = null; throw new Error('This Mac didn’t know this device. Turn notifications on again.') }
+  throw new Error('The push service didn’t take it' + (r && r.error ? ' (' + r.error + ')' : '') + '.')
+}
+
+// Wire it once: api is app.js's api(method, path, body).
+export function mountPush({ api }) {
+  ui.api = api
+  document.addEventListener('click', async (ev) => {
+    const b = ev.target.closest && ev.target.closest('[data-push]')
+    if (!b || ui.busy) return
+    ev.preventDefault(); ev.stopPropagation()
+    const what = b.getAttribute('data-push')
+    ui.busy = true; ui.note = ''; ui.noteBad = false; paintPush()
+    try {
+      if (what === 'on') await turnOn()
+      else if (what === 'off') await turnOff()
+      else if (what === 'test') await sendTest()
+    } catch (e) { ui.note = e && e.message ? e.message : String(e); ui.noteBad = true }
+    ui.busy = false
+    paintPush()
+  })
+  load().then(paintPush, paintPush)
+  // Settings is drawn on demand: paint a slot the moment one appears.
+  const app = document.getElementById('app')
+  if (app && window.MutationObserver) new MutationObserver(() => { if (document.querySelector('[data-push-slot]:not([data-pp])')) paintPush() }).observe(app, { childList: true, subtree: true })
+  // A tapped notification: the service worker asks the open board to show that session.
+  if ('serviceWorker' in navigator) navigator.serviceWorker.addEventListener('message', (ev) => {
+    const d = ev.data || {}
+    if (d.type !== 'leftoff-open' || typeof d.url !== 'string') return
+    try { const u = new URL(d.url, location.origin); if (u.origin === location.origin && location.hash !== u.hash) location.hash = u.hash } catch {}
+  })
+  document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible' && !ui.busy) load().then(paintPush, paintPush) })
+}

package/ui/sw.js

@@ -1,8 +1,13 @@
-// Leftoff's service worker (v0.4.6). One job: when the Mac running Leftoff
-// can't be reached (Tailscale off on the phone, the Mac asleep, the daemon
-// stopped), a page navigation shows offline.html instead of Safari's error.
-// It caches nothing else: no API data, no board pages, no assets. Every other
-// request goes straight to the network, untouched.
+// Leftoff's service worker (v0.4.6). Two jobs:
+// 1. When the Mac running Leftoff can't be reached (Tailscale off on the
+//    phone, the Mac asleep, the daemon stopped), a page navigation shows
+//    offline.html instead of Safari's error. It caches nothing else: no API
+//    data, no board pages, no assets. Every other request goes straight to the
+//    network, untouched.
+// 2. (0.9.8) Phone notifications: a push from the Mac that owns a session
+//    becomes a notification (the session's title, one short line, a tag per
+//    session and kind so a burst replaces the last one), and a tap opens that
+//    session (its Live chat, or the permission card at the top).
 const CACHE = 'leftoff-offline-v1'
 const OFFLINE = ['/offline.html', '/offline.css', '/icon-192.png']
 
@@ -45,3 +50,45 @@ function slow(url) {
 function offline() {
   return caches.match('/offline.html').then((r) => r || new Response('Leftoff is offline', { status: 503, headers: { 'content-type': 'text/plain' } }))
 }
+
+// ------------------------------------------------------------ notifications (0.9.8)
+
+// Safari must show every push (it takes the permission back after a few
+// silent ones), so only other browsers skip one for the session already on screen.
+const MAY_SKIP = /Chrome|CriOS|Firefox|FxiOS|Edg\//.test(self.navigator.userAgent || '')
+const sameSession = (clientUrl, url) => {
+  try { const a = new URL(clientUrl).hash, b = new URL(url, self.location.origin).hash; return !!b && b !== '#/' && (a === b || a.startsWith(b + '/') || a.startsWith(b + '?')) } catch { return false }
+}
+const windows = () => self.clients.matchAll({ type: 'window', includeUncontrolled: true })
+
+self.addEventListener('push', (event) => {
+  let d = {}
+  try { d = event.data ? event.data.json() : {} } catch { d = { body: event.data ? event.data.text() : '' } }
+  const url = typeof d.url === 'string' && d.url.startsWith('/') ? d.url : '/'
+  event.waitUntil((async () => {
+    if (MAY_SKIP && d.kind !== 'test') {
+      const on = (await windows()).some((c) => c.focused && c.visibilityState === 'visible' && sameSession(c.url, url))
+      if (on) return
+    }
+    await self.registration.showNotification(String(d.title || 'Leftoff').slice(0, 80), {
+      body: String(d.body || '').slice(0, 180), tag: d.tag || undefined, renotify: !!d.tag, icon: '/icon-192.png',
+      data: { url, kind: d.kind || null, sessionId: d.sessionId || null }, timestamp: Date.now(),
+    })
+  })())
+})
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close()
+  const url = new URL((event.notification.data && event.notification.data.url) || '/', self.location.origin).href
+  event.waitUntil((async () => {
+    const list = (await windows()).filter((c) => new URL(c.url).origin === self.location.origin)
+    const c = list.find((x) => x.focused) || list[0]
+    if (c) {
+      // the board routes by hash: tell the page (no reload), then bring it forward
+      c.postMessage({ type: 'leftoff-open', url })
+      try { await c.focus() } catch {}
+      return
+    }
+    await self.clients.openWindow(url)
+  })())
+})