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

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)
+  })())
+})

package/ui/tabs.js

@@ -0,0 +1,216 @@
+// Tabs for sessions (0.9.8). The board is always the first tab and can't be
+// closed. Clicking a session opens it in ONE preview tab (its title in italics)
+// that the next click replaces, VS Code style; it stays open (permanent, with a
+// close ×) once you send a Live message in it, type there, choose Keep open or
+// double-click the tab, and a middle-click or ⌘/Ctrl-click opens a session
+// straight as permanent. The open set and its order are kept per device
+// (localStorage) and survive a reload; a deep link opens as the preview.
+//
+// The layout follows the window's WIDTH, never the device: under 700px no strip
+// (an Open row on the board, swipe or ‹ › between open sessions on a session
+// page); 700–1099px the strip with the rail as icons; from 1100px the full rail
+// and the strip. Pure functions over a plain model; app.js wires them.
+
+export const TABS_KEY = 'cp.tabs'
+export const MAX_TABS = 40
+export const NARROW_MAX = 699.98 // < 700: phones, a foldable closed
+export const WIDE_MIN = 1100 // ≥ 1100: iPad landscape, a Mac
+
+// 'narrow' | 'medium' | 'wide' for a CSS width
+export function layoutFor(width) {
+  const w = Number(width) || 0
+  return w < 700 ? 'narrow' : w < WIDE_MIN ? 'medium' : 'wide'
+}
+
+const clean = (e) => ({ id: String(e.id), title: typeof e.title === 'string' ? e.title.slice(0, 200) : '', preview: !!e.preview, ...(typeof e.hash === 'string' && e.hash.startsWith('#/s/') ? { hash: e.hash } : {}) })
+
+// Any stored or hand-made value → a valid model: string ids, no repeats, at most
+// one preview (the last one wins), at most MAX_TABS.
+export function normalize(raw) {
+  const list = raw && Array.isArray(raw.tabs) ? raw.tabs : []
+  const seen = new Set(), tabs = []
+  for (const e of list) {
+    if (!e || e.id == null || e.id === '' || seen.has(String(e.id))) continue
+    seen.add(String(e.id)); tabs.push(clean(e))
+  }
+  let pi = -1
+  tabs.forEach((t, i) => { if (t.preview) { if (pi >= 0) tabs[pi].preview = false; pi = i } })
+  return { tabs: tabs.slice(-MAX_TABS) }
+}
+export function emptyTabs() { return { tabs: [] } }
+export function parseStored(text) {
+  try { return normalize(JSON.parse(text || 'null')) } catch { return emptyTabs() }
+}
+export function serialize(m) { return JSON.stringify({ v: 1, tabs: normalize(m).tabs }) }
+
+export const indexOf = (m, id) => m.tabs.findIndex((t) => t.id === String(id))
+export const isOpen = (m, id) => indexOf(m, id) >= 0
+export const previewOf = (m) => m.tabs.find((t) => t.preview) || null
+
+// Open a session. Already open: it just gets focus (permanent promotes a preview).
+// Not open: as the preview, replacing the old preview in place; or, permanent,
+// appended at the end.
+export function openTab(m, id, { permanent = false, title, hash } = {}) {
+  const tabs = m.tabs.map((t) => ({ ...t }))
+  id = String(id)
+  const i = tabs.findIndex((t) => t.id === id)
+  const extra = { ...(title ? { title: String(title).slice(0, 200) } : {}), ...(hash && hash.startsWith('#/s/') ? { hash } : {}) }
+  if (i >= 0) {
+    Object.assign(tabs[i], extra)
+    if (permanent) tabs[i].preview = false
+    return { tabs }
+  }
+  const e = { id, title: '', preview: !permanent, ...extra }
+  const pi = tabs.findIndex((t) => t.preview)
+  if (!permanent && pi >= 0) tabs[pi] = e
+  else tabs.push(e)
+  // too many: the oldest permanent tab that isn't this one goes
+  while (tabs.length > MAX_TABS) { const k = tabs.findIndex((t) => t.id !== id); tabs.splice(k, 1) }
+  return { tabs }
+}
+
+// The preview becomes permanent (a Live message, typing there, Keep open, a double-click).
+export function promote(m, id) {
+  const i = indexOf(m, id)
+  if (i < 0 || !m.tabs[i].preview) return m
+  return { tabs: m.tabs.map((t, k) => (k === i ? { ...t, preview: false } : t)) }
+}
+
+// Keep a tab's title (shown while its session isn't loaded) and where in it you were.
+export function remember(m, id, { title, hash } = {}) {
+  const i = indexOf(m, id)
+  if (i < 0) return m
+  const t = m.tabs[i]
+  const nt = { ...t, ...(title && title !== t.title ? { title: String(title).slice(0, 200) } : {}), ...(hash && hash.startsWith('#/s/') && hash !== t.hash ? { hash } : {}) }
+  if (nt.title === t.title && nt.hash === t.hash) return m
+  return { tabs: m.tabs.map((x, k) => (k === i ? nt : x)) }
+}
+
+// Close a tab. When it was the one you're on, `next` is where to go: the
+// neighbour on the right, else the one on the left, else the board (null).
+export function closeTab(m, id, activeId = null) {
+  const i = indexOf(m, id)
+  if (i < 0) return { model: m, next: activeId == null ? null : String(activeId) }
+  const tabs = m.tabs.filter((_, k) => k !== i)
+  let next = activeId == null ? null : String(activeId)
+  if (String(id) === next) next = tabs.length ? (tabs[i] || tabs[i - 1]).id : null
+  return { model: { tabs }, next }
+}
+
+// Move a tab to another position (drag on the strip).
+export function moveTab(m, id, to) {
+  const i = indexOf(m, id)
+  if (i < 0) return m
+  const tabs = m.tabs.slice()
+  const [t] = tabs.splice(i, 1)
+  tabs.splice(Math.max(0, Math.min(tabs.length, to)), 0, t)
+  return { tabs }
+}
+
+// Where a session sits among the open ones (the phone's "2 of 4", swipe and ‹ ›).
+export function neighbours(m, id) {
+  const i = indexOf(m, id)
+  if (i < 0) return { index: 0, count: m.tabs.length, prev: null, next: null }
+  return { index: i + 1, count: m.tabs.length, prev: i > 0 ? m.tabs[i - 1].id : null, next: i < m.tabs.length - 1 ? m.tabs[i + 1].id : null }
+}
+
+// The session id a hash opens (#/s/<id>, #/s/<id>/live, #/s/<id>?hit=…), or null.
+export function sessionOfHash(hash) {
+  const h = String(hash || '').replace(/^#\/?/, '').split('?')[0]
+  const p = h.split('/').filter(Boolean)
+  if (p[0] !== 's' || !p[1]) return null
+  try { return decodeURIComponent(p[1]) } catch { return p[1] }
+}
+// Where a tab goes back to: its own page, keeping /live (not a search hit).
+export function tabHref(t) {
+  const base = '#/s/' + encodeURIComponent(t.id)
+  if (t.hash && sessionOfHash(t.hash) === t.id && t.hash.split('?')[0].endsWith('/live')) return base + '/live'
+  return base
+}
+export function keepHash(hash) { return String(hash || '').split('?')[0] }
+
+// What a tab shows for its session: the title, the Live pulse while Claude is
+// working (the Live chip's own signal), a dot when it needs you (the same as
+// Needs you). `session` may be missing (not loaded yet): the kept title, no marks.
+export function tabView(t, session, { title, working } = {}) {
+  const s = session || null
+  return {
+    id: t.id, preview: !!t.preview, href: tabHref(t),
+    title: (s && title ? title(s) : '') || t.title || 'Session',
+    working: !!(s && working && working(s)),
+    needs: !!(s && s.needsYou && !s.archived),
+  }
+}
+
+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 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>'
+const NEXT = '<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 18 6-6-6-6"/></svg>'
+
+// The marks after a title: a pulsing Live dot, or the red needs-you dot (both when both).
+function marks(v, esc) {
+  return (v.working ? '<span class="tab-live" title="Claude is working"><span class="lo-vh">, Claude is working</span></span>' : '') +
+    (v.needs ? '<span class="tab-need" title="Needs you"><span class="lo-vh">, needs you</span></span>' : '')
+}
+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).
+// 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>'
+  const tabs = views.map((v) => {
+    const on = v.id === activeId
+    return '<div class="tab-cell' + (on ? ' on' : '') + (v.preview ? ' preview' : '') + '" data-tab-id="' + esc(v.id) + '">' +
+      '<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>') +
+      '</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>'
+}
+
+// The menu behind ⋯ (picker.js's action menu): every open session, in order.
+export function allTabsItems(views, activeId) {
+  return [{ label: 'Board', attrs: { 'data-tab-go': '#/' }, on: activeId == null }].concat(views.map((v) => ({
+    label: v.title + (v.preview ? ' (preview)' : ''), sub: [v.working ? 'Claude is working' : '', v.needs ? 'Needs you' : ''].filter(Boolean).join(' · ') || undefined,
+    on: v.id === activeId, attrs: { 'data-tab-go': v.href },
+  })))
+}
+
+// The phone's Open row on the board: the same order, the same marks, the preview in italics.
+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>'
+}
+
+// A session page on a phone: "2 of 4" with ‹ › (44px) for people who don't swipe,
+// and Keep open on a preview.
+export function pagerHtml(m, id, views, esc) {
+  const n = neighbours(m, id)
+  if (!n.index || n.count < 2) {
+    const v = views.find((x) => x.id === String(id))
+    return v && v.preview ? '<div class="pager-in"><span class="pager-n faint">Preview</span><button type="button" class="btn pager-keep" data-tab-keep="' + esc(v.id) + '">Keep open</button></div>' : ''
+  }
+  const byId = (x) => views.find((v) => v.id === x)
+  const v = byId(String(id))
+  const btn = (to, dir) => {
+    const t = to ? byId(to) : null
+    return t ? '<a class="pager-b pager-' + dir + '" href="' + esc(t.href) + '" data-tab="' + esc(t.id) + '" data-pager="' + dir + '" aria-label="' + esc((dir === 'prev' ? 'Previous: ' : 'Next: ') + t.title) + '" title="' + esc(t.title) + '">' + (dir === 'prev' ? PREV : NEXT) + '</a>'
+      : '<span class="pager-b pager-' + dir + ' off" aria-hidden="true">' + (dir === 'prev' ? PREV : NEXT) + '</span>'
+  }
+  return '<div class="pager-in">' + btn(n.prev, 'prev') + '<span class="pager-n" aria-live="polite">' + n.index + ' of ' + n.count + '<span class="lo-vh"> open sessions</span></span>' +
+    (v && v.preview ? '<button type="button" class="btn pager-keep" data-tab-keep="' + esc(v.id) + '">Keep open</button>' : '') + btn(n.next, 'next') + '</div>'
+}
+
+// A horizontal swipe on a phone's session page: which way, or null. Mostly
+// sideways (twice as far across as down), at least 60px, quick (under 700ms).
+export function swipeDir(dx, dy, ms) {
+  if (Math.abs(dx) < 60 || Math.abs(dx) < 2 * Math.abs(dy) || ms > 700) return null
+  return dx < 0 ? 'next' : 'prev'
+}