@leftoff/cli 0.9.8-beta.2 → 0.9.8-beta.20

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/relay-client.js

@@ -44,7 +44,7 @@ export async function forgetDeviceKey() {
 
 // ------------------------------------------------------------ state
 
-const relay = { user: RELAY_USER, device: null, key: null, status: null, mac: null, ready: null, latencyMs: null }
+const relay = { user: RELAY_USER, device: null, key: null, status: null, mac: null, ready: null, latencyMs: null, owners: new Map() }
 // ui/direct.js loads only on the board itself (never on pair.html, which the
 // relay serves before a browser is paired and where this file is imported too).
 let route = null, directOrRelay = null
@@ -140,6 +140,39 @@ function watchDirect() {
   document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') again(true) })
 }
 
+// ------------------------------------------------------------ auto-switch host (0.9.8)
+// On your leftoff.dev board, a session that lives on another Mac loads its own
+// data (Live, its transcript, Find lists, files...) straight from that Mac
+// through the relay, instead of from the Mac serving the board. The board says
+// which Mac each session lives on (leftoffRelay.owner); these decide where one
+// call goes. Pure and exported, so they are unit-tested.
+
+// /v1/sessions/<id>/<anything> -> <id>; the record itself (/v1/sessions/<id>) stays on
+// the board's Mac (it's the synced copy the board lists), and so does everything else.
+const SESSION_SUB = /^\/v1\/sessions\/([^/?#]+)\/[^?#]+$/
+export function sessionOfPath(pathname) {
+  const m = SESSION_SUB.exec(String(pathname || ''))
+  if (!m) return null
+  try { return decodeURIComponent(m[1]) } catch { return null }
+}
+
+// Which Mac a call should go to, or null for the board's own Mac.
+// owners: Map(sessionId -> machine) the board filled in; current: the Mac serving the board;
+// online: the Macs the relay says are connected now.
+export function ownerRoute(pathname, owners, { current = null, online = [] } = {}) {
+  const id = sessionOfPath(pathname)
+  if (!id || !owners || typeof owners.get !== 'function') return null
+  const m = owners.get(id)
+  if (!m || m === current) return null
+  return online.includes(m) ? m : null
+}
+
+// A failed hop to the owner falls back to the board's Mac (which reaches the
+// owner over the peer link, or says plainly that it's offline).
+export function fallBack({ status = 0, code = '' } = {}) {
+  return status === 0 || status === 401 || status === 403 && code === 'unknown_device' || status === 502 || status === 503 || status === 504 || code === 'mac_offline' || code === 'timeout'
+}
+
 // ------------------------------------------------------------ the tunnel
 
 async function tunnel(url, init = {}, retried = false) {
@@ -151,6 +184,9 @@ async function tunnel(url, init = {}, retried = false) {
   const hdrs = new Headers(init.headers || {})
   if (hdrs.get('content-type')) h['content-type'] = hdrs.get('content-type')
   const body = { m: method, p: url.pathname + url.search, b, h }
+  // 0.9.8: a session that lives on another Mac answers for itself (ui/owner-route.js)
+  const owner = ownerRoute(url.pathname, relay.owners, { current: relay.mac, online: onlineMacs() })
+  if (owner) { const r = await viaOwner(owner, body, init).catch(() => null); if (r) return r }
   if (!onDirect()) return viaRelay(body, init, retried)
   return directOrRelay({
     route,
@@ -164,6 +200,22 @@ async function tunnel(url, init = {}, retried = false) {
   })
 }
 
+function onlineMacs() { return ((relay.status && relay.status.macs) || []).filter((m) => m.online).map((m) => m.machine) }
+// Straight to the session's own Mac through the relay; null sends the call to the
+// board's Mac instead (the owner went away, or doesn't know this browser yet).
+async function viaOwner(machine, body, init) {
+  const env = await sealRequest(relay.key, { device: relay.device, machine, body })
+  const res = await realFetch('/_relay/api', { method: 'POST', credentials: 'same-origin', headers: { 'content-type': 'application/json' }, body: JSON.stringify(env), signal: init.signal, cache: 'no-store' })
+  if (res.status !== 200) {
+    const j = await res.json().catch(() => ({}))
+    if (j.code === 'mac_offline') refreshStatus().catch(() => {})
+    return null
+  }
+  const out = toResponse(await openResponse(relay.key, env, await res.json()))
+  if (out.status === 401 || out.status === 403) { const j = await out.clone().json().catch(() => ({})); if (fallBack({ status: out.status, code: j.code || '' }) || /device/.test(j.code || '')) return null }
+  return out
+}
+
 async function viaRelay(body, init, retried) {
   const gone = relay.mac
   const env = await sealRequest(relay.key, { device: relay.device, machine: gone, body })
@@ -196,6 +248,7 @@ function patchedFetch(input, init) {
 }
 
 // EventSource('/v1/stream') -> long-polls of GET /v1/events through the tunnel.
+export const POLL_WAIT_MS = 20000, POLL_MARGIN_MS = 12000
 class RelayEventSource extends EventTarget {
   constructor(url) {
     super()
@@ -207,11 +260,20 @@ class RelayEventSource extends EventTarget {
     let fails = 0
     while (this.readyState !== 2) {
       try {
-        this.ctrl = new AbortController()
-        const res = await patchedFetch('/v1/events?after=' + (this.seq == null ? -1 : this.seq) + '&ms=20000', { signal: this.ctrl.signal })
-        if (!res.ok) throw new Error('HTTP ' + res.status)
-        const j = await res.json()
+        // 0.9.8: a poll that outlives its wait plus a margin is dead (iOS
+        // suspended the page mid-request, or the relay dropped it silently):
+        // abort it and poll again instead of waiting forever.
+        const ctrl = this.ctrl = new AbortController()
+        const timer = setTimeout(() => ctrl.abort(), POLL_WAIT_MS + POLL_MARGIN_MS)
+        let j
+        try {
+          const res = await patchedFetch('/v1/events?after=' + (this.seq == null ? -1 : this.seq) + '&ms=' + POLL_WAIT_MS, { signal: ctrl.signal })
+          if (!res.ok) throw new Error('HTTP ' + res.status)
+          j = await res.json()
+        } finally { clearTimeout(timer) }
+        if (this.readyState === 2) return
         if (this.readyState === 0) { this.readyState = 1; if (this.onopen) this.onopen(new Event('open')) }
+        this.dispatchEvent(new MessageEvent('ping', { data: '{}' })) // a poll that answered is the stream's heartbeat
         const first = this.seq == null
         this.seq = j.seq
         if (!first) for (const e of j.events || []) {
@@ -272,6 +334,9 @@ export const leftoffRelay = {
   get route() { return onDirect() ? 'direct' : 'relay' },
   get directLatencyMs() { return route ? route.latencyMs : null },
   status: () => refreshStatus(),
+  // 0.9.8: which Mac a session lives on (null: the board's own), so its calls go there
+  owner(id, machine) { if (!id) return; if (machine) relay.owners.set(String(id), String(machine)); else relay.owners.delete(String(id)) },
+  ownerOf(id) { const m = relay.owners.get(String(id)); return m && m !== relay.mac && onlineMacs().includes(m) ? m : null },
   // Switch Macs: the board reloads from the other one.
   pick(mac) { remember(mac); cookieMac(mac); location.reload() },
   // This browser revoked itself (0.6.6).

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'
+}

package/ui/tour.css

@@ -0,0 +1,63 @@
+/* The product tour (0.9.8, ui/tour.js). Loaded only when the tour starts. */
+.tour { position: fixed; inset: 0; z-index: 900; pointer-events: auto; touch-action: none; }
+.tour-dim { position: absolute; inset: 0; background: rgba(3, 5, 10, .7); animation: tour-in .18s ease-out; }
+.tour-dim[hidden], .tour-hole[hidden] { display: none; }
+/* The spotlight: a clear box whose huge shadow dims everything around it. */
+.tour-hole { position: fixed; border-radius: 12px; box-shadow: 0 0 0 2px var(--accent), 0 0 0 200vmax rgba(3, 5, 10, .7); pointer-events: none;
+  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
+[data-theme="light"] .tour-dim { background: rgba(15, 18, 28, .6); }
+[data-theme="light"] .tour-hole { box-shadow: 0 0 0 2px var(--accent), 0 0 0 200vmax rgba(15, 18, 28, .6); }
+.tour-card { position: fixed; left: 0; top: 0; width: 340px; max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)); box-sizing: border-box;
+  background: var(--card2); color: var(--text); border: 1px solid var(--line-strong); border-radius: 16px; padding: 16px 16px 10px;
+  box-shadow: 0 18px 50px rgba(0, 0, 0, .45); transition: left .25s ease, top .25s ease; outline: none; }
+[data-theme="light"] .tour-card { background: var(--card); box-shadow: 0 18px 50px rgba(22, 26, 36, .28); }
+.tour-count { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .2px; }
+.tour-card .tour-title { font-size: 17px; font-weight: 650; margin: 2px 0 6px; line-height: 1.25; color: var(--text); text-transform: none; letter-spacing: normal; }
+.tour-body { font-size: 14px; line-height: 1.45; color: var(--text2); margin: 0 0 10px; }
+.tour-nav { display: flex; align-items: center; gap: 8px; }
+.tour-grow { flex: 1; }
+.tour-nav .btn { min-height: 44px; box-sizing: border-box; text-decoration: none; min-width: 44px; padding: 6px 14px; font-size: 14px; justify-content: center; }
+.tour-nav .tour-skip { color: var(--muted); padding: 6px 4px; background: none; border: 0; box-shadow: none; }
+.tour-nav .tour-skip:hover { color: var(--text); background: none; }
+.tour-still .tour-hole, .tour-still .tour-card, .tour-still .tour-dim { transition: none; animation: none; }
+@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-card, .tour-dim { transition: none; animation: none; } }
+@keyframes tour-in { from { opacity: 0; } to { opacity: 1; } }
+/* Read by tour.js for the safe areas. */
+.tour-safe { position: fixed; inset: 0; visibility: hidden; pointer-events: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
+@media (max-width: 699.98px) { .tour-card { width: 100vw; } }
+
+/* Small drawings for a part that isn't on screen. */
+.tour-illus { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 0 0 12px; font-size: 12.5px; color: var(--text2); display: grid; gap: 8px; }
+.tour-illus .ti-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.tour-illus .ti-faint { color: var(--muted); }
+.tour-illus .ti-pill { border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; background: var(--tint-cyan); color: var(--cyan); margin-left: auto; }
+.tour-illus .ti-pill.ti-needs { background: var(--tint-yellow); color: var(--yellow); margin-left: 0; }
+.tour-illus .ti-btn { border: 1px solid var(--btn-line); background: var(--btn-bg); border-radius: 7px; padding: 3px 9px; font-size: 12px; }
+.tour-illus .ti-btn.ti-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
+.tour-illus .ti-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
+.tour-illus .ti-card, .tour-illus .ti-need { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 6px; }
+.tour-illus .ti-need { border-color: var(--yellow); }
+.tour-illus .ti-need.ti-mini { padding: 8px; }
+.tour-illus .ti-cp { display: grid; gap: 2px; border-left: 2px solid var(--line-strong); padding-left: 8px; }
+.tour-illus .ti-cp i { font-style: normal; color: var(--muted); }
+.tour-illus .ti-live { display: grid; gap: 6px; }
+.tour-illus .ti-msg { max-width: 80%; border-radius: 12px; padding: 5px 10px; }
+.tour-illus .ti-you { justify-self: end; background: var(--tint-accent); color: var(--text); }
+.tour-illus .ti-claude { justify-self: start; background: var(--card); border: 1px solid var(--line); }
+.tour-illus .ti-composer { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 18px; padding: 4px 4px 4px 10px; background: var(--field); }
+.tour-illus .ti-clip { display: inline-flex; width: 16px; height: 16px; color: var(--muted); }
+.tour-illus .ti-clip svg { width: 16px; height: 16px; }
+.tour-illus .ti-input { flex: 1; color: var(--faint); }
+.tour-illus .ti-send { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
+.tour-illus .ti-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
+.tour-illus .ti-tab { padding: 5px 10px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--card); color: var(--muted); white-space: nowrap; }
+.tour-illus .ti-tab.ti-on { color: var(--text); background: var(--card2); font-weight: 600; }
+.tour-illus .ti-phone { width: 150px; margin: 0 auto; border: 2px solid var(--line-strong); border-radius: 22px; padding: 10px 8px 14px; display: grid; gap: 8px; background: var(--card); }
+.tour-illus .ti-url { font-size: 10.5px; text-align: center; background: var(--bg2); border-radius: 8px; padding: 3px 6px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tour-illus .ti-note { display: grid; gap: 1px; background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; font-size: 11px; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
+.tour-illus .ti-note span { color: var(--muted); }
+.tour-illus .ti-lines { display: grid; gap: 5px; }
+.tour-illus .ti-lines span { height: 7px; border-radius: 4px; background: var(--line); }
+.tour-illus .ti-lines span:nth-child(2) { width: 70%; }
+.tour-illus .ti-lines span:nth-child(3) { width: 45%; }
+@media (max-height: 700px) { .tour-illus { padding: 8px; gap: 6px; } .tour-illus .ti-phone { width: 130px; } }