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

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

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.9.8-beta.4",
+  "version": "0.9.8-beta.6",
   "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/core.js

@@ -299,9 +299,19 @@ export function resumeCommand(session) {
   const id = session.id || session.sessionId
   const cwd = resumeDir(session)
   const wt = resumeWorktreeName(session)
-  return (cwd ? 'cd ' + shArg(cwd) + ' && ' : '') + (isCodex(session) ? codexInvocation(id) : claudeInvocation(session, [...(wt ? ['--worktree', wt] : []), '--resume', id]))
+  const args = [...(wt ? ['--worktree', wt] : []), '--resume', id]
+  return (cwd ? 'cd ' + shArg(cwd) + ' && ' : '') + (isCodex(session) ? codexInvocation(id) : wasLiveSession(session) ? liveInvocation(args) : claudeInvocation(session, args))
 }
 
+// 0.9.8: a session started with `leftoff live` (it had Leftoff's Live channel)
+// resumes as one, `leftoff live -- --resume <id>`, so it shows up Live again.
+// Codex and Ollama sessions resume their own way (Live is Claude Code only).
+export function wasLiveSession(session) {
+  if (!session || isCodex(session) || (session.backend && session.backend.kind === 'ollama')) return false
+  return !!(session.wasLive || (session.liveLink && session.liveLink.on))
+}
+export function liveInvocation(args = []) { return 'leftoff live --' + (args.length ? ' ' + args.map(shArg).join(' ') : '') }
+
 // 0.8.0: a Codex session (its rollout under ~/.codex/sessions) resumes with `codex resume <id>`.
 export function isCodex(session) { return !!session && session.codingAgent === 'codex' }
 export function codexInvocation(id) { return 'codex resume ' + shArg(id) }
@@ -547,7 +557,7 @@ const SESSION_ORDER = ['id', 'title', 'title_source', 'machine', 'cwd', 'repo',
 export const SESSION_EXTRA = ['inTurn', 'needsInput', 'backgroundTasks', 'turnsSinceCheckpoint', 'dormantStretch',
   'finalCheckpointDone', 'firstPrompt', 'lastPreview', 'lastNotification', 'lastEventAt', 'statusChanges', 'folder',
   'pid', 'tty', 'pidStartedAt', 'pidSource', 'term', 'closedAt', 'answers', 'lastNotificationMessage', 'needsInputAt', 'question', 'questionAt',
-  'startSource', 'historyTurns', 'healedAt', 'healedVia', 'archivedReason', 'backend', 'prLinks', 'prUnlinked', 'todos', 'files', 'startRepo', 'editedRepos', 'parked', 'nonInteractive', 'transcriptCwd', 'doubtedCheckpoints', 'liveLink', 'transcriptTurns']
+  'startSource', 'historyTurns', 'healedAt', 'healedVia', 'archivedReason', 'backend', 'prLinks', 'prUnlinked', 'todos', 'files', 'startRepo', 'editedRepos', 'parked', 'nonInteractive', 'transcriptCwd', 'doubtedCheckpoints', 'liveLink', 'transcriptTurns', 'wasLive']
 
 export const SESSION_FIELDS = ['id', 'title', 'titleSource', 'machine', 'cwd', 'repo', 'transcriptPath', 'model', 'surface', 'capture',
   'status', 'startedAt', 'lastActivityAt', 'lastHeartbeatAt', 'endedAt', 'endReason', 'turns', 'lastCheckpointId',

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

@@ -2038,6 +2038,13 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 
 /* 0.9.8 Live link: the Live badge, and the session page's message box with its delivery states */
 .pill.live-pill { color: var(--green); background: var(--tint-green); font-weight: 600; } /* not .live: that class is the open/closed dot */
+/* Its dot pulses while Claude is running a turn (a soft ring growing out of it); idle, it stays still. The text doesn't blink. */
+.pill.live-pill.working::before { animation: live-pulse 1.6s ease-in-out infinite; }
+@keyframes live-pulse {
+  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
+  80%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 0%, transparent); }
+}
+@media (prefers-reduced-motion: reduce) { .pill.live-pill.working::before, .s-active::before { animation: none; } }
 .live-box { margin: 16px 0 18px; border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line)); background: linear-gradient(180deg, var(--tint-green), transparent 70%), var(--card); border-radius: var(--radius); padding: 12px 14px 14px; }
 .live-box.off { border-color: var(--line); background: var(--card); }
 .live-box.off p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
@@ -2114,6 +2121,9 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 .live-jump-n { font-weight: 500; color: var(--muted); }
 .live-empty { margin: 6px 0 10px; font-size: 13px; }
 .live-err { color: var(--red); font-size: 13px; }
+/* 0.9.8: another Mac's session whose Mac is offline */
+.owner-off { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--text); font-size: 14px; line-height: 1.45; }
+.owner-off .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--muted); }
 .live-row .live-text { min-height: 44px; }
 /* Chat on a live card: straight to the Live box */
 .btn.chat-btn { position: relative; color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--btn-line)); font-weight: 600; }

package/ui/app.js

@@ -19,10 +19,12 @@ import { cardPrsHtml, sessionPrsSection, prsPageHtml, prsBodyHtml, prRowHtml, pr
 import { wantsSetupBanner, setupCandidate, localLeftoffAnswers, thisOneSuffix, isPhoneUa } from './viewer.js'
 import { restoreAccess, hintHtml, restoreWhen, askLine } from './restore-gate.js'
 import { defaultEmoji, PICKER_SET, isEmoji } from './machines.js'
-import { sessionTitle, titleIsWhere, titleHtml, cardPills, foldsAsEmpty, threadHtml, earlierHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom } from './live-view.js' // 0.9.8 Live link polish
+import { sessionTitle, titleIsWhere, titleHtml, cardPills, foldsAsEmpty, threadHtml, earlierHtml, createLiveKeeper, liveHref, parseLiveRoute, hasUnread, scrollDecision, atBottom, jumpView, liveBadgeHtml, lockPulses } from './live-view.js' // 0.9.8 Live link polish
 import { statusView, elapsedText } from './live-status.js'
 import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref, docMenuItems, docFileName, renderDoc } from './handoffs.js'
 const $app = document.getElementById('app')
+// 0.9.8: the pulsing dots (Live while Claude works, active, a blocking ask) keep their beat through the board's redraws
+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: {} }
 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))]
@@ -113,12 +115,14 @@ async function copy(text) {
 // 0.8.7: the copy icon says it worked for a moment (a check, "Copied"), then goes back.
 function copiedMark(btn) {
   clearTimeout(btn._copied)
+  const tip = btn._tip || (btn._tip = btn.title || 'Copy resume command')
   btn.classList.add('copied'); btn.innerHTML = icon('check'); btn.setAttribute('aria-label', 'Copied'); btn.title = 'Copied'
-  btn._copied = setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = icon('copy'); btn.setAttribute('aria-label', 'Copy resume command'); btn.title = 'Copy resume command' }, 1500)
+  btn._copied = setTimeout(() => { btn.classList.remove('copied'); btn.innerHTML = icon('copy'); btn.setAttribute('aria-label', 'Copy resume command'); btn.title = tip }, 1500)
 }
 const pill = (status) => '<span class="pill s-' + esc(status) + '">' + esc(LABEL[status] || status) + '</span>'
 // 0.9.8 Live link: the session's channel is listening (send it prompts from here)
-const liveBadge = (s) => (cardPills(s).live ? ' <span class="pill live-pill" title="Live link: send this session messages from the board or your phone">Live</span>' : '')
+// It pulses while Claude is running a turn (liveWorking), steady when idle; lockPulses keeps redraws from restarting it.
+const liveBadge = (s) => liveBadgeHtml(s)
 // The status pill beside it: a live session that is only waiting shows just Live (never "dormant").
 const statusPill = (s) => { const st = cardPills(s).status; return st ? pill(st) : '' }
 
@@ -443,8 +447,12 @@ function agentCard(s) {
 // closed), a small copy icon for the resume command, and "⋯" for the rest. The
 // ⋯ menu's items ride in the card as an inert <template> (real buttons with the
 // same data-action as before), so the one click handler below runs them unchanged.
+// What Resume runs: codex resume, claude --resume, or for a Live session (0.9.8)
+// leftoff live -- --resume, so it comes back Live.
+function resumeVerb(s) { return s.codingAgent === 'codex' ? 'codex resume' : s.resumeLive ? 'leftoff live -- --resume' : 'claude --resume' }
+function resumeTip(s, lead) { return lead + ': ' + resumeVerb(s) + (s.resumeLive ? ' (it comes back Live)' : '') }
 function copyResumeIcon(s) {
-  return '<button type="button" class="btn icon-btn copy-resume" data-action="resume" data-id="' + esc(s.id) + '" aria-label="Copy resume command" title="Copy resume command">' + icon('copy') + '</button>'
+  return '<button type="button" class="btn icon-btn copy-resume" data-action="resume" data-id="' + esc(s.id) + '" aria-label="Copy resume command" title="' + esc(resumeTip(s, 'Copy resume command')) + '">' + icon('copy') + '</button>'
 }
 // items: [{ action, label, icon, title, attrs }]
 // 0.9.2: an item may also be { note } (a plain line, no button) and carry a sub line.
@@ -932,10 +940,10 @@ function resumeButton(s, viewer = {}) {
   const busy = closedUi.busy.has(s.id)
   if (s.isLocal) {
     if (!viewer.ghostty) return ''
-    return '<button type="button" class="btn primary" data-action="resume-open" data-id="' + esc(s.id) + '"' + (busy ? ' disabled' : '') + ' title="Open it in a new Ghostty tab: ' + (s.codingAgent === 'codex' ? 'codex resume' : 'claude --resume') + '">' + icon('rotate-ccw') + (busy ? 'Opening…' : 'Resume') + '</button>'
+    return '<button type="button" class="btn primary" data-action="resume-open" data-id="' + esc(s.id) + '"' + (busy ? ' disabled' : '') + ' title="' + esc(resumeTip(s, 'Open it in a new Ghostty tab')) + '">' + icon('rotate-ccw') + (busy ? 'Opening…' : 'Resume') + '</button>'
   }
   if (!(s.peer && s.peer.ok)) return '' // that Mac can't be reached from here: Copy resume
-  return '<button type="button" class="btn primary" data-action="resume-open" data-id="' + esc(s.id) + '"' + (busy ? ' disabled' : '') + ' title="' + esc('Open it in a new Ghostty tab on ' + s.machine) + '">' + icon('rotate-ccw') + (busy ? 'Opening…' : 'Resume on ' + esc(s.machine)) + '</button>'
+  return '<button type="button" class="btn primary" data-action="resume-open" data-id="' + esc(s.id) + '"' + (busy ? ' disabled' : '') + ' title="' + esc(resumeTip(s, 'Open it in a new Ghostty tab on ' + s.machine)) + '">' + icon('rotate-ccw') + (busy ? 'Opening…' : 'Resume on ' + esc(s.machine)) + '</button>'
 }
 function closedCard(s, viewer) {
   const href = '#/s/' + encodeURIComponent(s.id)
@@ -1274,12 +1282,28 @@ async function viewAgentSession(s) {
   $app.innerHTML = banners() + html
 }
 
+// 0.9.8: another Mac's session whose Mac is offline says so plainly, once, near the top
+function ownerOffline(s) {
+  if (!s || s.isLocal !== false || s.agent || !s.machine) return false
+  const st = window.leftoffRelay && state.relayStatus
+  const x = st && (st.macs || []).find((y) => y.machine === s.machine)
+  if (x) return !x.online
+  return !!(s.peer && s.peer.code === 'unreachable')
+}
+function ownerOfflineNote(s) {
+  if (!ownerOffline(s)) return ''
+  const m = esc(s.machine), sn = staleNote(s.machine)
+  return '<p class="owner-off" role="status">' + icon('wifi-off') + '<span>This session lives on <b>' + m + '</b>, which is offline right now. You’re seeing what it last synced' + (sn ? ' (' + esc(sn) + ')' : '') + '. Live, its transcript and Find lists come back when ' + m + ' is.</span></p>'
+}
 async function viewSession(id) {
   if (String(id).startsWith('agent:')) return viewAgentSession(await api('GET', '/v1/sessions/' + encodeURIComponent(id)))
   const s = await api('GET', '/v1/sessions/' + encodeURIComponent(id))
   state.sessions = state.sessions.filter((x) => x.id !== s.id).concat([s])
+  // 0.9.8 auto-switch host: on leftoff.dev, another Mac's session loads its own data from that Mac
+  if (window.leftoffRelay && window.leftoffRelay.owner) window.leftoffRelay.owner(s.id, s.isLocal === false && !s.agent ? s.machine : null)
   const branch = s.repo && s.repo.branch
-  const [spv] = await Promise.all([api('GET', '/v1/spaces').catch(() => null), loadProjects()])
+  const [spv] = await Promise.all([api('GET', '/v1/spaces').catch(() => null), loadProjects(),
+    s.isLocal === false && window.leftoffRelay ? window.leftoffRelay.status().then((st) => { state.relayStatus = st }).catch(() => {}) : null])
   let html = '<a class="back" href="#/">← All sessions</a>'
   // 0.8.9: rename in place: tap the title or the pencil (this Mac's sessions; like /cp-name, your name wins over automatic ones)
   const canRename = reachOf(s) === 'local' || reachOf(s) === 'peer' // 0.9.2: another Mac's session renames through it
@@ -1287,7 +1311,8 @@ async function viewSession(id) {
     ? '<div class="title s-title" data-id="' + esc(s.id) + '"><h1><span class="s-title-text" role="button" tabindex="0" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" title="Rename">' + titleHtml(sessionTitle(s), esc) + '</span></h1><button type="button" class="icon rename-pen" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" aria-label="Rename" title="Rename">' + icon('pencil') + '</button></div>'
     : '<h1>' + titleHtml(sessionTitle(s), esc) + '</h1>') + '<div class="sub">' + statusPill(s) + liveBadge(s) + ' ' + spaceChip(s, { force: true }) + projChip(s) + wtChips(s) + (canProject(s) ? '<button type="button" class="chip proj-add" data-action="project-menu" data-key="' + esc(s.repoKey) + '" data-repo="' + esc(s.repoLabel || s.repoName || '') + '" title="' + esc(s.repoProject ? 'Move ' + (s.repoLabel || 'this repo') + ' to another project, or out of it' : 'Add ' + (s.repoLabel || 'this repo') + ' to a project') + '">' + (s.repoProject ? 'Change project' : '+ Project') + '</button>' : '') + ' &nbsp;' + esc(s.titleSource ? (s.titleSource === 'prompt' ? 'named from the first prompt' : s.titleSource + ' title') : '') + '</div></div>' +
     // 0.9.8: one line each, 44px, an icon and a short label; the group drops under the title as a whole when it doesn't fit beside it
-    '<div class="actions s-actions">' + goButton(s, { page: true }) + (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '') + '<a class="btn" href="#/timeline?session=' + encodeURIComponent(s.id) + '" title="Open in Timeline" aria-label="Open in Timeline">' + icon('history') + 'Timeline</a><button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '" title="Copy resume command">' + icon('copy') + 'Copy resume</button>' + (reachOf(s) === 'local' || reachOf(s) === 'peer' ? checkpointSplit(s) : reachOf(s) === 'away' ? '<span class="more-wrap">' + moreMenu(s, awayMenuItems(s), { project: false, title: s.title || 'This session' }) + '</span>' : '') + '</div></div>'
+    '<div class="actions s-actions">' + goButton(s, { page: true }) + (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '') + '<a class="btn" href="#/timeline?session=' + encodeURIComponent(s.id) + '" title="Open in Timeline" aria-label="Open in Timeline">' + icon('history') + 'Timeline</a><button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '" title="' + esc(resumeTip(s, 'Copy resume command')) + '">' + icon('copy') + 'Copy resume</button>' + (reachOf(s) === 'local' || reachOf(s) === 'peer' ? checkpointSplit(s) : reachOf(s) === 'away' ? '<span class="more-wrap">' + moreMenu(s, awayMenuItems(s), { project: false, title: s.title || 'This session' }) + '</span>' : '') + '</div></div>'
+  html += ownerOfflineNote(s) // 0.9.8: before the facts, where it's seen
   html += '<div class="facts">' +
     fact('Machine', mEmoji(s.machine) + ' ' + s.machine + (thisOneSuffix(s.machine, state.health) || (s.isLocal ? '' : ' (synced)'))) + fact('Repo', (s.repoName || '—') + (branch ? ' · ' + branch : '')) + (s.repoProject ? fact('Project', projectLabel(s.repoProject)) : '') + (s.worktree ? fact('Worktree', '⑂ ' + s.worktree.name + (s.worktree.branch ? ' · ' + s.worktree.branch : ''), 'wrap') : '') + (s.startedIn ? fact('Started in', s.startedIn) : '') + fact('Directory', s.cwd || '—') + fact('Last activity', ago(s.lastActivityAt)) + fact('Started', clock(s.startedAt)) +
     fact('Turns', s.turns + ' (' + s.turnsSinceCheckpoint + ' since checkpoint)' + (s.historyTurns ? ' · resumed, ' + s.historyTurns + ' before' : '')) + fact('Capture', s.capture || '—') + fact('Model', s.modelLabel || s.model || '—', 'wrap') + fact('Session id', s.id) +
@@ -1392,8 +1417,16 @@ function liveAfterRender(sid) {
   liveJumpButton(r.thread, liveKeeper.unseen)
   if (ol && !ol.dataset.wired) {
     ol.dataset.wired = '1'
-    ol.addEventListener('scroll', () => { if (atBottom(ol)) { liveKeeper.seen(); liveJumpButton(r.thread, 0) } }, { passive: true })
+    ol._stick = atBottom(ol)
+    // the button follows the scroll: there whenever you're away from the bottom, gone once you're back
+    ol.addEventListener('scroll', () => { ol._stick = atBottom(ol); liveJumpButton(r.thread, liveKeeper.unseen) }, { passive: true })
+    // at the bottom, the thread stays there while an entry grows (a streamed reply, a code block, late fonts)
+    if (typeof ResizeObserver === 'function') {
+      ol._ro = new ResizeObserver(() => { if (ol._stick && !atBottom(ol, 2)) ol.scrollTop = ol.scrollHeight; liveJumpButton(r.thread, liveKeeper.unseen) })
+    }
   }
+  if (ol && ol._ro) { ol._ro.disconnect(); ol._ro.observe(ol); for (const li of ol.children) ol._ro.observe(li) }
+  if (ol && r.follow) ol._stick = true
   // #/s/<id>/live: scroll to the box once, and ready the input on a Mac (no keyboard popping up on a phone)
   const want = parseLiveRoute(location.hash)
   if (want === sid && state.liveFocused !== location.hash + '|' + sid) {
@@ -1406,18 +1439,32 @@ function liveAfterRender(sid) {
   }
   liveTick()
 }
+// "Jump to latest ↓" shows whenever the thread is scrolled away from its bottom (with the
+// count of what came in since, when there is any), and hides once you're back at the bottom.
 function liveJumpButton(thread, n) {
   const b = thread && thread.querySelector('.live-jump')
   if (!b) return
-  b.hidden = !(n > 0)
+  const ol = thread.querySelector('.live-log')
+  const v = jumpView(ol, n)
+  if (!v.show && n > 0) liveKeeper.seen()
+  // on its way down after a tap: don't flash back up mid-scroll
+  if (v.show && thread.dataset.jumping && Date.now() < Number(thread.dataset.jumping)) return
+  b.hidden = !v.show
   const c = b.querySelector('.live-jump-n')
-  if (c) c.textContent = n > 0 ? ' · ' + n + ' new' : ''
+  if (c) c.textContent = v.count
+  b.setAttribute('aria-label', v.label)
 }
 function liveJumpClick(btn) {
   const thread = btn.closest('.live-thread')
   const ol = thread && thread.querySelector('.live-log')
-  if (ol) ol.scrollTo({ top: ol.scrollHeight, behavior: window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' })
-  liveKeeper.seen(); liveJumpButton(thread, 0)
+  const smooth = !(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+  if (thread) thread.dataset.jumping = String(Date.now() + (smooth ? 900 : 0))
+  if (ol) ol.scrollTo({ top: ol.scrollHeight, behavior: smooth ? 'smooth' : 'auto' })
+  liveKeeper.seen()
+  btn.hidden = true
+  const c = btn.querySelector('.live-jump-n'); if (c) c.textContent = ''
+  // land exactly at the bottom even if something grew mid-scroll, then the button follows the scroll again
+  setTimeout(() => { if (!thread || !thread.isConnected) return; delete thread.dataset.jumping; if (ol && !atBottom(ol, 4)) ol.scrollTop = ol.scrollHeight; liveJumpButton(thread, liveKeeper.unseen) }, smooth ? 950 : 0)
 }
 // "Show earlier": 20 more turns, the view stays on what you were reading (the keeper anchors it).
 async function liveEarlierClick(btn) {

package/ui/live-view.js

@@ -65,6 +65,44 @@ export function cardPills(s) {
   return { status: ['active', 'needs_input', 'background'].includes(st) ? st : null, live: true }
 }
 
+// Is Claude running a turn in this live session right now? The Live pill's dot
+// pulses while it is. The same signals the board already shows: the session's
+// own status (a turn typed in the terminal, which the hooks see start), or the
+// board message whose turn is still going, read the way its Working bubble
+// reads it (spinning: sent, received or working; not waiting for your OK, not
+// gone quiet). Idle, waiting on you, or another Mac's daemon that doesn't say:
+// a steady dot.
+export function liveWorking(s, now = Date.now()) {
+  if (!cardPills(s).live) return false
+  if (s.status === 'active') return true
+  const t = s.liveLink && s.liveLink.turn
+  if (!t || !t.phase) return false
+  const v = statusView(t, now)
+  return !!(v && v.spin)
+}
+const LIVE_TIP = 'Live link: send this session messages from the board or your phone'
+export function liveBadgeHtml(s, now = Date.now()) {
+  if (!cardPills(s).live) return ''
+  const w = liveWorking(s, now)
+  return ' <span class="pill live-pill' + (w ? ' working' : '') + '" title="' + (w ? 'Claude is working on a turn · ' : '') + LIVE_TIP + '">Live</span>'
+}
+
+// The board redraws a card (innerHTML) on every update, which would restart a
+// CSS pulse each time: a visible hitch every second or so while a session
+// works. Pinning every pulse to the page's own clock (start time 0) makes a
+// fresh element pick up exactly where the one it replaced was, and keeps the
+// dots on the page beating together. Reduced motion has no animations to pin.
+export const PULSE_NAMES = new Set(['live-pulse', 'pulse', 'needpulse'])
+export function lockPulses(doc) {
+  if (!doc || typeof doc.getAnimations !== 'function') return 0
+  let n = 0
+  for (const a of doc.getAnimations()) {
+    if (!PULSE_NAMES.has(a.animationName) || a.startTime === 0) continue
+    try { a.startTime = 0; n++ } catch {}
+  }
+  return n
+}
+
 // The "N empty sessions" fold never takes a live session.
 export function foldsAsEmpty(s) { return !!(s && s.empty && !s.pinned && !(s.needsYou && s.needsYou.blocking) && !isLiveSession(s)) }
 
@@ -99,6 +137,14 @@ export function senderTitle(m) {
 export function atBottom({ scrollTop = 0, scrollHeight = 0, clientHeight = 0 } = {}, slack = 80) {
   return scrollHeight - clientHeight - scrollTop <= slack
 }
+// "Jump to latest ↓": shown whenever a thread that scrolls is away from its bottom, with the
+// count of what came in since when there is any; at the bottom it's hidden and nothing is unseen.
+export function jumpView(box = {}, unseen = 0) {
+  const { scrollHeight = 0, clientHeight = 0 } = box || {}
+  const away = scrollHeight > clientHeight + 1 && !atBottom(box)
+  const n = away && unseen > 0 ? unseen : 0
+  return { show: away, unseen: n, count: n > 0 ? ' · ' + n + ' new' : '', label: 'Jump to latest message' + (n > 0 ? ' (' + n + ' new)' : '') }
+}
 // After new content: follow it, or leave the view where it is and count what is new.
 export function scrollDecision({ wasAtBottom, newCount = 0, unseen = 0 }) {
   if (wasAtBottom) return { follow: true, unseen: 0 }

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 })
@@ -272,6 +324,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).