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

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

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

@@ -547,7 +547,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']
 
 export const SESSION_FIELDS = ['id', 'title', 'titleSource', 'machine', 'cwd', 'repo', 'transcriptPath', 'model', 'surface', 'capture',
   'status', 'startedAt', 'lastActivityAt', 'lastHeartbeatAt', 'endedAt', 'endReason', 'turns', 'lastCheckpointId',
@@ -800,7 +800,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 +876,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.2' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.9.8-beta.4' // 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.2",
+  "version": "0.9.8-beta.4",
   "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; }
@@ -2086,6 +2086,29 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 .lvs-time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
 .lv-spin { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: spin .8s linear infinite; }
 @media (prefers-reduced-motion: reduce) { .lv-spin { animation: none; border-top-color: color-mix(in srgb, var(--accent) 25%, transparent); background: var(--accent); transform: scale(.6); } }
+.lv-earlier { list-style: none; display: flex; justify-content: center; margin: 2px 0 10px; }
+.live-earlier { min-height: 44px; font-size: 13px; }
+.lv-terminal { width: fit-content; max-width: 88%; margin-left: auto; background: color-mix(in srgb, var(--tint-accent) 50%, var(--card)); border-color: color-mix(in srgb, var(--accent) 18%, var(--line)); }
+.lv-tick { margin-top: 4px; font-size: 11.5px; color: var(--muted); text-align: right; }
+.lv-tick.got span { color: var(--accent); letter-spacing: -2px; padding-right: 2px; }
+.lv-tick.bad { color: var(--red); text-align: left; }
+.lv-working .lvs-line { margin-top: 0; }
+.lv-pending .lv-working { margin-top: 4px; }
+.lvs-sep { color: var(--faint); }
+.lv-working .lvs-time { margin-left: 0; }
+.lv-tool { font-size: 12px; line-height: 1.45; color: var(--text2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
+.lv-tool.done { color: var(--faint); }
+.lv-tool.now { color: var(--text); }
+.lv-tools { margin-top: 6px; font-size: 12px; color: var(--muted); }
+.lv-tools > summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; gap: 4px; list-style: none; }
+.lv-tools > summary::-webkit-details-marker { display: none; }
+.lv-tools > summary::before { content: '▸'; font-size: 10px; color: var(--faint); transition: transform .15s; }
+.lv-tools[open] > summary::before { transform: rotate(90deg); }
+@media (prefers-reduced-motion: reduce) { .lv-tools > summary::before { transition: none; } }
+.lv-tools > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
+.lv-tools[open] > summary { margin-bottom: 2px; }
+.lv-none { color: var(--muted); font-style: italic; }
+.lv-pending { width: fit-content; min-width: min(260px, 100%); }
 .live-jump { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--btn-line); background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; z-index: 2; }
 .live-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .live-jump-n { font-weight: 500; color: var(--muted); }
@@ -2101,8 +2124,9 @@ mark.tx, .co-snip mark, .tx-snip mark, .tx-msg-text mark { background: var(--tx-
 @media (pointer: coarse), (max-width: 600px) {
   .live-row .btn, .restore-ask .btn, .btn.chat-btn { min-height: 44px; min-width: 44px; }
   .need-actions .btn, .deny-form .btn { min-height: 44px; } /* Allow / Deny from the phone */
+  .lv-tools > summary { min-height: 44px; }
   .live-box { padding: 10px; margin-left: -4px; margin-right: -4px; }
-  .lv-you, .lv-event { max-width: 92%; }
+  .lv-you, .lv-event, .lv-terminal { max-width: 92%; }
   .live-log { max-height: 60vh; max-height: 60dvh; }
 }
 
@@ -2236,3 +2260,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, entryHtml, 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 } 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')
@@ -184,11 +184,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 +387,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 ''
@@ -557,7 +561,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 +585,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>' +
@@ -1248,8 +1252,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>'
@@ -1279,10 +1283,11 @@ async function viewSession(id) {
   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="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 += '<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) +
@@ -1359,7 +1364,8 @@ async function liveSection(s) {
       (how && how.line ? ' (or <code>' + esc(how.line) + '</code>)' : '') + '. Claude Code asks once to load the channel; channels are a research preview.</p></section>'
   }
   let v = null
-  try { v = await api('GET', '/v1/sessions/' + encodeURIComponent(s.id) + '/live') } catch (e) { v = { messages: [], error: e.message } }
+  const turns = (state.liveTurns && state.liveTurns[s.id]) || 20 // "Show earlier" adds 20 at a time
+  try { v = await api('GET', '/v1/sessions/' + encodeURIComponent(s.id) + '/live' + (turns > 20 ? '?turns=' + turns : '')) } catch (e) { v = { messages: [], error: e.message } }
   const msgs = (v && v.messages) || []
   const may = state.mayAnswer !== false
   const draft = (state.drafts && state.drafts['live:' + s.id]) || ''
@@ -1368,7 +1374,7 @@ async function liveSection(s) {
   if (lastClaude) markLiveSeen(s.id, lastClaude.at)
   return '<section class="live-box" id="live" aria-label="Live link" data-id="' + esc(s.id) + '"><div class="live-head"><h2>Live</h2><span class="faint">Goes straight into this session' + (s.isLocal === false ? ' on ' + esc(s.machine) : '') + '. Claude reads it as its next prompt.</span></div>' +
     '<div class="live-thread" data-sid="' + esc(s.id) + '"><ol class="live-log" aria-live="polite" aria-label="Messages with this session">' +
-      msgs.map((m) => entryHtml(m, { esc, ago, md: renderDoc, now })).join('') + '</ol>' +
+      earlierHtml((v && v.earlier) || 0, { esc }) + threadHtml(msgs, { esc, ago, md: renderDoc, now }) + '</ol>' +
       '<p class="faint live-empty"' + (msgs.length ? ' hidden' : '') + '>Nothing sent yet. Claude answers here and in the terminal.</p>' +
       '<button type="button" class="live-jump" data-action="live-jump" hidden>Jump to latest ↓<span class="live-jump-n"></span></button></div>' +
     (v && v.error ? '<p class="live-err">' + esc(v.error) + '</p>' : '') +
@@ -1413,6 +1419,16 @@ function liveJumpClick(btn) {
   if (ol) ol.scrollTo({ top: ol.scrollHeight, behavior: window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' })
   liveKeeper.seen(); liveJumpButton(thread, 0)
 }
+// "Show earlier": 20 more turns, the view stays on what you were reading (the keeper anchors it).
+async function liveEarlierClick(btn) {
+  const box = btn.closest('.live-box')
+  const sid = box && box.dataset.id
+  if (!sid) return
+  state.liveTurns = state.liveTurns || {}
+  state.liveTurns[sid] = ((state.liveTurns[sid]) || 20) + 20
+  btn.setAttribute('aria-busy', 'true'); btn.textContent = 'Loading…'
+  await render()
+}
 // The elapsed time beside "Claude is working…", every second while something is in flight.
 let liveTimer = null
 function liveTick() {
@@ -4306,6 +4322,7 @@ document.addEventListener('click', async (ev) => {
     if (action === 'reply-send') return replyClick(btn)
     if (action === 'live-send') return liveSendClick(btn)
     if (action === 'live-jump') return liveJumpClick(btn)
+    if (action === 'live-earlier') return liveEarlierClick(btn)
     if (action === 'quick-reply') return quickReplyClick(btn)
     if (action === 'need-more') return needMoreClick(btn)
     if (action === 'need-dismiss') return needDismissClick(btn)

package/ui/live-status.js

@@ -31,18 +31,19 @@ export function stepStatus(st, ev = {}) {
     case 'delivered': if (s.phase === 'sent') s.phase = 'received'; break
     case 'failed': if (s.phase === 'sent') { s.phase = 'failed'; s.error = ev.error || null; s.endedAt = at } break
     case 'started': case 'text': if (s.phase !== 'replied') s.phase = 'working'; if (ev.type === 'text') s.waiting = null; break
-    case 'tool': s.phase = 'working'; s.tool = { name: clip(ev.tool, 40), detail: clip(ev.detail, 80) }; s.waiting = null; break
+    case 'tool': s.phase = 'working'; s.tool = { name: clip(ev.tool, 40), detail: clip(ev.detail, 300) }; s.waiting = null; break
     case 'tool_done': {
       const name = clip(ev.tool || (s.tool && s.tool.name), 40)
-      if (name) s.ran.push({ tool: name, detail: clip(ev.detail || (s.tool && s.tool.detail), 80), asked: !!ev.asked })
+      if (name) s.ran.push({ tool: name, detail: clip(ev.detail || (s.tool && s.tool.detail), 300), asked: !!ev.asked })
       if (s.ran.length > 20) s.ran = s.ran.slice(-20)
       s.tool = null; s.waiting = null
       break
     }
-    case 'ask': s.phase = 'working'; s.waiting = { tool: clip(ev.tool, 40), detail: clip(ev.detail, 80) }; break
+    case 'ask': s.phase = 'working'; s.waiting = { tool: clip(ev.tool, 40), detail: clip(ev.detail, 300) }; break
     case 'ask_done': s.waiting = null; break
     case 'reply': s.phase = 'replied'; s.tool = null; s.waiting = null; s.endedAt = at; break
     case 'ended': s.tool = null; s.waiting = null; s.endedAt = at; s.phase = ev.text ? 'replied' : 'stopped'; break
+    case 'lost': s.tool = null; s.waiting = null; s.endedAt = at; s.phase = 'stopped'; s.lost = true; break // a restart came in between and no answer is in the transcript
     default: return s
   }
   s.last = at
@@ -62,10 +63,10 @@ export function statusView(st, now = Date.now()) {
     else if (st.tool) label = 'Claude is working… (running ' + st.tool.name + (st.tool.detail ? ': ' + st.tool.detail : '') + ')'
     else label = quiet ? 'Claude has been quiet for a while (check the terminal)' : 'Claude is working…'
   } else if (st.phase === 'replied') label = 'Replied'
-  else if (st.phase === 'stopped') label = 'Stopped without a reply'
+  else if (st.phase === 'stopped') label = st.lost ? 'No reply recorded' : 'Stopped without a reply'
   else label = 'Didn’t arrive'
   const at = { sent: 0, received: 1, working: 2, replied: 3, stopped: 3, failed: 0 }[st.phase] || 0
-  const steps = ['Sent', 'Received', st.phase === 'stopped' ? 'Stopped' : 'Working', st.phase === 'stopped' ? null : 'Replied'].filter(Boolean)
+  const steps = ['Sent', 'Received', st.phase === 'stopped' ? (st.lost ? 'No reply' : 'Stopped') : 'Working', st.phase === 'stopped' ? null : 'Replied'].filter(Boolean)
     .map((name, i) => ({ name, state: st.phase === 'failed' ? (i === 0 ? 'bad' : 'todo') : i < at ? 'done' : i === at ? (FINAL.has(st.phase) || st.phase === 'stopped' ? 'done' : 'now') : 'todo' }))
   const spin = !quiet && (st.phase === 'sent' || st.phase === 'received' || st.phase === 'working') && !st.waiting
   const tone = st.phase === 'failed' ? 'bad' : st.phase === 'stopped' || quiet || st.waiting ? 'warn' : st.phase === 'replied' ? 'good' : 'busy'

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) {
@@ -43,6 +75,8 @@ export function senderLabel(m) {
   if (!m) return ''
   if (m.from === 'claude') return 'Claude'
   if (m.from === 'event') return 'Event' + (m.source ? ' · ' + m.source : '')
+  if (m.from === 'terminal') return 'You · terminal' // typed in Claude Code itself (from its transcript)
+  if (m.history && !m.by) return 'You · board'
   const by = m.by || {}
   let device = by.device || null
   if (!device && by.transport === 'local') device = 'this Mac'
@@ -91,7 +125,12 @@ export function hasUnread(lastReplyAt, seenAt) {
 
 // opts: { esc, ago, md (markdown -> html), now }
 export function entryKey(m) { return String(m.id || '') + ':' + m.from }
-export function entryHtml(m, { esc, ago, md, now = Date.now() }) {
+// "Show earlier" at the top of the thread, when older turns are left out.
+export function earlierHtml(n, { esc }) {
+  if (!(n > 0)) return ''
+  return '<li class="lv-earlier" data-key="earlier" data-sig="' + esc(String(n)) + '" data-older="1"><button type="button" class="btn live-earlier" data-action="live-earlier">Show earlier <span class="faint">(' + esc(String(n)) + (n === 1 ? ' turn' : ' turns') + ')</span></button></li>'
+}
+export function entryHtml(m, { esc, ago, md, now = Date.now(), status = null }) {
   const who = senderLabel(m)
   const title = m.from === 'you' ? senderTitle(m) : ''
   let body
@@ -99,15 +138,93 @@ export function entryHtml(m, { esc, ago, md, now = Date.now() }) {
   else body = '<div class="lv-text">' + esc(m.text || '') + '</div>'
   let foot = ''
   if (m.from === 'claude') {
+    // what Claude did for this turn sits with Claude's answer: still working, the tools it ran, the note
+    const st = status || null
+    if (st && !m.done && !FINAL_PHASES.has(st.phase)) foot += workingHtml(st, { esc, now })
+    else if (!m.done) foot += '<div class="lv-note">Still writing…</div>'
+    if (st && (st.ran || []).length) foot += toolsHtml(st, { esc, now, open: false })
     const ran = (m.ranWithoutAsking || []).length ? m.ranWithoutAsking : []
-    if (!m.done) foot += '<div class="lv-note">Still writing…</div>'
     if (ran.length) foot += '<div class="lv-note">Ran without asking: ' + esc(ran.join(', ')) + ' <span class="faint">(read-only or allowed in your Claude Code settings, so no Allow/Deny)</span></div>'
   } else if (m.status) {
-    foot = statusHtml(m.status, { esc, now, error: m.errorText })
+    foot = deliveryHtml(m.status, { esc, error: m.errorText })
   } else if (m.state) {
-    foot = '<div class="lv-status ' + (m.state === 'failed' ? 'bad' : '') + '">' + esc(m.state === 'failed' ? (m.errorText || 'Didn’t arrive') : m.state === 'received' ? 'Received by the session' : 'Sent, waiting for the session') + '</div>'
+    foot = '<div class="lv-tick ' + (m.state === 'failed' ? 'bad' : '') + '">' + esc(m.state === 'failed' ? (m.errorText || 'Didn’t arrive') : m.state === 'received' ? 'Received ✓✓' : 'Sent ✓') + '</div>'
+  }
+  const sig = entrySig(m) + (m.from === 'claude' && status ? statusSig(status) : '')
+  return '<li class="lv lv-' + esc(m.from) + (m.history ? ' lv-history' : '') + '" data-key="' + esc(entryKey(m)) + '" data-sig="' + esc(sigHash(sig)) + '"><div class="lv-who"' + (title ? ' title="' + esc(title) + '"' : '') + '>' + esc(who) + ' <span class="faint">' + esc(ago(m.at)) + '</span></div>' + body + foot + '</li>'
+}
+
+const FINAL_PHASES = new Set(['replied', 'failed', 'stopped'])
+const statusSig = (st) => JSON.stringify([st.phase, st.tool, st.waiting, (st.ran || []).length, st.endedAt, st.lost])
+
+// Under your message: only whether it got there, like a chat app.
+export function deliveryHtml(st, { esc, error = null }) {
+  if (!st) return ''
+  if (st.phase === 'failed') return '<div class="lv-tick bad" role="status">' + esc(error || 'Didn’t arrive') + '</div>'
+  const got = st.phase !== 'sent'
+  return '<div class="lv-tick' + (got ? ' got' : '') + '" title="' + esc(got ? 'Claude Code received it' : 'Waiting for the session to pick it up') + '">' + (got ? 'Received <span aria-hidden="true">✓✓</span>' : 'Sent <span aria-hidden="true">✓</span>') + '</div>'
+}
+
+// "git -C /a/b diff --cached --quiet" → "git -C /a… --cached --quiet": the start and the end stay visible.
+export function midClip(s, n = 56) {
+  const t = String(s == null ? '' : s).replace(/\s+/g, ' ').trim()
+  if (t.length <= n) return t
+  const head = Math.ceil((n - 1) * 0.55)
+  return t.slice(0, head) + '…' + t.slice(t.length - (n - 1 - head))
+}
+const toolLine = (name, detail, { esc, cls = '' }) => '<div class="lv-tool mono' + (cls ? ' ' + cls : '') + '"' + (detail ? ' title="' + esc(name + ' · ' + detail) + '"' : '') + '>' + esc(name) + (detail ? ' · ' + esc(midClip(detail)) : '') + '</div>'
+
+// The live line on Claude's side: spinner, "Working · 45s", what it is running now, the last few it ran.
+export function workingHtml(st, { esc, now = Date.now() }) {
+  const v = statusView(st, now)
+  if (!v) return ''
+  let label
+  if (st.waiting) label = 'Waiting for your OK'
+  else if (v.quiet) label = 'Quiet for a while · check the terminal'
+  else if (st.phase === 'sent') label = 'Waiting for the session'
+  else if (st.phase === 'received') label = 'Starting'
+  else label = 'Working'
+  let html = '<div class="lv-status lv-working ' + v.tone + '" data-since="' + esc(String(st.at || '')) + '" role="status"><div class="lvs-line">' + (v.spin ? '<span class="lv-spin" aria-hidden="true"></span>' : '') + '<span class="lvs-label">' + esc(label) + '</span><span class="lvs-sep" aria-hidden="true">·</span><span class="lvs-time">' + esc(elapsedText(v.elapsedMs)) + '</span></div>'
+  const recent = (st.ran || []).slice(-3)
+  for (const r of recent) html += toolLine(r.tool, r.detail, { esc, cls: 'done' })
+  if (st.waiting) html += toolLine(st.waiting.tool || 'a tool', st.waiting.detail, { esc, cls: 'now' })
+  else if (st.tool) html += toolLine(st.tool.name, st.tool.detail, { esc, cls: 'now' })
+  return html + '</div>'
+}
+
+// After the turn: the tools folded into "Ran 3 commands".
+export function toolsHtml(st, { esc, now = Date.now(), open = false }) {
+  const ran = (st && st.ran) || []
+  if (!ran.length) return ''
+  const bash = ran.every((r) => r.tool === 'Bash')
+  const what = bash ? (ran.length === 1 ? 'Ran 1 command' : 'Ran ' + ran.length + ' commands') : (ran.length === 1 ? 'Used 1 tool' : 'Used ' + ran.length + ' tools')
+  const v = statusView(st, now)
+  const time = v && v.final && st.endedAt ? ' · ' + elapsedText(v.elapsedMs) : ''
+  return '<details class="lv-tools"' + (open ? ' open' : '') + '><summary>' + esc(what + time) + '</summary>' + ran.map((r) => toolLine(r.tool, r.detail, { esc })).join('') + '</details>'
+}
+
+// Claude's side before its answer lands (or when none came): the same bubble the answer replaces.
+export function pendingClaudeHtml(you, { esc, ago, now = Date.now() }) {
+  const st = you.status
+  const key = 'ans_' + you.id + ':claude'
+  let inner
+  if (st.phase === 'stopped') inner = '<div class="lv-text lv-none">' + esc(st.lost ? 'No reply recorded' : 'Stopped without a reply') + '</div>' + toolsHtml(st, { esc, now })
+  else inner = workingHtml(st, { esc, now })
+  return '<li class="lv lv-claude lv-pending' + (st.phase === 'stopped' ? ' lv-ended' : '') + '" data-key="' + esc(key) + '" data-pending="1" data-sig="' + esc(sigHash('pending' + statusSig(st))) + '"><div class="lv-who">Claude <span class="faint">' + esc(ago(st.last ? new Date(st.last).toISOString() : you.at)) + '</span></div>' + inner + '</li>'
+}
+
+// The whole thread: each message you sent, then Claude's side of that turn.
+export function threadHtml(msgs, opts) {
+  const list = msgs || []
+  const byId = new Map(list.filter((m) => m.from !== 'claude' && m.id).map((m) => [m.id, m]))
+  const answered = new Set(list.filter((m) => m.from === 'claude' && m.replyTo).map((m) => m.replyTo))
+  let html = ''
+  for (const m of list) {
+    if (m.from === 'claude') { const you = m.replyTo ? byId.get(m.replyTo) : null; html += entryHtml(m, { ...opts, status: you && you.status ? you.status : null }); continue }
+    html += entryHtml(m, opts)
+    if (m.status && !answered.has(m.id) && m.status.phase !== 'failed' && m.status.phase !== 'sent') html += pendingClaudeHtml(m, opts)
   }
-  return '<li class="lv lv-' + esc(m.from) + '" data-key="' + esc(entryKey(m)) + '" data-sig="' + esc(sigHash(entrySig(m))) + '"><div class="lv-who"' + (title ? ' title="' + esc(title) + '"' : '') + '>' + esc(who) + ' <span class="faint">' + esc(ago(m.at)) + '</span></div>' + body + foot + '</li>'
+  return html
 }
 
 export function statusHtml(st, { esc, now = Date.now(), error = null }) {
@@ -131,6 +248,18 @@ export function entrySig(m) { return JSON.stringify([m.text, m.state, m.status &
 
 // ------------------------------------------------------------ the DOM keeper
 
+// A freshly drawn thread (a page load or refresh) opens at its latest message,
+// and stays there while late layout (fonts, code blocks) settles, unless you
+// scroll up in the meantime.
+export function pinToBottom(ol, { raf = (typeof requestAnimationFrame === 'function' ? requestAnimationFrame : (f) => setTimeout(f, 16)), fonts = (typeof document !== 'undefined' && document.fonts) || null } = {}) {
+  let pinned = -1
+  const pin = () => { if (pinned >= 0 && ol.scrollTop < pinned - 4) return; ol.scrollTop = ol.scrollHeight; pinned = ol.scrollTop }
+  pin()
+  raf(() => { pin(); raf(pin) })
+  setTimeout(pin, 250)
+  if (fonts && fonts.ready && fonts.ready.then) fonts.ready.then(pin, () => {})
+}
+
 // Keeps the thread's <ol> across re-renders of the session page.
 export function createLiveKeeper() {
   const kept = { sid: null, wrap: null, unseen: 0 }
@@ -138,6 +267,9 @@ export function createLiveKeeper() {
     // Before the page is replaced: hold on to the current thread.
     before(root) {
       const w = root && root.querySelector('.live-thread')
+      // a detached element loses its scroll position (WebKit), so remember it and put it back in after()
+      const ol = w && w.querySelector('.live-log')
+      kept.scroll = ol ? { top: ol.scrollTop, bottom: atBottom(ol) } : null
       if (w) { kept.wrap = w; kept.sid = w.dataset.sid; w.remove() } else { kept.wrap = null; kept.sid = null }
     },
     // After: put the old thread back in place of the new one and diff the new entries in.
@@ -145,24 +277,31 @@ export function createLiveKeeper() {
       const fresh = root && root.querySelector('.live-thread')
       if (!fresh) { kept.wrap = null; return null }
       const old = kept.wrap
-      if (!old || old.dataset.sid !== fresh.dataset.sid) { kept.unseen = 0; const ol = fresh.querySelector('.live-log'); if (ol) ol.scrollTop = ol.scrollHeight; return { thread: fresh, follow: true, first: true } }
+      if (!old || old.dataset.sid !== fresh.dataset.sid) { kept.unseen = 0; const ol = fresh.querySelector('.live-log'); if (ol) pinToBottom(ol); return { thread: fresh, follow: true, first: true } }
       const oldOl = old.querySelector('.live-log'), newOl = fresh.querySelector('.live-log')
       fresh.replaceWith(old)
       if (!oldOl || !newOl) { if (newOl && !oldOl) old.replaceWith(fresh); return { thread: oldOl ? old : fresh, follow: true } }
-      const wasAtBottom = atBottom(oldOl)
+      if (kept.scroll) oldOl.scrollTop = kept.scroll.top
+      const wasAtBottom = kept.scroll ? kept.scroll.bottom : atBottom(oldOl)
+      const fromBottom = oldOl.scrollHeight - oldOl.scrollTop
       const have = new Map([...oldOl.children].map((li) => [li.dataset.key, li]))
-      let added = 0
+      let added = 0, older = 0
       let prev = null
+      let seenKept = false
       for (const li of [...newOl.children]) {
         const cur = have.get(li.dataset.key)
         have.delete(li.dataset.key)
-        if (!cur) { added++; prev ? prev.after(li) : oldOl.prepend(li); prev = li; continue }
-        if (cur.dataset.sig !== li.dataset.sig) { cur.replaceWith(li); prev = li } else prev = cur
+        // added above everything already shown ("Show earlier"): older, not new
+        // Claude's "Working" bubble isn't news by itself; the answer that replaces it is
+        if (!cur) { if (seenKept && !li.dataset.older) { if (!li.dataset.pending) added++ } else older++; prev ? prev.after(li) : oldOl.prepend(li); prev = li; continue }
+        if (!cur.dataset.older) seenKept = true
+        if (cur.dataset.sig !== li.dataset.sig) { if (cur.dataset.pending && !li.dataset.pending) added++; cur.replaceWith(li); prev = li } else prev = cur
       }
       for (const li of have.values()) li.remove()
       const d = scrollDecision({ wasAtBottom, newCount: added, unseen: kept.unseen })
       kept.unseen = d.unseen
       if (d.follow) oldOl.scrollTop = oldOl.scrollHeight
+      else if (older) oldOl.scrollTop = oldOl.scrollHeight - fromBottom // keep what you were reading in place
       return { thread: old, follow: d.follow, unseen: d.unseen }
     },
     seen() { kept.unseen = 0 },