@leftoff/cli 0.9.8-beta.3 → 0.9.8-beta.5

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

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.9.8-beta.3",
+  "version": "0.9.8-beta.5",
   "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']
+  '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',
@@ -800,7 +810,7 @@ export function checkpointDue(s, now, cfg = DEFAULT_CONFIG) {
 export function isEmptySession(s, checkpointCount = 0) {
   if (!s) return true
   // 0.7.1: a prompt counts. A long first turn (a worktree bug fix) has no completed turn yet.
-  return !(Number(s.turns) > 0) && !s.title && !s.firstPrompt && !(Number(checkpointCount) > 0) && !s.lastCheckpointId &&
+  return !(Number(s.turns) > 0) && !(Number(s.transcriptTurns) > 0) && !s.title && !s.firstPrompt && !(Number(checkpointCount) > 0) && !s.lastCheckpointId &&
     !(Number(s.historyTurns) > 0) && s.startSource !== 'resume'
 }
 
@@ -876,7 +886,7 @@ export function applyEvent(s, ev) {
         s.needsInput = false
         s.question = null
         s.lastNotification = null
-        if (d.prompt && !s.firstPrompt) s.firstPrompt = clip(String(d.prompt).replace(/^\s*<channel\b[^>]*>([\s\S]*?)<\/channel>\s*$/, '$1').trim(), 300) // 0.9.8: a Live link message, without its wrapper
+        if (d.prompt && (!s.firstPrompt || /^\s*<channel\b/.test(s.firstPrompt))) s.firstPrompt = clip(String(d.prompt).replace(/^\s*<channel\b[^>]*>/, '').replace(/<\/channel>\s*$/, '').trim(), 300) || s.firstPrompt || null // 0.9.8: a Live link message, without its wrapper (even one the 300-character clip cut short)
         if (d.countTurn === true) s.turns = (s.turns || 0) + 1 // 0.8.1: Codex counts a turn at its prompt when no task_started came first
         if (s.capture === 'hooks') { s.inTurn = true; s.activeSince = s.activeSince || at }
       }

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

@@ -120,7 +120,7 @@ h2 .count { color: var(--faint); font-weight: 500; }
 .card:hover { border-color: var(--line-strong); }
 .card.needs_input { border-color: color-mix(in srgb, var(--red) 45%, transparent); box-shadow: 0 0 0 1px var(--tint-red) inset, var(--card-shadow); }
 .card .row1 { display: flex; align-items: flex-start; gap: 10px; }
-.card .title { font-size: 15px; font-weight: 600; line-height: 1.35; flex: 1; }
+.card .title { font-size: 15px; font-weight: 600; line-height: 1.35; flex: 1; min-width: 0; overflow-wrap: break-word; } /* breaks at the <wbr> after a "/" and at spaces first; inside a word only when one word is wider than the card */
 .card .title a:hover { text-decoration: underline; text-decoration-color: var(--faint); }
 .s-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
 .s-title h1 { min-width: 0; }
@@ -2114,6 +2114,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; }
@@ -2260,3 +2263,46 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 @media (pointer: coarse) and (max-width: 819.98px) { html, body { overscroll-behavior-y: contain; } }
 @media (prefers-reduced-motion: reduce) { .ptr-ring { transform: none; } .ptr.busy .ptr-ring { animation: lo-pulse 1.2s ease-in-out infinite; } }
 @keyframes lo-pulse { 50% { opacity: .35; } }
+
+/* 0.9.8: the session page's header. The title takes the room that's left and
+   breaks at " · " and after "/" (titleHtml's <wbr>), never mid-word unless one
+   word is wider than the page; the buttons are one group that drops under the
+   title as a whole when it doesn't fit beside it. Every button: one line, 44px,
+   an icon and a short label; the primary ones (Checkpoint, Resume) are tinted,
+   not filled, so they don't shout over the rest. */
+.pagehead.s-head { flex-wrap: wrap; align-items: flex-start; column-gap: 20px; row-gap: 12px; }
+.pagehead.s-head > .s-head-main { flex: 1 1 28rem; min-width: 0; } /* under ~28rem beside the buttons, the buttons move down instead */
+.s-head h1 { overflow-wrap: break-word; line-height: 1.3; }
+.pagehead.s-head > .s-actions { margin-left: 0; flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
+.s-actions .btn { height: 44px; min-height: 44px; padding: 0 14px; gap: 7px; font-size: 13.5px; line-height: 1; white-space: nowrap; flex: none; justify-content: center; }
+.s-actions .btn .ic { width: 16px; height: 16px; flex: none; margin: 0; }
+.s-actions .btn.icon-btn { width: 44px; padding: 0; }
+.s-actions .more-wrap { display: inline-flex; }
+.s-actions .btn.primary { background: var(--tint-accent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--btn-line)); }
+.s-actions .btn.primary:hover { filter: none; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: var(--accent); }
+.s-actions .btn.primary:active { filter: none; background: color-mix(in srgb, var(--accent) 22%, transparent); }
+.s-actions .split { flex: none; display: inline-flex; align-items: stretch; height: 44px; }
+.s-actions .split .btn { height: 44px; }
+.s-actions .split .btn.split-more { width: 38px; min-width: 38px; padding: 0; margin-left: 0; border-left: 1px solid color-mix(in srgb, var(--accent) 30%, var(--btn-line)); }
+.s-actions .split .btn.split-main { border-right-width: 0; }
+.s-actions .split.is-writing .btn:disabled { opacity: .85; border-style: solid; background: var(--tint-accent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--btn-line)); }
+.s-actions .split.is-writing .spin { border-color: color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); }
+@media (max-width: 640px) {
+  /* a phone: the buttons are a row under the title that wraps, each part of a row sharing its width */
+  .pagehead.s-head > .s-actions { flex: 1 1 100%; }
+  .s-actions > .btn, .s-actions > .split { flex: 1 1 auto; }
+  .s-actions .split .split-main { flex: 1 1 auto; }
+  .s-actions > .more-wrap { flex: none; }
+}
+
+/* 0.9.8: a card's row (Go, Chat, copy, ⋯) and Catch me up's row: one line each,
+   all the same height (44px on touch). */
+.card > .actions-row > .btn, .card > .actions-row > .go-off > .btn, .cu-s .actions-row > .btn { white-space: nowrap; height: 30px; min-height: 30px; padding-top: 0; padding-bottom: 0; line-height: 28px; }
+.card > .actions-row > .btn.icon-btn { width: 32px; line-height: 1; }
+.card > .actions-row > .btn.chat-btn { min-width: 0; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding-top: 0; padding-bottom: 0; overflow: visible; }
+.cu-s .actions-row > .btn { display: inline-flex; align-items: center; }
+@media (pointer: coarse), (max-width: 600px) {
+  .card > .actions-row > .btn, .card > .actions-row > .go-off > .btn, .cu-s .actions-row > .btn { height: 44px; min-height: 44px; line-height: 42px; }
+  .card > .actions-row > .btn.icon-btn { width: 44px; }
+  .card > .actions-row > .btn:not(.icon-btn) { min-width: 44px; }
+}

package/ui/app.js

@@ -19,7 +19,7 @@ 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, 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 } 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')
@@ -113,8 +113,9 @@ 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)
@@ -184,11 +185,11 @@ function wtChips(s) {
   return h
 }
 
-function where(s) {
+function where(s, { repo = true } = {}) {
   if (s.agent) return (s.project ? '<button type="button" class="chip mono repo-link" data-action="repo" data-repo="' + esc(s.repoLabel) + '" data-key="' + esc(s.repoKey || '') + '" title="' + esc(s.repoLabel + ' · show only this project') + '">' + esc(s.repoLabel) + '</button>' : '') + agentChip(s.agent)
   const branch = s.repo && s.repo.branch
   const label = s.repoLabel || s.repoName || 'no repo'
-  return projChip(s) + '<button type="button" class="chip mono repo-link" data-action="repo" data-repo="' + esc(label) + '" data-key="' + esc(s.repoKey || '') + '" title="' + esc((s.repoKey || label) + ' · show only this repo') + '">' + esc(label) + (branch ? ' · ' + esc(branch) : '') + '</button>' + wtChips(s) +
+  return projChip(s) + (repo ? '<button type="button" class="chip mono repo-link" data-action="repo" data-repo="' + esc(label) + '" data-key="' + esc(s.repoKey || '') + '" title="' + esc((s.repoKey || label) + ' · show only this repo') + '">' + esc(label) + (branch ? ' · ' + esc(branch) : '') + '</button>' : '') + wtChips(s) +
     (multi() || !s.isLocal ? (() => { const sn = s.isLocal ? '' : staleNote(s.machine); return '<button type="button" class="chip machine' + (s.isLocal ? '' : ' remote') + (sn ? ' stale' : '') + '" title="' + (s.isLocal ? 'this machine' : sn ? 'showing data as of ' + esc(sn.replace(/^as of /, '')) + ': ' + esc(s.machine) + ' hasn’t synced since' : 'synced from another machine') + '" data-action="machine-emoji" data-machine="' + esc(s.machine) + '"><span class="memo">' + esc(mEmoji(s.machine)) + '</span> ' + esc(s.machine) + (sn ? ' · ' + esc(sn) : '') + '</button>' })() : '') + modelChip(s)
 }
 
@@ -387,9 +388,13 @@ function liveNote(s) {
   if (s.live === 'open' && s.liveVia === 'heartbeat' && !s.isLocal) return 'open (heartbeat)'
   return s.live === 'open' ? 'open' : ''
 }
-function goButton(s) {
+// 0.9.8: { page: true } is the session page's header, where a Go that can't run
+// is left out (its tooltip was the only place the reason showed, and the grey
+// box read as broken); a card keeps the dimmed Go and its short why.
+function goButton(s, { page = false } = {}) {
   if (s.live === 'closed') return ''
   const j = s.jump || {}
+  if (page && (state.viewerLocal === false || !j.supported)) return ''
   // Another machine's session (v0.5.2): Go runs there, through its Leftoff, when it allows it.
   if (!s.isLocal) {
     if (!j.peer) return ''
@@ -439,8 +444,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.
@@ -557,7 +566,7 @@ function checkpointSplit(s) {
       '<button type="button" class="btn primary split-more" disabled aria-disabled="true" aria-label="Checkpoint length">' + icon('chevron-down') + '</button></span>'
   }
   return '<span class="split" role="group" aria-label="Checkpoint now">' +
-    '<button type="button" class="btn primary split-main" data-action="checkpoint" data-id="' + esc(s.id) + '" data-length="' + esc(def) + '" title="' + esc('Checkpoint now · ' + lengthLabel(def) + (s.isLocal ? '' : ' · written on ' + s.machine)) + '">Checkpoint now</button>' +
+    '<button type="button" class="btn primary split-main" data-action="checkpoint" data-id="' + esc(s.id) + '" data-length="' + esc(def) + '" title="' + esc('Checkpoint now · ' + lengthLabel(def) + (s.isLocal ? '' : ' · written on ' + s.machine)) + '" aria-label="Checkpoint now">' + icon('bookmark-plus') + 'Checkpoint</button>' +
     '<button type="button" class="btn primary split-more" data-action="cp-lengths" data-id="' + esc(s.id) + '" aria-label="Checkpoint length" title="Choose the length" aria-haspopup="menu" aria-expanded="false">' + icon('chevron-down') + '</button></span>'
 }
 function openLengthMenu(btn, id) {
@@ -581,10 +590,10 @@ function card(s) {
   const nb = s.needsYou ? cardBadge(s.needsYou) : ''
   return '<article class="card ' + esc(s.status) + (s.live === 'closed' ? ' is-closed' : '') + (s.needsYou && s.needsYou.blocking ? ' needs-you' : '') + '" data-id="' + esc(s.id) + '" data-href="#/s/' + esc(encodeURIComponent(s.id)) + '">' +
     '<div class="row1"><div class="title">' + liveDot(s) +
-      (s.pinned ? '<span class="pin">★ </span>' : '') + '<a href="#/s/' + encodeURIComponent(s.id) + '">' + esc(sessionTitle(s)) + '</a>' +
+      (s.pinned ? '<span class="pin">★ </span>' : '') + '<a href="#/s/' + encodeURIComponent(s.id) + '">' + titleHtml(sessionTitle(s), esc) + '</a>' +
       '<button type="button" class="icon" data-action="rename" title="Rename">✎</button>' +
     '</div>' + statusPill(s) + liveBadge(s) + '</div>' +
-    '<div class="meta">' + spaceChip(s) + where(s) + (ln ? '<span class="livenote ' + esc(s.live) + '">' + esc(ln) + '</span>' : '') + (endedNote ? '<span>' + esc(endedNote) + '</span>' : '') + '<span>·</span><span>' + esc(s.turns) + (s.turns === 1 ? ' turn' : ' turns') + (s.historyTurns ? ' · resumed (' + esc(s.historyTurns) + ' before)' : s.startSource === 'resume' && !s.turns ? ' · resumed' : s.empty && s.live !== 'closed' && !cardPills(s).live ? ' · no prompt yet' : '') + '</span>' +
+    '<div class="meta">' + spaceChip(s) + where(s, { repo: !titleIsWhere(s) }) + (ln ? '<span class="livenote ' + esc(s.live) + '">' + esc(ln) + '</span>' : '') + (endedNote ? '<span>' + esc(endedNote) + '</span>' : '') + '<span>·</span><span>' + esc(s.turns) + (s.turns === 1 ? ' turn' : ' turns') + (s.historyTurns ? ' · resumed (' + esc(s.historyTurns) + ' before)' : s.startSource === 'resume' && !s.turns ? ' · resumed' : s.empty && s.live !== 'closed' && !cardPills(s).live ? ' · no prompt yet' : '') + '</span>' +
       (s.needsInput && s.lastNotification && !s.needsYou ? '<span class="chip">' + esc(s.lastNotification.replace(/_/g, ' ')) + '</span>' : '') + '</div>' +
     cardPrsHtml(s.prs) + listChips(s) + cardHandoffChips(s) + nb + cpArea(s, cpBlock(s.latestCheckpoint)) +
     '<a class="cplink" href="#/s/' + encodeURIComponent(s.id) + '">' + (s.checkpointCount ? s.checkpointCount + (s.checkpointCount === 1 ? ' checkpoint' : ' checkpoints') : 'Session history') + ' →</a>' +
@@ -928,10 +937,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)
@@ -1248,8 +1257,8 @@ async function viewAgentSession(s) {
   const name = esc(a.display || a.name)
   const hint = typeof a.replyHint === 'string' && a.replyHint.trim() ? a.replyHint.trim() : ''
   let html = '<a class="back" href="#/">← All sessions</a>'
-  html += '<div class="pagehead"><div><h1>' + esc(s.title || 'Untitled') + '</h1><div class="sub">' + pill(s.status) + ' ' + spaceChip(s, { force: true }) + where(s) + ' <span class="faint">' + esc(s.inFeed === false ? 'no longer in the feed' : AGENT_STATUS[s.feedStatus] || s.feedStatus) + ' · updated ' + esc(ago(s.lastActivityAt)) + '</span></div></div>' +
-    '<div class="actions">' + agentReplyButton(a) + '</div></div>'
+  html += '<div class="pagehead s-head"><div class="s-head-main"><h1>' + esc(s.title || 'Untitled') + '</h1><div class="sub">' + pill(s.status) + ' ' + spaceChip(s, { force: true }) + where(s) + ' <span class="faint">' + esc(s.inFeed === false ? 'no longer in the feed' : AGENT_STATUS[s.feedStatus] || s.feedStatus) + ' · updated ' + esc(ago(s.lastActivityAt)) + '</span></div></div>' +
+    '<div class="actions s-actions">' + agentReplyButton(a) + '</div></div>'
   // v0.5.6: agent.url only links the name; the reply affordance and its
   // words come from the feed (agent.reply, agent.replyHint), or nothing.
   html += '<div class="banner info"><span>Read-only. This is ' + (home ? '<a href="' + esc(home) + '" target="_blank" rel="noopener noreferrer">' + name + '</a>' : name) + '’s work, from its feed' + (a.pullsHere ? ', pulled by this Mac' : a.puller ? ', pulled by ' + esc(a.puller) : '') + (a.lastSuccessAt ? ' (last pull ' + esc(ago(a.lastSuccessAt)) + ')' : '') + '.' + (hint ? ' ' + esc(hint.charAt(0).toUpperCase() + hint.slice(1)) + (/[.!?]$/.test(hint) ? '' : '.') : '') + '</span></div>'
@@ -1270,19 +1279,37 @@ 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
-  html += '<div class="pagehead"><div>' + (canRename
-    ? '<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">' + esc(sessionTitle(s)) + '</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>' + esc(sessionTitle(s)) + '</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>' +
-    '<div class="actions">' + goButton(s) + (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) + '">' + icon('history') + 'Open in Timeline</a><button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '">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 += '<div class="pagehead s-head"><div class="s-head-main">' + (canRename
+    ? '<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="' + 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) +
@@ -1387,8 +1414,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) {
@@ -1401,18 +1436,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

@@ -13,7 +13,12 @@ export const isLiveSession = (s) => !!(s && s.liveLink && s.liveLink.on && !s.en
 // its repo and branch.
 export function sessionTitle(s, { untitled = 'Untitled session' } = {}) {
   if (!s) return untitled
-  if (s.title) return s.title
+  const wrapped = isWrapped(s.title)
+  if (s.title && !wrapped) return s.title
+  // No name yet (or a raw <channel …> one an earlier beta kept): the first
+  // prompt's words, which another Mac's older Leftoff may have sent without a title.
+  const first = promptLine(s.firstPrompt) || (wrapped ? promptLine(s.title) : '')
+  if (first && (isLiveSession(s) || wrapped)) return first
   if (isLiveSession(s)) {
     const repo = s.repoLabel || s.repoName || (s.repo && s.repo.name) || null
     const branch = s.branch || (s.repo && s.repo.branch) || null
@@ -24,6 +29,33 @@ export function sessionTitle(s, { untitled = 'Untitled session' } = {}) {
   return untitled
 }
 
+// Is the card's name just where it runs ("repo · branch")? Then the repo chip
+// under it would say the same thing twice.
+export function titleIsWhere(s) {
+  if (!s || !isLiveSession(s)) return false
+  const t = sessionTitle(s)
+  const repo = s.repoLabel || s.repoName || (s.repo && s.repo.name) || ''
+  const branch = s.branch || (s.repo && s.repo.branch) || ''
+  return !!repo && (t === repo || t === repo + ' · ' + branch)
+}
+
+const isWrapped = (t) => /^\s*<channel\b/.test(String(t || ''))
+const NOISE_LINE = /^\s*<\/?(local-command-\w+|command-\w+|system-reminder|pasted_content)\b/
+// The first line of a prompt in its own words: no channel wrapper (even one
+// cut short), no system reminders; 60 characters at most.
+export function promptLine(text) {
+  let t = String(text || '').replace(/^\s*<channel\b[^>]*>?/, '').replace(/<\/channel>\s*$/, '').replace(/<system-reminder>[\s\S]*?(<\/system-reminder>|$)/g, '')
+  t = t.split('\n').map((l) => l.trim()).find((l) => l && !NOISE_LINE.test(l)) || ''
+  t = t.replace(/\s+/g, ' ')
+  return t.length > 60 ? t.slice(0, 59) + '…' : t
+}
+
+// A title as HTML that wraps where it reads: after a "/" in a repo or branch
+// (and at the spaces around " · "), not in the middle of a word.
+export function titleHtml(text, esc) {
+  return esc(String(text == null ? '' : text)).split('/').join('/<wbr>')
+}
+
 // Which pills a card shows: a live session that is just waiting for you shows
 // one Live pill (never "dormant"); one that is working or needs you shows that too.
 export function cardPills(s) {
@@ -67,6 +99,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).