@leftoff/cli 0.9.8-beta.11 → 0.9.8-beta.13

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

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

@@ -2076,6 +2076,7 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 .lv-md pre code { background: none; border: 0; padding: 0; }
 .lv-md a { color: var(--accent); text-decoration: underline; }
 .lv-md blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); }
+.lv-you .lv-md code, .lv-you .lv-md pre { background: color-mix(in srgb, var(--accent) 8%, var(--card)); border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
 .lv-note { margin-top: 6px; font-size: 12px; color: var(--muted); }
 /* the status line under a message: Sent → Received → Working → Replied, with a spinner and the time */
 .lv-status { margin-top: 6px; font-size: 12px; color: var(--muted); }
@@ -2586,3 +2587,25 @@ html.pv-open, html.pv-open body { overflow: hidden; }
 /* a chip in the box opens its preview (its × and ↻ stay their own buttons) */
 .att-open { display: flex; align-items: center; gap: inherit; min-width: 0; flex: 1 1 auto; min-height: 44px; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 9px; }
 .att-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+/* "Leftoff updated · Refresh" (0.9.8, ui/update-bar.js): a pill at the top,
+   above the header and the phone's bars (it doesn't move with nav-hide) and
+   under menus, sheets and the previews. Never covers the bottom nav or the composer. */
+.updatebar { position: fixed; z-index: 35; left: 50%; top: calc(env(safe-area-inset-top) + 8px); transform: translate(-50%, -12px); opacity: 0;
+  display: flex; align-items: center; gap: 4px; max-width: min(520px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))); width: max-content;
+  padding: 4px 4px 4px 14px; border-radius: 26px; background: var(--card2); color: var(--text); border: 1px solid var(--line-strong); box-shadow: var(--toast-shadow);
+  font-size: 14px; line-height: 1.3; transition: opacity .2s ease, transform .2s ease; }
+.updatebar.in { opacity: 1; transform: translate(-50%, 0); }
+.updatebar[hidden] { display: none; }
+.updatebar .ub-icon { display: inline-flex; color: var(--accent); flex: none; }
+.updatebar .ub-icon svg { width: 16px; height: 16px; }
+.updatebar .ub-text { flex: 1 1 auto; min-width: 0; font-weight: 600; padding: 0 6px 0 4px; overflow-wrap: anywhere; }
+.updatebar.confirm .ub-text { font-weight: 500; font-size: 13px; color: var(--text2, var(--text)); }
+.updatebar .ub-go { flex: none; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 0; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
+.updatebar .ub-go:disabled { opacity: .7; cursor: default; }
+.updatebar .ub-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 22px; border: 0; background: none; color: var(--muted); cursor: pointer; }
+.updatebar .ub-x svg { width: 18px; height: 18px; }
+.updatebar .ub-x:hover { color: var(--text); background: var(--bg2); }
+.updatebar .ub-go:focus-visible, .updatebar .ub-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+@media (min-width: 700px) { .updatebar { left: calc(50% + var(--rail-w, 0px) / 2); } }
+@media (prefers-reduced-motion: reduce) { .updatebar { transition: none; } }

package/ui/app.js

@@ -17,6 +17,7 @@ import { openPdfView, pdfThumb } from './pdfview.js' // 0.9.8: the PDF preview (
 import { isBlank, composerKey, isTouchUi, composerHeight } from './composer.js' // 0.9.8 the Live composer
 import { attachPlan, skippedText, shortName, prepareFile, uploadFile, fetchAttachment, fmtSize, attachKind, pastedName, ATTACH_MAX_FILES } from './attach.js' // 0.9.8 attachments
 import { wireTips } from './tips.js'
+import { mountUpdateBar, takeCarry } from './update-bar.js' // 0.9.8 "Leftoff updated · Refresh"
 import { needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer, turnsHtml, dismissedHtml } from './needs.js'
 import { SUMMARY_EXAMPLES, LENGTH_CHOICES } from './summary-examples.js'
 import { mdInline, renderSection } from './changelog-md.js'
@@ -34,6 +35,10 @@ 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
 if (typeof MutationObserver === 'function') new MutationObserver(() => lockPulses(document)).observe(document.body, { childList: true, subtree: true })
 const state = { sessions: [], health: null, cfg: null, route: null, machine: localStorage.getItem('cp.machine') || '', drafts: {}, pendingAsk: {}, mayAnswer: true, needOpen: {}, needTurns: {} }
+// 0.9.8: drafts the update bar's Refresh carried over (ui/update-bar.js)
+const carried = takeCarry()
+if (carried) Object.assign(state.drafts, carried.drafts)
+let updateBar = null
 const multi = () => !!(state.health && state.health.machines && state.health.machines.length > 1)
 const agentNames = () => [...new Set(((state.health && state.health.agents) || []).map((a) => a.display || a.name))]
 
@@ -3991,7 +3996,9 @@ async function refreshHealth() {
     if (dot) dot.hidden = !(h.whatsNew && h.whatsNew.unseen > 0)
     paintMoreDots()
     paintSettingsDots()
+    if (updateBar) updateBar.check(h)
   } catch (e) {
+    if (updateBar) updateBar.check(null) // a failed check changes nothing
     el.className = 'health down'
     el.querySelector('.label').textContent = e && e.code === 'login_required' ? 'not signed in' : 'daemon offline'
     el.title = el.querySelector('.label').textContent
@@ -5764,7 +5771,46 @@ document.addEventListener('pointerdown', (ev) => {
   if (m && !m.contains(ev.target)) m.open = false
 })
 api('GET', '/v1/config').then((c) => (state.cfg = c)).catch(() => {})
+// 0.9.8: "Leftoff updated · Refresh" when the Mac serving this board has newer
+// files than the ones this page runs. It never reloads by itself; Refresh
+// carries your drafts over and says first what wouldn't come along.
+updateBar = mountUpdateBar({
+  icon,
+  health: () => refreshHealth(),
+  risks: () => {
+    let attachments = 0, uploading = 0
+    for (const list of attachUi.by.values()) for (const a of list) { attachments++; if (a.status === 'prep' || a.status === 'up') uploading++ }
+    const f = document.activeElement
+    const typing = !!(f && /^(INPUT|TEXTAREA)$/.test(f.tagName) && !f.dataset.draft && !f.readOnly && !/^(checkbox|radio|button|submit|range|color|file|search)$/.test(f.type) && !f.closest('.cmdk, #settingsForm') && String(f.value || '').trim())
+    let unsavedSettings = false
+    try { unsavedSettings = settingsChanged().length > 0 } catch {}
+    return { attachments, uploading, unsavedSettings, typing }
+  },
+  carry: () => {
+    const drafts = { ...state.drafts }
+    for (const t of document.querySelectorAll('textarea[data-draft]')) if (t.value) drafts[t.dataset.draft] = t.value
+    const f = document.activeElement
+    const focus = f && f.dataset && f.dataset.draft ? { key: f.dataset.draft, a: f.selectionStart || 0, b: f.selectionEnd || 0 } : lastDraftFocus
+    return { drafts, focus }
+  },
+})
+// The box you were typing in, if you tabbed from it to the bar.
+let lastDraftFocus = null
+document.addEventListener('focusin', (ev) => { if (!(ev.target.closest && ev.target.closest('#updateBar'))) lastDraftFocus = null })
+document.addEventListener('focusout', (ev) => { const t = ev.target; if (t && t.dataset && t.dataset.draft) lastDraftFocus = { key: t.dataset.draft, a: t.selectionStart || 0, b: t.selectionEnd || 0 } })
+// Back from Refresh: the box you were typing in has its text, and (with a
+// keyboard and mouse) the cursor where it was.
+function restoreCarriedFocus(tries = 50) {
+  const f = carried && carried.focus
+  if (!f || isTouchUi(window.matchMedia)) return
+  if (document.activeElement && document.activeElement !== document.body) return // you've moved on
+  const t = [...document.querySelectorAll('textarea[data-draft]')].find((x) => x.dataset.draft === f.key)
+  if (!t || t.disabled) { if (tries > 0) setTimeout(() => restoreCarriedFocus(tries - 1), 100); return } // the session page draws after its data
+  t.focus({ preventScroll: true })
+  try { const n = t.value.length; t.setSelectionRange(Math.min(f.a, n), Math.min(f.b, n)) } catch {}
+}
 refreshHealth().then(render).then(firstRunSetup)
+restoreCarriedFocus()
 connect()
 
 // The home-screen app's service worker (v0.4.6): it only serves an offline page

package/ui/live-view.js

@@ -208,8 +208,9 @@ export function entryHtml(m, { esc, ago, md, now = Date.now(), status = null, at
   if (m.from === 'claude') body = '<div class="lv-text lv-md">' + (md ? md(m.text || '') : esc(m.text || '')) + '</div>'
   else if (m.from === 'you') {
     const a = messageAttachments(m)
-    body = (a.text || !a.attachments.length ? '<div class="lv-text">' + esc(a.text) + '</div>' : '') + (a.attachments.length && attHtml ? attHtml(a.attachments, m) : '')
-  } else body = '<div class="lv-text">' + esc(m.text || '') + '</div>'
+    body = (a.text || !a.attachments.length ? '<div class="lv-text lv-md">' + (md ? md(a.text) : esc(a.text)) + '</div>' : '') + (a.attachments.length && attHtml ? attHtml(a.attachments, m) : '')
+  } else if (m.from === 'terminal') body = '<div class="lv-text lv-md">' + (md ? md(m.text || '') : esc(m.text || '')) + '</div>'
+  else body = '<div class="lv-text">' + esc(m.text || '') + '</div>'
   let foot = ''
   if (m.from === 'claude') {
     // what Claude did for this turn sits with Claude's answer: still working, the tools it ran, the note

package/ui/update-bar.js

@@ -0,0 +1,158 @@
+// 0.9.8: "Leftoff updated · Refresh". An open board (a desktop tab, the
+// iPhone Home Screen app) keeps running the code it loaded with until it's
+// reloaded. The page knows the build it came with (index.html's
+// <meta name="leftoff-ui">, stamped by the Mac that served it, src/ui-build.js)
+// and every health check says what that Mac serves now (`ui`); when they differ
+// a bar offers a one-tap reload. Never on first load, never on its own, and a
+// failed health check changes nothing. The pure parts are unit-tested.
+
+export const POLL_MS = 60 * 1000 // a health check at least this often while the page is visible
+export const CARRY_KEY = 'leftoff.reload.carry' // drafts handed to the reloaded page
+export const CARRY_MAX_AGE_MS = 2 * 60 * 1000
+
+// The build this page loaded with: { build, machine } from the meta tag, or null.
+export function pageBuild(doc = typeof document !== 'undefined' ? document : null) {
+  const m = doc && doc.querySelector && doc.querySelector('meta[name="leftoff-ui"]')
+  const build = m && m.getAttribute('content')
+  return build ? { build, machine: m.getAttribute('data-machine') || '' } : null
+}
+
+// Should the bar show? loaded: { build, machine } (what this page runs);
+// current: a health answer ({ ui, machine }), or null when the check failed;
+// state: { showing, dismissed } (dismissed: the build whose bar was closed).
+export function shouldShow(loaded, current, state = {}) {
+  const showing = !!state.showing
+  if (!current || typeof current.ui !== 'string' || !current.ui) return showing // no answer (or an older Mac): keep what's there
+  if (!loaded || !loaded.build) return false
+  // The board moved to another Mac (yours went to sleep): its files aren't an update of this page's.
+  if (loaded.machine && current.machine && loaded.machine !== current.machine) return showing
+  if (current.ui === loaded.build) return false
+  if (state.dismissed && state.dismissed === current.ui) return false
+  return true
+}
+
+// What a reload would lose, in words; empty when nothing. Drafts (the Live
+// composer, replies) are carried over, so they aren't here.
+export function reloadRisks({ attachments = 0, uploading = 0, unsavedSettings = false, typing = false } = {}) {
+  const out = []
+  if (uploading > 0) out.push(uploading === 1 ? 'A file is still uploading' : uploading + ' files are still uploading')
+  else if (attachments > 0) out.push(attachments === 1 ? 'The attached file won’t carry over' : 'The ' + attachments + ' attached files won’t carry over')
+  if (unsavedSettings) out.push('Unsaved settings will be lost')
+  if (typing) out.push('What you’re typing will be lost')
+  return out
+}
+
+// Drafts handed over a reload: written right before it, read once right after.
+export function packCarry({ drafts = {}, focus = null, now = Date.now() } = {}) {
+  const d = {}
+  for (const [k, v] of Object.entries(drafts || {})) if (typeof v === 'string' && v.trim()) d[k] = v
+  return JSON.stringify({ at: now, drafts: d, focus: focus && d[focus.key] != null ? focus : null })
+}
+export function unpackCarry(raw, { now = Date.now(), maxAgeMs = CARRY_MAX_AGE_MS } = {}) {
+  try {
+    const j = JSON.parse(raw || '')
+    if (!j || typeof j.at !== 'number' || now - j.at > maxAgeMs || now < j.at - 5000) return null
+    const drafts = {}
+    for (const [k, v] of Object.entries(j.drafts || {})) if (typeof v === 'string') drafts[k] = v
+    const f = j.focus && typeof j.focus.key === 'string' ? { key: j.focus.key, a: Number(j.focus.a) || 0, b: Number(j.focus.b) || 0 } : null
+    return { drafts, focus: f }
+  } catch { return null }
+}
+
+// ------------------------------------------------------------ the bar (DOM)
+
+// mountUpdateBar({ health, risks, carry, icon }) -> { check(h), shown() }
+// health(): a fresh health answer (the board's refreshHealth); risks(): the
+// reloadRisks input; carry(): { drafts, focus } to hand over.
+export function mountUpdateBar({ health, risks = () => ({}), carry = () => ({}), icon = () => '', pollMs } = {}) {
+  const every = Number(pollMs || (typeof window !== 'undefined' && window.LEFTOFF_UPDATE_POLL_MS)) || POLL_MS
+  let loaded = pageBuild()
+  const st = { showing: false, dismissed: null, confirming: false, reloading: false }
+  let lastCheckAt = Date.now()
+  let el = null
+
+  function build() {
+    el = document.createElement('div')
+    el.className = 'updatebar'
+    el.id = 'updateBar'
+    el.setAttribute('role', 'status')
+    el.setAttribute('aria-live', 'polite')
+    el.hidden = true
+    el.innerHTML = '<span class="ub-icon" aria-hidden="true">' + icon('refresh-cw') + '</span><span class="ub-text">Leftoff updated</span>' +
+      '<button type="button" class="ub-go">Refresh</button><button type="button" class="ub-x" aria-label="Dismiss" title="Not now">' + icon('x') + '</button>'
+    document.body.appendChild(el)
+    // a click doesn't pull focus out of the box you're typing in
+    for (const b of el.querySelectorAll('button')) b.addEventListener('mousedown', (ev) => ev.preventDefault())
+    el.querySelector('.ub-go').addEventListener('click', onGo)
+    el.querySelector('.ub-x').addEventListener('click', onDismiss)
+  }
+  function paint() {
+    if (!el) build()
+    const was = !el.hidden
+    el.hidden = !st.showing
+    el.classList.toggle('confirm', st.confirming)
+    const text = el.querySelector('.ub-text'), go = el.querySelector('.ub-go')
+    if (st.confirming) { text.textContent = st.confirming; go.textContent = 'Refresh anyway' } else { text.textContent = 'Leftoff updated'; go.textContent = st.reloading ? 'Refreshing…' : 'Refresh' }
+    go.disabled = !!st.reloading
+    if (st.showing && !was) requestAnimationFrame(() => el && el.classList.add('in'))
+    if (!st.showing) el.classList.remove('in')
+    document.documentElement.classList.toggle('has-updatebar', st.showing)
+  }
+
+  // Every health answer the board gets comes through here (its own poll, the
+  // event stream reopening after a restart, the page coming back).
+  function check(h) {
+    lastCheckAt = Date.now()
+    if (h && !loaded && typeof h.ui === 'string' && h.ui) loaded = { build: h.ui, machine: h.machine || '' } // a page with no stamp: its first answer is its build
+    const next = shouldShow(loaded, h || null, st)
+    if (next !== st.showing) { st.showing = next; st.confirming = false; paint() }
+  }
+
+  function onDismiss() {
+    const h = lastHealth
+    st.dismissed = (h && h.ui) || st.dismissed || 'any'
+    st.showing = false; st.confirming = false
+    paint()
+  }
+  let lastHealth = null
+  function onHealth(h) { lastHealth = h; check(h) }
+
+  async function onGo() {
+    if (st.reloading) return
+    const words = reloadRisks(risks() || {})
+    if (words.length && !st.confirming) { st.confirming = words.join(' · '); paint(); return }
+    st.reloading = true; st.confirming = false; paint()
+    try { sessionStorage.setItem(CARRY_KEY, packCarry(carry() || {})) } catch {}
+    // A new service worker, if its file changed, before the page comes back.
+    try {
+      const reg = 'serviceWorker' in navigator && await navigator.serviceWorker.getRegistration()
+      if (reg) await Promise.race([reg.update(), new Promise((r) => setTimeout(r, 3000))])
+    } catch {}
+    location.reload()
+  }
+
+  // A health check at least every `every` ms while visible, and at once when
+  // the page comes back (the Home Screen app resumes, a bfcache restore).
+  const due = () => document.visibilityState !== 'hidden' && Date.now() - lastCheckAt >= every - 250
+  const tick = () => { if (due()) { lastCheckAt = Date.now(); Promise.resolve(health()).catch(() => {}) } }
+  setInterval(tick, Math.min(every, 15000))
+  const wake = (ev) => {
+    if (document.visibilityState === 'hidden') return
+    if (ev && ev.type === 'pageshow' && !ev.persisted) return
+    if (Date.now() - lastCheckAt < 3000) return
+    lastCheckAt = Date.now(); Promise.resolve(health()).catch(() => {})
+  }
+  document.addEventListener('visibilitychange', wake)
+  window.addEventListener('pageshow', wake)
+  window.addEventListener('online', wake)
+
+  return { check: onHealth, shown: () => st.showing, loaded: () => loaded }
+}
+
+// Right after a reload from the bar: the drafts it carried (once).
+export function takeCarry(storage = typeof sessionStorage !== 'undefined' ? sessionStorage : null) {
+  if (!storage) return null
+  let raw = null
+  try { raw = storage.getItem(CARRY_KEY); if (raw != null) storage.removeItem(CARRY_KEY) } catch { return null }
+  return raw ? unpackCarry(raw) : null
+}