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

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

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.9.17-beta.6",
+  "version": "0.9.17-beta.8",
   "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": "One Silly App"

package/mod/hooks/core.js

@@ -683,7 +683,7 @@ const SESSION_ORDER = ['id', 'title', 'title_source', 'machine', 'cwd', 'repo',
 export const SESSION_EXTRA = ['inTurn', 'needsInput', 'backgroundTasks', 'turnsSinceCheckpoint', 'dormantStretch',
   'finalCheckpointDone', 'firstPrompt', 'lastPreview', 'lastNotification', 'lastEventAt', 'statusChanges', 'folder',
   'pid', 'tty', 'pidStartedAt', 'pidSource', 'term', 'closedAt', 'answers', 'lastNotificationMessage', 'needsInputAt', 'question', 'questionAt',
-  'startSource', 'historyTurns', 'healedAt', 'healedVia', 'archivedReason', 'backend', 'prLinks', 'prUnlinked', 'todos', 'files', 'startRepo', 'editedRepos', 'parked', 'nonInteractive', 'transcriptCwd', 'doubtedCheckpoints', 'liveLink', 'transcriptTurns', 'wasLive', 'headless', 'startedFrom', 'startProject', 'backgroundList', 'doneAt', 'recap', 'reviewed', 'wtLook']
+  'startSource', 'historyTurns', 'healedAt', 'healedVia', 'archivedReason', 'backend', 'prLinks', 'prUnlinked', 'todos', 'files', 'startRepo', 'editedRepos', 'parked', 'nonInteractive', 'transcriptCwd', 'doubtedCheckpoints', 'liveLink', 'transcriptTurns', 'wasLive', 'headless', 'startedFrom', 'startProject', 'backgroundList', 'doneAt', 'recap', 'reviewed', 'wtLook', 'prShort']
 
 export const SESSION_FIELDS = ['id', 'title', 'titleSource', 'machine', 'cwd', 'repo', 'transcriptPath', 'model', 'surface', 'capture',
   'status', 'startedAt', 'lastActivityAt', 'lastHeartbeatAt', 'endedAt', 'endReason', 'turns', 'lastCheckpointId',
@@ -1622,8 +1622,13 @@ export const NOTHING_TO_CHECKPOINT = 'Nothing to checkpoint yet — no messages
 // clip). The board and the daemon use ui/cp-text.js stripChannel; this copy is
 // here because the mod ships on its own. A test holds the two to the same answers.
 const CH_PAIR = /<channel\b[^>]*>([\s\S]*?)<\/channel\s*>/g
+// 2026-10-29: Claude Code's wrapper for a prompt our plugin submits between turns
+// ("The leftoff plugin sent a message:\n<words>\n\nThis is how Claude Code surfaces a prompt …").
+const PLUGIN_WRAP = /^\s*The leftoff plugin sent a message:\s*\n([\s\S]*?)(?:\n\s*\nThis is how Claude Code surfaces a prompt[\s\S]*)?$/i
 export function stripChannel(s) {
   let t = String(s == null ? '' : s)
+  const pw = PLUGIN_WRAP.exec(t)
+  if (pw) t = pw[1]
   if (!/<\/?channel\b/i.test(t)) return t.trim()
   for (let i = 0; i < 8 && CH_PAIR.test(t); i++) { CH_PAIR.lastIndex = 0; t = t.replace(CH_PAIR, '$1') }
   CH_PAIR.lastIndex = 0

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

@@ -4384,12 +4384,59 @@ html.lo-reordering, html.lo-reordering * { cursor: grabbing !important; user-sel
 html:not(.live-full) .fs-side { display: none; }
 .fs-side-in { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 16px 16px; container: fsside / inline-size; }
 .fs-side-in > * { max-width: 100%; }
-.fs-head { display: block; margin: 0 0 4px; padding: 0; }
-.fs-head-row { display: flex; align-items: flex-start; gap: 2px; }
-.fs-head .s-title { flex: 1 1 auto; min-width: 0; margin: 0; }
-.fs-head h1 { font-size: 17px; line-height: 1.3; margin: 11px 0 4px; overflow-wrap: anywhere; }
-.fs-head .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 6px; }
-.fs-head .more-wrap { flex: none; }
+/* 2026-10-28 the panel's head: one row (› hide, the title, then ✎ and ⋯ in one cluster, all one size,
+   centred on the title's FIRST line), the chips on one baseline under it, then the folder line.
+   --fsh-b: the buttons' size (32px with a mouse, 44px on touch); --fsh-lh: one title line. */
+.fs-head { display: block; margin: 0 0 4px; padding: 0; --fsh-b: 32px; --fsh-lh: 22px; }
+@media (pointer: coarse) { .fs-head { --fsh-b: 44px; } }
+.fs-head-row { display: flex; align-items: flex-start; gap: 4px; margin: 2px 0 6px; min-width: 0; }
+.fs-head .s-title { flex: 1 1 auto; min-width: 0; margin: 0; display: block; }
+.fs-head h1 { position: relative; font-size: 17px; line-height: var(--fsh-lh); margin: calc((var(--fsh-b) - var(--fsh-lh)) / 2) 0 0; overflow-wrap: anywhere; }
+.fs-head .s-title-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
+.fs-head .s-title input { margin: calc((var(--fsh-b) - 34px) / 2) 0 0; font-size: 17px; width: 100%; box-sizing: border-box; }
+.fs-hacts { flex: none; display: flex; align-items: center; gap: 2px; height: var(--fsh-b); }
+.fs-hacts .more-wrap { flex: none; display: inline-flex; }
+.fs-head .fs-side-x, .fs-hacts .fs-hact, .fs-hacts .btn.icon-btn.more { flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--fsh-b); height: var(--fsh-b); margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; box-shadow: none; color: var(--text2); cursor: pointer; }
+.fs-head .fs-side-x .ic, .fs-hacts .fs-hact svg, .fs-hacts .btn.icon-btn.more .ic { width: 16px; height: 16px; margin: 0; }
+.fs-head .fs-side-x { margin-left: -6px; }
+@media (hover: hover) { .fs-head .fs-side-x:hover, .fs-hacts .fs-hact:hover, .fs-hacts .btn.icon-btn.more:hover { background: var(--card2); color: var(--text); border-color: transparent; } }
+.fs-hacts .btn.icon-btn.more[aria-expanded="true"] { background: var(--card2); color: var(--text); }
+.fs-hacts .fs-hact:focus-visible, .fs-hacts .btn.icon-btn.more:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.fs-hacts .retitle.is-busy { color: var(--accent); cursor: progress; }
+/* their tips hang below, right-aligned (the panel's edge is near) */
+.fs-side .fs-hacts [data-tip]::after { right: 0; left: auto; top: calc(100% + 4px); transform: none; }
+@media (hover: hover) and (pointer: fine) { .fs-hacts .fs-hact[data-tip]:hover::after, .fs-hacts .btn.more[data-tip]:hover::after { display: block; animation: tip-in .12s ease-out .35s both; } }
+.fs-hacts .fs-hact[data-tip]:focus-visible::after, .fs-hacts .btn.more[data-tip]:focus-visible::after { display: block; }
+.fs-hacts .btn.more[aria-expanded="true"]::after { display: none !important; }
+/* the session's PRs: none found says why in one quiet line; Link a PR… focuses the box under it */
+.sprs .pr-none { position: relative; margin: 0 0 8px; font-size: 13px; line-height: 1.4; color: var(--muted); }
+.sprs .pr-none-link { cursor: pointer; color: var(--accent); }
+@media (hover: hover) { .sprs .pr-none-link:hover { text-decoration: underline; } }
+.fs-side .sprs .pr-none[data-tip]::after { left: 0; right: auto; top: calc(100% + 4px); transform: none; white-space: normal; max-width: 100%; }
+@media (hover: hover) and (pointer: fine) { .sprs .pr-none[data-tip]:hover::after { display: block; animation: tip-in .12s ease-out .6s both; } }
+/* 2026-10-29 state by shape plus the word; a ref that couldn't be checked is a quiet dashed chip, why in its tip */
+.pr-state { display: inline-flex; align-items: center; gap: 3px; line-height: 1; }
+.pr-st-ic { flex: none; width: 13px; height: 13px; position: relative; top: .5px; }
+.sprs .pr-unlist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
+.sprs .pr-unchecked { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 26px; line-height: 1; padding: 0 9px; border: 1px dashed var(--line-strong); border-radius: 999px; font-size: 12.5px; color: var(--muted); background: transparent; max-width: 100%; min-width: 0; cursor: default; }
+.sprs .pr-unchecked .pr-un-ref { font-family: var(--mono); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; position: relative; top: .5px; }
+.sprs .pr-unchecked .pr-un-word { flex: none; position: relative; top: .5px; }
+.sprs .pr-unchecked .pr-st-ic { color: var(--muted); }
+.sprs .pr-unchecked:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+@media (pointer: coarse) { .sprs .pr-unchecked { height: 32px; } .sprs .pr-unlist { gap: 8px; } }
+.fs-side .sprs .pr-unchecked[data-tip]::after, .sprs .pr-unchecked[data-tip]::after { left: 0; right: auto; top: calc(100% + 4px); transform: none; white-space: normal; width: 260px; max-width: 70vw; font-family: var(--sans, inherit); font-weight: 400; line-height: 1.35; z-index: 30; }
+@media (hover: hover) and (pointer: fine) { .sprs .pr-unchecked[data-tip]:hover::after { display: block; animation: tip-in .12s ease-out .35s both; } }
+.sprs .pr-unchecked[data-tip]:focus-visible::after { display: block; }
+/* the whole title, when two lines cut it short */
+.fs-side .fs-head h1[data-tip]::after { left: 0; right: auto; top: calc(100% + 4px); transform: none; white-space: normal; width: max-content; max-width: 100%; font-size: 12px; line-height: 1.35; }
+@media (hover: hover) and (pointer: fine) { .fs-head h1[data-tip]:hover::after { display: block; animation: tip-in .12s ease-out .6s both; } }
+.fs-head .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; }
+.fs-head .sub > .pill, .fs-head .sub > .chip, .fs-head .sub > .s-tsrc, .fs-head .sub > .head-sg { display: inline-flex; align-items: center; box-sizing: border-box; height: 22px; line-height: 1; margin: 0; padding-top: 1px; padding-bottom: 0; vertical-align: middle; }
+.fs-head .sub > .s-tsrc { margin-left: 2px; font-size: 12px; color: var(--muted); }
+.fs-repo { position: relative; }
+.fs-side .fs-repo[data-tip]::after { left: 0; right: auto; top: calc(100% + 4px); transform: none; white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
+@media (hover: hover) and (pointer: fine) { .fs-repo[data-tip]:hover::after { display: block; animation: tip-in .12s ease-out .5s both; } }
+@media (prefers-reduced-motion: reduce) { .fs-hacts [data-tip]::after, .fs-head h1[data-tip]::after, .fs-repo[data-tip]::after { animation: none !important; } }
 .fs-where { display: flex; align-items: center; gap: 6px; margin: 2px 0; font-size: 13px; color: var(--text2); min-width: 0; }
 .fs-where span:not(.faint) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .fs-where .ic { flex: none; width: 14px; height: 14px; opacity: .7; }
@@ -5003,3 +5050,85 @@ html.nav-drawer-open, html.nav-drawer-open body { overflow: hidden; }
 .nd-cur { flex: none; font-size: 12px; font-weight: 500; color: var(--muted); }
 .nd-n { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 20px; min-width: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 650; line-height: 1; }
 .nd-item:focus-visible, .nd-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+
+/* 2026-10-29 Needs you on a phone (beta feedback: "statically positioned so it's hard to read the message
+   before it"). In full screen it sits between the thread and the composer: at most 45% of the height you can
+   see (the visual viewport, so the keyboard counts; 40vh measured the whole layout height on iOS), folds to a
+   one-line bar, and on a phone it leaves the question and Claude's last lines to the thread right above it. */
+.live-box.full .lf-needs { max-height: min(40vh, calc(var(--lf-h, 100dvh) * .45)); overscroll-behavior: contain; }
+.needs-strip .needs-fold, .needs-strip .needs-peek { display: none; }
+.lf-needs .needs-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.lf-needs .needs-head h2 { flex: none; }
+.lf-needs .needs-strip .needs-fold { display: inline-flex; align-items: center; justify-content: center; flex: none; margin-left: auto; width: 44px; height: 44px; margin-top: -10px; margin-bottom: -10px; margin-right: -8px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text2); cursor: pointer; }
+.lf-needs .needs-fold .ic { width: 18px; height: 18px; }
+@media (hover: hover) and (pointer: fine) { .lf-needs .needs-strip .needs-fold { width: 32px; height: 32px; margin-top: -6px; margin-bottom: -6px; margin-right: -4px; } .lf-needs .needs-fold:hover { background: var(--subtle); color: var(--text); } }
+.lf-needs .needs-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.lf-needs .needs-strip.folded .needs-fold .ic { transform: rotate(180deg); }
+.lf-needs .needs-strip.folded .needs-list { display: none; }
+.lf-needs .needs-strip.folded .needs-peek { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); font-size: 13.5px; }
+.lf-needs .needs-strip.folded { padding-top: 8px; padding-bottom: 8px; }
+@media (max-width: 600px) {
+  .live-box.full .lf-needs .needs-strip { margin: 6px 0 0; padding: 8px 10px 10px; }
+  .live-box.full .lf-needs .needs-strip.folded { padding-top: 6px; padding-bottom: 6px; }
+  .live-box.full .lf-needs .need-question, .live-box.full .lf-needs .need-ctx, .live-box.full .lf-needs .need-head { display: none; } /* the thread right above shows them */
+  .live-box.full .lf-needs .need { padding: 0; border: 0; background: none; box-shadow: none; }
+  .live-box.full .lf-needs .quick-replies { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); padding-right: 24px; } /* one row that scrolls; the fade says there's more */
+  .live-box.full .lf-needs .quick-replies .qr { flex: none; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .live-box.full .lf-needs .need-actions { display: none; } /* Go opens the Mac's terminal; the bar's >_ is the phone's way there */
+  /* answering in Needs you with the keyboard up: one box, not two */
+  html.lf-kb.ny-typing .live-box.full > .composer { display: none; } /* ny-typing: app.js, kept a beat after the box loses focus so a tap lands where it was aimed */
+}
+@media (prefers-reduced-motion: no-preference) { .lf-needs .needs-fold .ic { transition: transform .15s ease; } }
+
+/* 2026-10-29 the composer's suggestion on a touch screen (iOS has no Tab key; a long one was cut off):
+   a chip above the box. "↳ Use suggestion" + its words (2 lines; ⌄ or a long-press shows all), ✕ dismisses. */
+.sug-chip { display: flex; align-items: stretch; gap: 2px; margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); min-height: 44px; box-sizing: border-box; }
+.sug-chip button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.sug-chip button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.sug-use { flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 5px 4px 5px 12px; text-align: left; border-radius: 11px 0 0 11px; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
+.sug-l { font-size: 11.5px; line-height: 1.2; font-weight: 600; color: var(--accent); }
+.sug-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.3; color: var(--text2); overflow-wrap: anywhere; }
+.sug-chip.open .sug-text { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
+.sug-more, .sug-x { flex: none; width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--text2); }
+.sug-x { border-radius: 0 11px 11px 0; }
+.sug-more[hidden] { display: none; }
+.sug-more .ic, .sug-x .ic { width: 18px; height: 18px; }
+.sug-chip.open .sug-more .ic { transform: rotate(180deg); }
+@media (hover: hover) and (pointer: fine) { .sug-use:hover, .sug-more:hover, .sug-x:hover { background: var(--subtle); } }
+@media (prefers-reduced-motion: no-preference) { .sug-more .ic { transition: transform .15s ease; } }
+/* desktop: the words cut short, the Tab key always shown; a long one gets ⋯ with all of it in its tip */
+.ghost { display: flex; align-items: flex-start; gap: 0; }
+.ghost .ghost-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ghost .ghost-k { flex: none; }
+.ghost .ghost-all { flex: none; margin-left: 4px; padding: 0 5px; border-radius: 5px; pointer-events: auto; cursor: help; line-height: 16px; font-size: 12px; border: 1px solid var(--line-strong); align-self: center; }
+.ghost .ghost-k { align-self: center; }
+
+/* 0.9.18 Hosted by (ui/hosted-by.js): which machine serves the board; state by shape + word */
+.hostedby { min-width: 0; }
+.hosts { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
+.host-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 44px; box-sizing: border-box; }
+.host-row + .host-row { border-top: 1px solid var(--line); }
+.host-row.is-host { background: var(--bg2); }
+.host-shape { width: 16px; text-align: center; flex: none; font-size: 14px; line-height: 1; color: var(--text2); }
+.host-row.on .host-shape { color: var(--text); }
+.host-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
+.host-sub { flex-basis: 100%; font-size: 12.5px; }
+.host-chip { font-weight: 600; }
+.pref-chip { border-style: dashed; }
+.host-make { flex: none; min-height: 44px; }
+.host-pref { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
+.hostedby > .hint { margin-top: 8px; }
+.host-pref-label { font-size: 12.5px; color: var(--text2); margin-right: 4px; }
+.hp-opt { border: 1px solid var(--line); background: none; color: var(--text2); border-radius: 8px; padding: 0 12px; min-height: 44px; font: inherit; font-size: 13px; cursor: pointer; }
+.hp-opt.on { border-color: var(--accent); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
+.hp-opt.on::before { content: '✓ '; }
+.hp-opt:disabled { opacity: .55; cursor: default; }
+.hp-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+@media (pointer: fine) { .host-row { min-height: 36px; padding: 6px 12px; } .host-make, .hp-opt { min-height: 30px; } }
+.relay-hosts { list-style: none; margin: 14px 0 0; padding: 0; text-align: left; }
+.relay-host { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; min-height: 44px; box-sizing: border-box; }
+.relay-host + .relay-host { border-top: 1px solid var(--line); }
+.relay-host-shape { width: 16px; text-align: center; flex: none; }
+.relay-host-word { color: var(--text2); font-size: 13px; flex: 1 0 auto; }
+.relay-use { min-height: 44px; margin-left: auto; }
+@media (pointer: fine) { .relay-host { min-height: 36px; } .relay-use { min-height: 30px; } }

package/ui/app.js

@@ -34,6 +34,8 @@ import { boardEmptyHtml, boardIsBrandNew, timelineEmptyHtml, digestFirstHtml, cp
 import { copyIconClick } from './copy-icon.js' // 0.9.15 Copy branch name // 0.9.9 the session page's info cards
 import { mountUpdateBar, takeCarry } from './update-bar.js' // 0.9.8 "Leftoff updated · Refresh"
 import { paintKeyed, forgetPaint, UNITS as PAINT_UNITS } from './keyed-paint.js'
+import { hostedByHtml } from './hosted-by.js' // 0.9.18 Settings → Use from anywhere → Hosted by
+import { createScrollKeep } from './scroll-keep.js' // 0.9.18 every scroll box keeps its place through redraws
 import { needsLine, needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer, turnsHtml, dismissedHtml, askDocked, askDockHtml, askSlimHtml, askRows, askBottom } from './needs.js'
 import { SUMMARY_EXAMPLES, LENGTH_CHOICES } from './summary-examples.js'
 import { mdInline, renderSection } from './changelog-md.js'
@@ -275,6 +277,10 @@ document.addEventListener('touchend', (e) => {
 applyNav()
 
 const $app = document.getElementById('app')
+// 0.9.18 (ui/scroll-keep.js): a redraw anywhere (a live update, a poll) puts every scroll box, the focus
+// and an open <details> back where you had them; the app's own positioning (stick to bottom, a new page) wins
+const scrollKeep = createScrollKeep()
+scrollKeep.start()
 // 0.9.17 Walk me through it: which session shows it, and its view (this page only; the open one survives a reload)
 const wtUi = { sid: null, scope: new Map(), view: 'story', filter: 'all', data: new Map(), loading: new Set(), error: new Map(), cur: new Map(), code: new Set(), groups: new Set(), pending: [], ask: '', node: null, sig: '', restored: false, fellBack: new Set() }
 // 0.9.8: the pulsing dots (Live while Claude works, active, a blocking ask) keep their beat through the board's redraws
@@ -2376,6 +2382,10 @@ async function viewSession(id) {
 // 0.9.15 (ui/back-line.js): how long you'd been away when this visit first opened
 // each session, read before caughtUp folds its card; a new visit starts over.
 const openAway = new Map()
+// 2026-10-29 (Joel: a 30-minute-old session said "Away 12h"): a session that started
+// while you were away reads at least "day" depth (ui/away.js), but its label says
+// how long it has really gone unseen: never more than the session's own age.
+function awayShownMs(s, ms) { const st = Date.parse((s && s.startedAt) || ''); return Number.isFinite(st) && ms != null ? Math.max(60000, Math.min(ms, Date.now() - st)) : ms }
 function noteOpenAway(s) { if (s && !openAway.has(s.id)) openAway.set(s.id, presence.forSession(s).ms) }
 function backDismissed(id) { try { return sessionStorage.getItem(BACK_PREFIX + id) } catch { return null } }
 function backHtml(s) { noteOpenAway(s); return backLineHtml(s, backLine(s, { awayMs: openAway.get(s.id), dismissed: backDismissed(s.id) }), { esc, icon, ago }) }
@@ -2523,16 +2533,25 @@ function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {
   // 0.9.17 Walk me through it: in place of the chat (the bar and tabs stay); ‹ Chat goes back
   if (wtUi.sid === s.id && isFullLive(s.id) && !s.agent) center = liveOpenHtml(s, liveV, '') + '<div class="wt-mount" id="wtMount" data-sid="' + esc(s.id) + '"></div></section>'
   // ---- the sidebar
+  // 2026-10-28 one aligned head row: › hide, then the title (two lines at most, the whole
+  // title in its tip), then the actions in one cluster on the first line: ✎ Rename and ⋯
+  // (Regenerate title is the ⋯'s first row; the ↻ beside the chat's own title stays). While a new
+  // title is being made, its spinner sits in the cluster.
+  const fullTitle = sessionTitle(s)
   const title = 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 || '') + '" data-tip="Rename">' + titleHtml(sessionTitle(s), esc) + '</span></h1>' + retitleButtonHtml(s, { esc, icon, reach: reachOf(s), busy: retitling.has(s.id) }) + '<button type="button" class="rename-pen" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" aria-label="Rename" data-tip="Rename">' + icon('pencil') + '</button></div>'
-    : '<div class="title s-title"><h1>' + titleHtml(sessionTitle(s), esc) + '</h1></div>'
+    ? '<div class="title s-title" data-id="' + esc(s.id) + '"><h1 data-tip="' + esc(fullTitle) + '"><span class="s-title-text" role="button" tabindex="0" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" aria-label="' + esc('Rename: ' + fullTitle) + '">' + titleHtml(sessionTitle(s), esc) + '</span></h1></div>'
+    : '<div class="title s-title"><h1 data-tip="' + esc(fullTitle) + '"><span class="s-title-text">' + titleHtml(sessionTitle(s), esc) + '</span></h1></div>'
   const menu = fsMenuItems(s, mine)
+  const busyTitle = canRename && retitling.has(s.id) ? retitleButtonHtml(s, { esc, icon, reach: reachOf(s), busy: true, cls: 'fs-hact' }) : ''
   const more = menu ? '<span class="more-wrap s-more">' + moreMenu(s, menu, { project: false, title: s.title || 'This session', tip: true }) + '</span>' : ''
+  const acts0 = busyTitle + (canRename ? '<button type="button" class="rename-pen fs-hact" data-action="rename" data-id="' + esc(s.id) + '" data-title="' + esc(s.title || '') + '" aria-label="Rename" data-tip="Rename">' + icon('pencil') + '</button>' : '') + more
   const where = [s.repoLabel || s.repoName || (s.repo && s.repo.name) || '', branch || ''].filter(Boolean)
-  const head = '<div class="pagehead s-head fs-head" data-sid="' + esc(s.id) + '"><div class="fs-head-row">' + title + more +
-    '<button type="button" class="fs-side-x" data-action="fs-side" aria-expanded="true" aria-controls="fsSide" aria-label="Hide the session panel" data-tip="Hide panel (⌘\\)">' + icon('chevron-right') + '</button></div>' +
+  const wherePath = (s.repo && (s.repo.worktree || s.repo.root)) || s.cwd || ''
+  const head = '<div class="pagehead s-head fs-head" data-sid="' + esc(s.id) + '"><div class="fs-head-row">' +
+    '<button type="button" class="fs-side-x" data-action="fs-side" aria-expanded="true" aria-controls="fsSide" aria-label="Hide the session panel" data-tip="Hide panel (⌘\\)">' + icon('chevron-right') + '</button>' +
+    title + (acts0 ? '<div class="fs-hacts">' + acts0 + '</div>' : '') + '</div>' +
     '<div class="sub">' + glyphFor(s, { cls: 'head-sg' }) + statusPill(s) + liveBadge(s) + (isDone(s) ? doneChipHtml(s, { icon, esc }) : archivedChipHtml(s)) + projChip(s) + wtChips(s) + (s.titleSource ? '<span class="s-tsrc">' + esc(s.titleSource === 'prompt' ? 'named from the first prompt' : s.titleSource === 'fallback' ? 'named from your prompt' : s.titleSource + ' title') + '</span>' : '') + '</div>' +
-    (where.length ? '<div class="fs-where">' + icon('folder') + '<span>' + esc(where.join(' · ')) + '</span></div>' : '') +
+    (where.length ? '<div class="fs-where fs-repo" data-tip="' + esc(wherePath ? wherePath + (branch ? ' · ' + branch : '') : where.join(' · ')) + '">' + icon('folder') + '<span>' + esc(where.join(' · ')) + '</span></div>' : '') +
     '<div class="fs-where">' + icon('monitor') + '<span>' + esc(mEmoji(s.machine) + ' ' + s.machine) + '</span><span class="faint">· ' + esc(ago(s.lastActivityAt)) + '</span></div>' + '</div>'
   // the prominent actions: Catch me up (after time away, "Away 3h · Catch me up"), Checkpoint now
   noteOpenAway(s)
@@ -2541,7 +2560,7 @@ function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {
   const cu = catchupButtonHtml(s, { esc, icon, busy: !!scuOf(s.id).loading })
   // 0.9.17: after time away the label is "Away 7h · Catch me up" on one line where the panel has room,
   // else "Catch me up" with "Away 7h" as a small line under it (app.css, the fsside container); never clipped
-  const cuBtn = cu ? cu.replace('class="btn scu-btn"', 'class="btn ' + (away ? 'primary ' : '') + 'scu-btn fs-cu" data-pop="cu"' + (away ? ' data-away="1"' : '')).replace('Catch me up</button>', '<span class="fs-cu-l">' + (away ? '<span class="fs-away">' + esc(shortAway(awayWords(awayMs))) + '<span class="fs-away-dot"> · </span></span>' : '') + '<span class="fs-cu-v">Catch me up</span></span></button>') : ''
+  const cuBtn = cu ? cu.replace('class="btn scu-btn"', 'class="btn ' + (away ? 'primary ' : '') + 'scu-btn fs-cu" data-pop="cu"' + (away ? ' data-away="1"' : '')).replace('Catch me up</button>', '<span class="fs-cu-l">' + (away ? '<span class="fs-away">' + esc(shortAway(awayWords(awayShownMs(s, awayMs)))) + '<span class="fs-away-dot"> · </span></span>' : '') + '<span class="fs-cu-v">Catch me up</span></span></button>') : ''
   const wtOn = wtUi.sid === s.id
   const wtBtn = s.agent ? '' : walkButtonHtml(s, { esc, icon, on: wtOn, size: wtSizeOf(s.id) }) // 0.9.17; 0.9.18: a diff glyph, the size under it, a popover (ui/walk-pop.js)
   // 0.9.17: Catch me up and Walk me through it side by side; Checkpoint now under them
@@ -2583,7 +2602,7 @@ function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {
   side += answeredList(s)
   const foot = '<div class="fs-foot"><button type="button" class="btn fs-term" data-term-toggle aria-label="Terminal" data-tip="Terminal (⌃`)">' + icon('terminal') + 'Terminal</button>' + termTabButtonHtml(s) + '</div>' // Open terminal (a window on the Mac): the head's ⋯
   const label = fsPeekWords(s)
-  return center + fsSideHtml({ id: s.id, side, foot, label, away: away ? shortAway(awayWords(awayMs)) : '', cpCount: s.checkpointCount || 0, cu: !!cu, wt: !s.agent, look: s.lookCount || 0, collapsed: fsSide.collapsed(), sheet: fsSheetUi.open === s.id, width: fsWidth.shown(fsViewport()), viewport: fsViewport() }, { esc, icon })
+  return center + fsSideHtml({ id: s.id, side, foot, label, away: away ? shortAway(awayWords(awayShownMs(s, awayMs))) : '', cpCount: s.checkpointCount || 0, cu: !!cu, wt: !s.agent, look: s.lookCount || 0, collapsed: fsSide.collapsed(), sheet: fsSheetUi.open === s.id, width: fsWidth.shown(fsViewport()), viewport: fsViewport() }, { esc, icon })
 }
 // The middle for a session with no Live thread: the same full-screen frame and bar, and what it can say there.
 // "Away 3 hours" → "Away 3h", so Catch me up and Checkpoint now share one row
@@ -2608,6 +2627,8 @@ function fsMenuItems(s, mine) {
   if (reachOf(s) === 'away') return awayMenuItems(s)
   const pinned = !!s.pinned
   return [
+    // 2026-10-28: Regenerate title is the ⋯'s first row (out of the head row, so ✎ and ⋯ line up; the chat's own ↻ stays)
+    mine && !ownerOffline(s) ? { action: 'title-auto', label: 'Regenerate title', icon: 'refresh-cw', attrs: { 'data-id': s.id, 'data-tip': RETITLE_TIP } } : null,
     { action: 'fs-timeline', label: 'Open in Timeline', icon: 'history', attrs: { 'data-id': s.id } },
     { action: 'resume', label: 'Copy resume command', icon: 'copy', attrs: { 'data-id': s.id } },
     s.liveResumeCommand ? { action: 'copy-cmd', label: 'Copy Live resume', icon: 'copy', attrs: { 'data-cmd': s.liveResumeCommand } } : null,
@@ -2629,17 +2650,63 @@ function paintGhost(sid) {
   const s = state.sessions.find((x) => x.id === sid)
   const g = ghostUi.get(sid)
   const show = ghostShows(g, { value: ta.value, idle: ghostIdle(s) }) && !ta.disabled
+  // 2026-10-29 (beta feedback: iOS has no Tab key, and a long suggestion was cut off): on a touch
+  // screen it is a chip above the box instead of grey text in it (paintSugChip)
+  const touch = isTouchUi(window.matchMedia)
+  paintSugChip(box, sid, show && touch ? g : null)
   let el = box.querySelector('.ghost')
-  if (!show) { if (el) el.hidden = true; box.classList.remove('has-ghost'); return }
+  if (!show || touch) { if (el) el.hidden = true; box.classList.remove('has-ghost'); if (!show) ta.removeAttribute('aria-description'); return }
   if (!el) { el = document.createElement('div'); el.className = 'ghost'; el.setAttribute('aria-hidden', 'true'); box.appendChild(el) }
   const cs = getComputedStyle(ta)
   Object.assign(el.style, { left: ta.offsetLeft + 'px', top: ta.offsetTop + 'px', width: ta.offsetWidth + 'px', height: ta.offsetHeight + 'px', padding: cs.padding, font: cs.font, lineHeight: cs.lineHeight, inset: 'auto' })
-  el.textContent = g.text
+  el.textContent = ''
+  // the words, then the Tab key (always visible: the words are cut, not the key); a long one gets ⋯ with all of it in its tip
+  const t = document.createElement('span'); t.className = 'ghost-t'; t.textContent = g.text; el.appendChild(t)
   const k = document.createElement('span'); k.className = 'ghost-k'; k.textContent = 'Tab'; el.appendChild(k)
   el.hidden = false
   box.classList.add('has-ghost')
+  if (t.scrollWidth > t.clientWidth + 1) {
+    const all = document.createElement('span'); all.className = 'ghost-all'; all.textContent = '⋯'; all.dataset.tip = g.text
+    el.insertBefore(all, k)
+  }
   ta.setAttribute('aria-description', 'Suggested: ' + g.text + '. Press Tab to use it.')
 }
+// The suggestion on a touch screen: a row above the composer. "↳ Use suggestion" and its words
+// (two lines; ⌄ or a long-press shows all of it) put it in the box to edit; ✕ dismisses it.
+// 44px targets. Never sent on its own.
+function paintSugChip(box, sid, g) {
+  const host = box.parentNode
+  let chip = host && host.querySelector(':scope > .sug-chip[data-sid="' + CSS.escape(sid) + '"]')
+  if (!g) { if (chip) chip.remove(); return }
+  if (chip && chip.dataset.text === g.text) return
+  if (chip) chip.remove()
+  chip = document.createElement('div')
+  chip.className = 'sug-chip'; chip.dataset.sid = sid; chip.dataset.text = g.text
+  chip.setAttribute('role', 'group'); chip.setAttribute('aria-label', 'Suggested message')
+  chip.innerHTML = '<button type="button" class="sug-use"><span class="sug-l"><span aria-hidden="true">↳ </span>Use suggestion</span><span class="sug-text"></span></button>' +
+    '<button type="button" class="sug-more" aria-expanded="false" aria-label="Show all of the suggestion" data-tip="Show all">' + icon('chevron-down') + '</button>' +
+    '<button type="button" class="sug-x" aria-label="Dismiss suggestion" data-tip="Dismiss">' + icon('x') + '</button>'
+  chip.querySelector('.sug-text').textContent = g.text
+  host.insertBefore(chip, box)
+  const text = chip.querySelector('.sug-text'), more = chip.querySelector('.sug-more'), use = chip.querySelector('.sug-use')
+  more.hidden = text.scrollHeight <= text.clientHeight + 1
+  const expand = (on) => { chip.classList.toggle('open', on); more.setAttribute('aria-expanded', String(on)); more.setAttribute('aria-label', on ? 'Show less of the suggestion' : 'Show all of the suggestion'); more.dataset.tip = on ? 'Show less' : 'Show all' }
+  more.addEventListener('click', () => expand(!chip.classList.contains('open')))
+  let press = 0, long = false
+  use.addEventListener('pointerdown', (e) => { if (e.pointerType === 'mouse') return; long = false; clearTimeout(press); press = setTimeout(() => { long = true; if (!more.hidden) expand(true) }, 500) })
+  for (const t of ['pointerup', 'pointercancel', 'pointerleave']) use.addEventListener(t, () => clearTimeout(press))
+  use.addEventListener('contextmenu', (e) => e.preventDefault())
+  use.addEventListener('click', (e) => {
+    if (long) { long = false; e.preventDefault(); return } // a long-press shows it, it doesn't use it
+    const ta = box.querySelector('textarea.composer-input'), cur = ghostUi.get(sid)
+    if (!ta || !cur) return
+    ta.value = cur.text
+    cur.cleared = true
+    ta.dispatchEvent(new Event('input', { bubbles: true })) // the draft is kept, the box fits, the ↑ lights
+    paintGhost(sid)
+  })
+  chip.querySelector('.sug-x').addEventListener('click', () => { const cur = ghostUi.get(sid); if (cur) cur.cleared = true; paintGhost(sid) })
+}
 async function loadGhost(s, v) {
   if (!s || s.agent || !isFullLive(s.id) || state.mayAnswer === false) return
   const last = lastReply(v && !v.error ? v.messages : null)
@@ -2698,7 +2765,40 @@ const isLive = (s) => !!(s && s.liveLink && s.liveLink.on)
 function sessionNeedsStrip(s) {
   // 0.9.14: an asleep Mac's ask isn't live: what it was, muted, and no Allow / Deny
   if (ownerOffline(s)) return '<section class="needs-strip one off-was" aria-label="Was waiting on you"><p class="faint">' + icon('wifi-off') + ' Was waiting on you when ' + esc(s.machine) + ' went offline' + (needsLine(s.needsYou) ? ': “' + esc(needsLine(s.needsYou)) + '”' : '') + '. You can answer once it’s back.</p></section>'
-  return '<section class="needs-strip one" aria-label="Needs you"><div class="needs-head"><h2>Needs you</h2></div><div class="needs-list">' + needPanel({ ...s.needsYou, session: s }, needOpts({ compact: true })) + '</div></section>' }
+  // 2026-10-29 (beta feedback: on a phone the block covered the message you're answering): it folds to a one-line bar
+  // (the question's words) and back; the choice is kept per session through repaints (needsFold)
+  const folded = needsFold.has(s.id)
+  const peek = needsLine(s.needsYou) || ''
+  return '<section class="needs-strip one' + (folded ? ' folded' : '') + '" aria-label="Needs you"><div class="needs-head"><h2>Needs you</h2>' + (peek ? '<span class="needs-peek" aria-hidden="' + !folded + '">' + esc(peek) + '</span>' : '') +
+    '<button type="button" class="needs-fold" data-action="needs-fold" data-id="' + esc(s.id) + '" aria-expanded="' + !folded + '" aria-label="' + (folded ? 'Show Needs you' : 'Fold Needs you to a bar') + '" data-tip="' + (folded ? 'Show' : 'Fold to a bar') + '">' + icon('chevron-down') + '</button></div><div class="needs-list">' + needPanel({ ...s.needsYou, session: s }, needOpts({ compact: true })) + '</div></section>' }
+const needsFold = new Set() // session ids whose Needs-you block is folded to its bar (this page only)
+// Typing a reply in full screen's Needs you with the keyboard up: the Live composer under it steps aside (one box,
+// not two; app.css). It comes back a beat after the box loses focus, so the layout doesn't move under the tap that took focus away.
+{
+  let t = 0
+  document.addEventListener('focusin', (e) => { if (e.target && e.target.closest && e.target.closest('.live-box.full .lf-needs textarea')) { clearTimeout(t); document.documentElement.classList.add('ny-typing') } })
+  document.addEventListener('focusout', (e) => { if (e.target && e.target.closest && e.target.closest('.live-box.full .lf-needs textarea')) { clearTimeout(t); t = setTimeout(() => { if (!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.live-box.full .lf-needs textarea'))) document.documentElement.classList.remove('ny-typing') }, 400) } })
+}
+function needsFoldClick(btn) {
+  const sid = btn.dataset.id
+  const on = !needsFold.has(sid)
+  if (on) needsFold.add(sid); else needsFold.delete(sid)
+  const strip = btn.closest('.needs-strip')
+  if (strip) strip.classList.toggle('folded', on)
+  btn.setAttribute('aria-expanded', String(!on))
+  btn.setAttribute('aria-label', on ? 'Show Needs you' : 'Fold Needs you to a bar')
+  btn.dataset.tip = on ? 'Show' : 'Fold to a bar'
+  const peek = strip && strip.querySelector('.needs-peek'); if (peek) peek.setAttribute('aria-hidden', String(!on))
+}
+// 2026-10-29: the full-screen thread keeps its end in view when the room under it changes (the keyboard,
+// Needs you folding or growing): a thread that was at its bottom stays there; one you scrolled up is left alone.
+function pinLogEnd(ol) {
+  if (!ol || ol._pinEnd || typeof ResizeObserver !== 'function') return
+  const atEnd = () => ol.scrollHeight - ol.clientHeight - ol.scrollTop <= 24
+  ol._pinEnd = { at: atEnd() }
+  ol.addEventListener('scroll', () => { ol._pinEnd.at = atEnd() }, { passive: true })
+  new ResizeObserver(() => { if (ol._pinEnd.at && ol.isConnected) ol.scrollTop = ol.scrollHeight }).observe(ol)
+}
 // 0.9.8 polish: the thread is ui/live-view.js (entries, status, sticking to the
 // bottom); Claude's answer is the session's own (markdown, like the terminal).
 const liveKeeper = createLiveKeeper()
@@ -2964,6 +3064,7 @@ function fullAfterRender(sid) {
     paintLfTabs()
     const ol = box.querySelector('.live-log')
     if (ol && ol._stick !== false) ol.scrollTop = ol.scrollHeight
+    pinLogEnd(ol)
   } else if (fullUi.back === sid) {
     fullUi.back = null
     const b = document.getElementById('live')
@@ -3560,6 +3661,7 @@ async function refreshLive(reason) {
         const r = liveKeeper.after(box)
         hydrateAttThumbs()
         if (r) liveJumpButton(r.thread, liveKeeper.unseen)
+        if (box.classList.contains('full')) pinLogEnd(fresh.querySelector('.live-log'))
       }
     }
     const c = sessionCache.get(id); if (c) c.live = v
@@ -4889,6 +4991,8 @@ function anywhereSection(r, adv = []) {
   if (r.enabled) {
     const st = r.connected ? '<span class="chip ok">Connected' + (r.latencyMs != null ? ' · ' + esc(r.latencyMs) + ' ms' : '') + '</span>' : '<span class="chip warn">' + (r.connecting && !r.problem ? 'Connecting…' : 'Not connected') + '</span>'
     h += '<label>Relay</label><div class="relaystat">' + st + (r.problem ? '<div class="hint warnish">' + esc(r.problem) + '</div>' : '') + '</div>'
+    // 0.9.18 Hosted by (ui/hosted-by.js): which machine serves the board, and swapping it
+    h += hostedByHtml(r.hosting, { esc, canChange: local || !!v.relay || !!v.device, viewing: window.leftoffRelay ? window.leftoffRelay.mac : null })
     if (r.boardUrl) h += '<label>Address</label><div class="remote-urls"><span class="chip mono">' + esc(r.boardUrl) + '</span><button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(r.boardUrl) + '">Copy</button></div>'
     // Pairing from a paired phone follows Trust my paired devices (0.6.6).
     const mayPair = v.mayPair != null ? !!v.mayPair : local
@@ -7366,13 +7470,13 @@ document.addEventListener('keydown', (e) => { const b = e.target.closest && e.ta
       tip.classList.add('on')
     }, delay)
   }
-  const tipped = (e) => e.target.closest && e.target.closest('#tabStrip [data-tip], #tabPager [data-tip], #lfTabs [data-tip], .sg[data-tip], .lo-act-x[data-tip], .repos.projects [data-tip], .lo-sheet-x[data-tip], .proj-edit[data-tip], .feed-why[data-tip], .term-menu [data-tip], #wt [data-tip]') // 0.9.18 everything in the walkthrough (its header's icon buttons, the slide nav, file status glyphs); before: the file map's eye, step number and long folders; a step header's files and (cut short) title the file map's eye, step number and long folders; a step header's files and (cut short) title // 0.9.12: the project chips, the sheet's ×, a project page's Edit
+  const tipped = (e) => e.target.closest && e.target.closest('#tabStrip [data-tip], #tabPager [data-tip], #lfTabs [data-tip], .sg[data-tip], .lo-act-x[data-tip], .repos.projects [data-tip], .lo-sheet-x[data-tip], .proj-edit[data-tip], .feed-why[data-tip], .term-menu [data-tip], #wt [data-tip], .ghost-all[data-tip], .sug-chip [data-tip], .lf-needs .needs-fold[data-tip]') // 0.9.18 everything in the walkthrough (its header's icon buttons, the slide nav, file status glyphs); before: the file map's eye, step number and long folders; a step header's files and (cut short) title the file map's eye, step number and long folders; a step header's files and (cut short) title // 0.9.12: the project chips, the sheet's ×, a project page's Edit
   document.addEventListener('pointerover', (e) => { const el = tipped(e); if (!el) { if (cur) hide() } else if (e.pointerType === 'mouse' && el !== cur) show(el, 350) })
   document.addEventListener('pointerout', (e) => { const el = tipped(e); if (el && el === cur && !el.contains(e.relatedTarget)) hide() })
   document.addEventListener('focusin', (e) => { if (wtRefocusing) return; const el = tipped(e); if (el && el.matches(':focus-visible')) show(el, 0); else if (cur) hide() })
   document.addEventListener('focusout', (e) => { if (tipped(e) === cur) hide() })
   for (const ev of ['pointerdown', 'hashchange', 'resize']) window.addEventListener(ev, hide, true)
-  window.addEventListener('scroll', () => { if (performance.now() >= wtQuietUntil) hide() }, true) // 0.9.18 not for a redraw putting the walkthrough's scroll back
+  window.addEventListener('scroll', () => { if (performance.now() >= wtQuietUntil && !scrollKeep.quiet()) hide() }, true) // 0.9.18 not for a redraw putting the walkthrough's scroll back
   document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && cur) hide() })
   // 0.9.18 touch: a long press shows the tip (the tap it ends with doesn't follow the link)
   let lp = 0, lpd = false
@@ -7390,7 +7494,7 @@ function wtStuck(sc) {
 }
 document.addEventListener('scroll', (e) => { const t = e.target; if (t && t.classList && t.classList.contains('wt-scroll')) wtStuck(t) }, true)
 // 0.9.18 Walk me through it and Catch me up explain themselves (ui/walk-pop.js): hover, focus, long-press, the (i)
-loPop = initPops({ esc, icon, contentFor: (kind, sid, el) => popContent(kind, { size: kind === 'wt' ? (wtSize.get(sid) || {}).data || null : null, away: !!(el && el.dataset.away) }) })
+loPop = initPops({ esc, icon, quiet: () => scrollKeep.quiet(), contentFor: (kind, sid, el) => popContent(kind, { size: kind === 'wt' ? (wtSize.get(sid) || {}).data || null : null, away: !!(el && el.dataset.away) }) })
 // Working in a session keeps its tab: a Live message, typing there, answering Claude there
 const promoteActive = () => { if (tabsUi.active && tabsUi.route === 's') { const m = promote(tabsUi.m, tabsUi.active); if (m !== tabsUi.m) { setTabs(m); paintTabs() } } }
 for (const ev of ['input', 'change', 'submit']) document.addEventListener(ev, (e) => { if (e.target && $app.contains(e.target) && e.target.type !== 'search') promoteActive() }, true)
@@ -8168,6 +8272,18 @@ document.addEventListener('click', async (ev) => {
       refreshHealth().catch(() => {})
       return render()
     }
+    // 0.9.18 Hosted by: Make host (now) and Preferred (Automatic or a machine)
+    if (action === 'relay-host' || action === 'relay-host-pref') {
+      const machine = btn.dataset.machine || null
+      const prefer = action === 'relay-host-pref'
+      btn.disabled = true
+      let hz
+      try { hz = await api('POST', '/v1/relay/host', { machine, prefer }) } catch (e) { btn.disabled = false; toast(e.message, 5000); return }
+      const now = hz && hz.host && hz.host.machine
+      toast(prefer ? (machine ? machine + ' is your preferred host' : 'Hosting is automatic') + (now ? ' · ' + now + ' hosts now' : '') : machine + ' hosts the board now')
+      if (window.leftoffRelay && window.leftoffRelay.useHost && now) window.leftoffRelay.useHost(now)
+      return render()
+    }
     if (action === 'relay-user') {
       const user = (document.getElementById('f-anywhere-user').value || '').trim().toLowerCase()
       await api('POST', '/v1/relay/enable', { user }); toast('Saved: ' + user + '.leftoff.dev'); return render()
@@ -8647,6 +8763,7 @@ document.addEventListener('click', async (ev) => {
     if (action === 'live-earlier') return liveEarlierClick(btn)
     if (action === 'quick-reply') return quickReplyClick(btn)
     if (action === 'need-more') return needMoreClick(btn)
+    if (action === 'needs-fold') return needsFoldClick(btn)
     if (action === 'need-dismiss') return needDismissClick(btn)
     // ---- To do and Files (0.7.0)
     if (action === 'todo-restore' || action === 'todo-restore-all') {
@@ -8749,7 +8866,7 @@ document.addEventListener('click', async (ev) => {
       if (action === 'title-auto') toast('Naming it from the latest messages…', 20000)
       await runRetitle(id, { api, busy: retitling, render, toast })
     } else if (action === 'rename') {
-      const box = btn.closest('.title')
+      const box = btn.closest('.title') || (btn.closest('.fs-head') && btn.closest('.fs-head').querySelector('.title')) // the panel's ✎ sits in the head's action cluster
       if (!box || box.querySelector('input')) return
       const current = s ? s.title || '' : btn.dataset.title || ''
       box.innerHTML = '<input value="' + esc(current) + '" aria-label="Session title" maxlength="120" enterkeyhint="done">' +

package/ui/hosted-by.js

@@ -0,0 +1,50 @@
+// 0.9.18 Hosted by (Settings → Use from anywhere): which of your machines serves
+// <user>.leftoff.dev. The relay decides (relay/src/hosting.js): your preferred host
+// whenever it's online, else the one already hosting, else an online one (Macs
+// first). Here: each machine with its state by shape and word, the host marked,
+// "Make host" per online machine, and Preferred (Automatic or a machine).
+// Pure (no DOM), so the check and the unit tests render it directly.
+const STATE = {
+  online: ['●', 'Online'],
+  not_answering: ['◐', 'Not answering'],
+  reconnecting: ['◌', 'Reconnecting'],
+  asleep: ['○', 'Offline'],
+}
+export function hostState(m) { return STATE[m && m.state] || (m && m.online ? STATE.online : STATE.asleep) }
+const kind = (p) => (p === 'darwin' ? 'Mac' : p === 'linux' ? 'Linux' : p ? p : '')
+
+export function hostedByHtml(h, { esc = (s) => String(s == null ? '' : s), canChange = true, viewing = null } = {}) {
+  if (!h || !Array.isArray(h.macs) || !h.macs.length) return ''
+  let out = '<label>Hosted by</label><div class="hostedby" id="hostedBy">'
+  if (!h.supported) {
+    out += '<div class="hint nomt">Your relay serves the board from the machine that connected last. Choosing a host needs a relay update.</div></div>'
+    return out
+  }
+  const host = h.host || {}
+  const pref = host.preferred || null
+  out += '<ul class="hosts" role="list">'
+  for (const m of h.macs) {
+    const [shape, word] = hostState(m)
+    const isHost = m.machine === host.machine
+    const k = kind(m.platform)
+    out += '<li class="host-row' + (isHost ? ' is-host' : '') + (m.online ? ' on' : ' off') + '" data-machine="' + esc(m.machine) + '">' +
+      '<span class="host-shape" aria-hidden="true">' + shape + '</span>' +
+      '<span class="host-main"><b>' + esc(m.machine) + '</b>' + (isHost ? ' <span class="chip host-chip">Host</span>' : '') + (m.machine === pref ? ' <span class="chip pref-chip">Preferred</span>' : '') +
+      '<span class="faint host-sub">' + word + (k ? ' · ' + esc(k) : '') + (viewing && viewing === m.machine && !isHost ? ' · this browser' : '') + (m.serves === 0 ? ' · can’t open your paired browsers’ keys' : '') + '</span></span>'
+    if (canChange && !isHost) {
+      out += '<button type="button" class="btn sm host-make" data-action="relay-host" data-machine="' + esc(m.machine) + '"' + (m.online ? '' : ' disabled data-tip="' + esc(m.machine) + ' is offline: it can host once it’s online"') + '>Make host</button>'
+    }
+    out += '</li>'
+  }
+  out += '</ul>'
+  if (host.pending) out += '<div class="hint nomt host-pending">' + esc(host.pending.machine) + ' is back and takes over in a few seconds.</div>'
+  if (!host.machine) out += '<div class="hint nomt warnish">None of your machines is online. The first one to connect hosts.</div>'
+  // Preferred: a segmented choice, Automatic first
+  out += '<div class="host-pref" role="radiogroup" aria-label="Preferred host"><span class="host-pref-label">Preferred</span>'
+  const opt = (val, label, tip) => '<button type="button" role="radio" class="hp-opt' + ((pref || '') === val ? ' on' : '') + '" aria-checked="' + ((pref || '') === val ? 'true' : 'false') + '" data-action="relay-host-pref" data-machine="' + esc(val) + '" data-tip="' + esc(tip) + '"' + (canChange ? '' : ' disabled') + '>' + esc(label) + '</button>'
+  out += opt('', 'Automatic', 'Any online machine; a Mac before Linux, and the host stays put while it’s online')
+  for (const m of h.macs) out += opt(m.machine, m.machine, m.machine + ' hosts whenever it’s online; when it’s closed another machine takes over, and it takes back when it returns')
+  out += '</div>'
+  out += '<div class="hint">' + (pref ? esc(pref) + ' hosts whenever it’s online. ' : '') + 'When the host closes or loses its network, another online machine takes over within about half a minute. Phones and browsers stay paired.</div>'
+  return out + '</div>'
+}

package/ui/live-view.js

@@ -161,6 +161,7 @@ export function senderLabel(m) {
   if (m.from === 'claude') return m.agentName || 'Claude' // 0.9.17: an ended Codex session's answers say Codex
   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.origin === 'needs') return 'You · from Needs you' // 2026-10-29: a reply sent from a Needs-you card (its own words, not the transcript's form)
   if (m.history && !m.by) return 'You · board'
   const by = m.by || {}
   let device = by.device || null