@leftoff/cli 0.9.17-beta.7 → 0.9.17-beta.9

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

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

@@ -1672,7 +1672,9 @@ export function joinListLines(t) {
 // last error, edited files not yet committed) or empty.
 export function heuristicCheckpoint(messages, session = {}, { length = 'short', cwd } = {}) {
   const ms_ = (messages || []).map((m) => (m && m.role === 'user' && typeof m.text === 'string' && /<\/?channel\b/i.test(m.text) ? { ...m, text: stripChannel(m.text) } : m))
-  const lastUser = [...ms_].reverse().find((m) => m.role === 'user' && m.text && m.text.trim())
+  // 2026-10-29: Claude Code's own wrappers (<task-notification>, <system-reminder>…) aren't what you asked for,
+  // so they never become "Working on: “<task-notification>…”"
+  const lastUser = [...ms_].reverse().find((m) => m.role === 'user' && m.text && m.text.trim() && !NOT_A_PROMPT.test(m.text))
   const lastAssistant = [...ms_].reverse().find((m) => m.role === 'assistant' && m.text && m.text.trim())
   let lastError = null
   for (let i = ms_.length - 1; i >= 0 && !lastError; i--) {

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

@@ -5102,3 +5102,110 @@ html.nav-drawer-open, html.nav-drawer-open body { overflow: hidden; }
 .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; } }
+
+/* 2026-10-29 a calmer session panel (ui/side-fold.js): a slim pinned head, then the top open (Catch me up,
+   the newest checkpoint's Stopped + Next, PRs, To do), the rest one-line headers with counts, closed until opened. */
+.fs-side-in > .fs-head { position: sticky; top: -10px; z-index: 4; margin: -10px -16px 4px; padding: 10px 16px 0; background: var(--bg); }
+.fs-side.is-scrolled .fs-side-in > .fs-head { padding-top: 2px; box-shadow: 0 1px 0 var(--line); }
+.fs-side.is-scrolled .fs-head .s-title-text { -webkit-line-clamp: 1; line-clamp: 1; }
+.fs-side.is-scrolled .fs-head-row { margin: 0; }
+.fs-side.is-scrolled .fs-head .sub { flex-wrap: nowrap; overflow: hidden; margin: 0 0 2px; gap: 5px; }
+.fs-side.is-scrolled .fs-head .sub > * { flex: none; height: 20px; }
+.fs-side.is-scrolled .fs-head .sub > .s-tsrc { display: none; }
+@media (max-width: 600px) { .fs-side-in > .fs-head { position: static; margin: 0 0 4px; padding: 0; box-shadow: none; background: none; } } /* the sheet's own head (the peek) is what stays */
+.fs-fold { border-top: 1px solid var(--line); margin: 0; }
+.fs-fold > .fs-fold-h { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 2px; cursor: pointer; font-size: 13.5px; font-weight: 600; line-height: 1; color: var(--text2); border-radius: 6px; -webkit-tap-highlight-color: transparent; }
+@media (pointer: fine) { .fs-fold > .fs-fold-h { min-height: 34px; } }
+.fs-fold > .fs-fold-h::-webkit-details-marker { display: none; }
+.fs-fold > .fs-fold-h::marker { content: ''; }
+.fs-fold-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fs-fold-n { font-weight: 400; color: var(--muted); }
+.fs-fold-c { flex: none; width: 14px; height: 14px; color: var(--faint); transition: transform .15s ease; }
+.fs-fold[open] > .fs-fold-h .fs-fold-c { transform: rotate(90deg); }
+@media (hover: hover) { .fs-fold > .fs-fold-h:hover { color: var(--text); } }
+.fs-fold > .fs-fold-h:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.fs-fold-b { padding: 2px 0 12px; }
+.fs-fold-b > .sfiles > h2:first-child { display: none; }
+.fs-fold-b > .slists > h2:first-child { margin-top: 0; }
+.fs-fold-b > .park-row, .fs-fold-b > .spacepick { margin-top: 0; }
+.fs-fold.fs-fold-in { border-top: 0; margin-top: 6px; }
+.fs-fold.fs-fold-in > .fs-fold-h { font-weight: 500; font-size: 13px; color: var(--muted); }
+@media (prefers-reduced-motion: reduce) { .fs-fold-c { transition: none; } }
+/* the newest checkpoint: Stopped + Next; More holds the rest */
+.fs-cp-more > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
+@media (pointer: coarse) { .fs-cp-more > summary { min-height: 44px; } }
+.fs-cp-more[open] > summary { margin-bottom: 4px; }
+.files .files-more { display: contents; }
+.files .files-more > summary { list-style: none; display: inline-flex; align-items: center; height: 24px; line-height: 1; padding: 0 6px; font-size: 12px; cursor: pointer; color: var(--accent); }
+.files .files-more > summary::-webkit-details-marker { display: none; }
+.files .files-more[open] > summary { display: none; }
+.files .chip.mono { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* status history: one small shape per change; the word and time in its tip */
+.sstrip { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; padding: 2px 0; }
+.sstrip .ss { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; line-height: 1; font-size: 10px; border-radius: 4px; background: none; cursor: default; }
+.sstrip .ss:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+/* answered: the newest three, Show all N */
+.sanswered .answered { margin: 4px 0; }
+.answered-more > summary { list-style: none; display: inline-flex; align-items: center; min-height: 32px; font-size: 12.5px; cursor: pointer; color: var(--accent); }
+.answered-more > summary::-webkit-details-marker { display: none; }
+.answered-more[open] > summary { display: none; }
+@media (pointer: coarse) { .answered-more > summary { min-height: 44px; } }
+/* PRs: one compact row each (state, #, the title on one line); tap the title for the rest */
+.pr-compact .prrow { padding: 0 0 0 10px; gap: 6px; margin-bottom: 6px; min-height: 44px; }
+@media (pointer: fine) { .pr-compact .prrow { min-height: 34px; } }
+.pr-compact .prrow.open { padding-top: 8px; padding-bottom: 8px; align-items: flex-start; }
+.pr-compact .pr-main { flex: 1 1 auto; min-width: 0; }
+.pr-compact .pr-c1 { display: flex; align-items: center; gap: 7px; min-width: 0; height: 32px; font-size: 13px; line-height: 1; }
+.pr-compact .pr-c1 .pr-state, .pr-compact .pr-c1 .pr-num { flex: none; font-size: 12.5px; }
+.pr-compact .pr-c1 .pr-num { color: var(--muted); font-variant-numeric: tabular-nums; }
+.pr-compact .pr-title { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; }
+.pr-compact .pr-title-btn { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-weight: 500; color: var(--text); }
+.pr-compact .pr-meta { margin-top: 2px; font-size: 12px; }
+.pr-compact .pr-actions { margin: 0 -2px 0 0; }
+@media (pointer: fine) { .pr-compact .pr-actions .pr-ic { width: 32px; height: 32px; } }
+.sprs .pr-unfold { margin: 0 0 8px; }
+.sprs .pr-unfold > .pr-unsum { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; line-height: 1; padding: 0 10px; border: 1px dashed var(--line-strong); border-radius: 999px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
+@media (pointer: coarse) { .sprs .pr-unfold > .pr-unsum { height: 44px; } }
+.sprs .pr-unfold > .pr-unsum::-webkit-details-marker { display: none; }
+.sprs .pr-unfold > .pr-unsum:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.sprs .pr-unfold[open] > .pr-unsum { margin-bottom: 6px; }
+.sprs .pr-linkd > summary { list-style: none; display: inline-flex; align-items: center; min-height: 32px; font-size: 12.5px; cursor: pointer; color: var(--accent); }
+@media (pointer: coarse) { .sprs .pr-linkd > summary { min-height: 44px; } }
+.sprs .pr-linkd > summary::-webkit-details-marker { display: none; }
+.sprs .pr-linkd[open] > summary { display: none; }
+/* a path the board can't read: plain monospace, why in its tip (never a viewer that opens onto "not available") */
+.file-ref-off { font-family: var(--mono); font-size: .94em; color: var(--text2); cursor: default; overflow-wrap: anywhere; }
+code .file-ref-off { font-size: inherit; }
+.file-ref-off:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
+.fs-side-in > .wid { border-top: 1px solid var(--line); margin-top: 4px; }
+.fs-side-in > .wid .wid-toggle h2 { text-transform: none; letter-spacing: normal; font-size: 13.5px; font-weight: 600; color: var(--text2); }

package/ui/app.js

@@ -34,6 +34,7 @@ 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'
@@ -51,6 +52,8 @@ import { mountPush, paintPush } from './push.js' // 0.9.8 phone notifications
 import { createViewStore, viewRouteStep, fullHrefWith, notifyHash } from './full-mem.js' // 0.9.15 a session opens the way you left it, on this device
 import { TABS_KEY, layoutFor, parseStored, serialize, openTab, promote, remember, closeTab, neighbours, indexOf, sessionOfHash, keepHash, tabView, stripHtml, allTabsItems, openRowHtml, pagerHtml, swipeDir, fullTabsHtml, tabTarget, moveTabBefore, syncPins, legacyPins, isPinned } from './tabs.js'
 import { fsSideHtml, createSideStore, railHtml, createWidthStore, clampSideWidth, sideMax, SIDE_W_STEP, SIDE_W_DEFAULT, WIDE_MIN } from './fs-side.js'
+import { fileReach, gateFileRefs } from './file-reach.js' // 2026-10-29 a path links only when its file can be read
+import { createFoldStore, foldHtml, relPath, rootsOf, filesTouchedHtml, dropJunkCps, statusStripHtml, answeredHtml, whereWords } from './side-fold.js' // 2026-10-29 a calmer session panel
 import { walkthroughHtml, hydrateWalkthrough, fmToggle, eyeCountHtml, reviewedSet, stepAfter, visibleSteps, stepPos, toMarkdown, toHtmlDoc, exportName } from './semdiff.js' // 0.9.17 Walk me through it
 import { walkButtonHtml, sizeLineHtml, popContent, initPops } from './walk-pop.js' // 0.9.18 Walk me through it's size line and popover
 import { lastReply, ghostShows } from './ghost.js'
@@ -334,6 +337,8 @@ const ORDER = [
   ['stale', 'Stale'],
   ['ended', 'Ended today'],
 ]
+const sideFolds = createFoldStore(typeof localStorage !== 'undefined' ? localStorage : null) // 2026-10-29 the session panel's folds (ui/side-fold.js)
+let fsScrolled = null // the session panel scrolled past its head (its id): a redraw keeps the slim pinned head
 const LABEL = { needs_input: 'needs you', active: 'active', background: 'tasks running', waiting: 'waiting', dormant: 'dormant', stale: 'stale', ended: 'ended' }
 
 // ------------------------------------------------------------ helpers
@@ -467,14 +472,14 @@ const fmtCode = (x) => esc(x).replace(/`([^`]+)`/g, '<code>$1</code>')
 // The sections an informative / long checkpoint adds below the three lines (v0.4.6).
 const EXTRA_TITLES = [['decisions', 'Key decisions'], ['questions', 'Open questions'], ['files', 'Files touched'], ['didntWork', 'What didn’t work'], ['recap', 'Recap'], ['nextSteps', 'Next steps']]
 function hasExtras(cp) { return !!cp && EXTRA_TITLES.some(([k]) => (Array.isArray(cp[k]) ? cp[k].length : !!cp[k])) }
-function cpExtras(cp) {
+function cpExtras(cp, paths = null) {
   let h = ''
   for (const [k, title] of EXTRA_TITLES) {
     const v = cp[k]
     if (!v || (Array.isArray(v) && !v.length)) continue
     h += '<div class="cpx-sec cpx-' + k + '"><div class="cpx-h">' + esc(title) + '</div>'
     if (k === 'recap') h += '<p>' + fmtCode(v) + '</p>'
-    else if (k === 'files') h += '<ul>' + v.map((f) => '<li>' + (f.path ? '<code>' + esc(f.path) + '</code>' : '') + (f.path && f.why ? ' — ' : '') + fmtCode(f.why || '') + '</li>').join('') + '</ul>'
+    else if (k === 'files') h += '<ul>' + v.map((f) => '<li>' + (f.path ? '<code>' + esc(paths ? relPath(f.path, paths) : f.path) + '</code>' : '') + (f.path && f.why ? ' — ' : '') + fmtCode(f.why || '') + '</li>').join('') + '</ul>'
     else h += '<' + (k === 'nextSteps' ? 'ol' : 'ul') + '>' + v.map((x) => '<li>' + fmtCode(x) + '</li>').join('') + '</' + (k === 'nextSteps' ? 'ol' : 'ul') + '>'
     h += '</div>'
   }
@@ -485,7 +490,9 @@ function cpExtras(cp) {
 // md (0.9.5): the session page's full view renders a markdown checkpoint (a
 // model's write-up, ui/cp-text.js); everywhere else it's plain, a long one clamped.
 // rows (0.9.15, ui/away.js cardRows): which of Goal / Doing a card shows; omitted: all.
-function cpBlock(cp, { showWhen = true, more = false, open = false, md = false, rows = null } = {}) {
+// part (2026-10-29, the session panel's newest checkpoint): 'tail' is Stopped + Next only, 'head' Goal + Doing only.
+// paths: { roots, home } so a file reads relative to the session's repo (ui/side-fold.js relPath).
+function cpBlock(cp, { showWhen = true, more = false, open = false, md = false, rows = null, part = null, paths = null } = {}) {
   if (!cp) return '<div class="nocp">No checkpoint yet. One appears when the session goes quiet, or press “Checkpoint now”.</div>'
   cp = tidyCp(cp) // 0.9.9: an older code-made one (another Mac's, or from before) reads like a new one
   const you = /^YOU:/i.test(cp.next || '')
@@ -499,6 +506,8 @@ function cpBlock(cp, { showWhen = true, more = false, open = false, md = false,
   }
   // 0.9.15: what the session is for and how far along, above its latest step
   const goal = rows && !rows.goal ? '' : String(cp.goal || '').trim(), prog = String(cp.progress || '').trim()
+  if (part === 'tail') return '<dl class="cp cp-tail' + (cp.format === 'markdown' ? ' cp-salvaged' : '') + '"><dt>Stopped</dt>' + dd(cp.stoppedAt) + (String(cp.next || '').trim() ? '<dt>Next</dt>' + dd(cp.next, 'next' + (you ? ' you' : '')) : '') + '</dl>'
+  if (part === 'head') return (goal || String(cp.doing || '').trim() ? '<dl class="cp cp-head">' + (goal ? '<dt>Goal</dt><dd class="goal">' + fmtCode(goal) + (prog ? '<span class="cp-prog"> · ' + fmtCode(prog) + '</span>' : '') + '</dd>' : '') + (String(cp.doing || '').trim() ? '<dt>Doing</dt>' + dd(cp.doing) : '') + '</dl>' : '') + (n ? '<div class="cpx">' + cpExtras(cp, paths) + '</div>' : '')
   return '<dl class="cp' + (cp.format === 'markdown' ? ' cp-salvaged' : '') + '">' +
     (goal ? '<dt>Goal</dt><dd class="goal">' + fmtCode(goal) + (prog ? '<span class="cp-prog"> · ' + fmtCode(prog) + '</span>' : '') + '</dd>' : '') +
     (rows && !rows.doing ? '' : '<dt>Doing</dt>' + dd(cp.doing)) +
@@ -506,7 +515,7 @@ function cpBlock(cp, { showWhen = true, more = false, open = false, md = false,
     (String(cp.next || '').trim() ? '<dt>Next</dt>' + dd(cp.next, 'next' + (you ? ' you' : '')) : '') +
     (showWhen ? '<div class="when">' + esc(cp.trigger) + ' checkpoint · ' + esc(ago(cp.createdAt)) + (cp.generator && cp.generator.by ? ' · ' + (cp.generator.by === 'heuristic' ? '' : 'by ') + esc(cpByText(cp.generator)) + cpByHintHtml(cp.generator) : '') + '</div>' : '') +
     '</dl>' +
-    (more && n ? '<details class="cp-more"' + (open ? ' open' : '') + '><summary>' + (cp.length === 'long' ? 'Recap, decisions, files' : 'Decisions, files, open questions') + ' <span class="faint">· ' + n + ' section' + (n === 1 ? '' : 's') + '</span></summary><div class="cpx">' + cpExtras(cp) + '</div></details>' : '')
+    (more && n ? '<details class="cp-more"' + (open ? ' open' : '') + '><summary>' + (cp.length === 'long' ? 'Recap, decisions, files' : 'Decisions, files, open questions') + ' <span class="faint">· ' + n + ' section' + (n === 1 ? '' : 's') + '</span></summary><div class="cpx">' + cpExtras(cp, paths) + '</div></details>' : '')
 }
 
 // External agents (v0.5.4): the chip a feed's sessions wear, like a machine's.
@@ -2067,7 +2076,7 @@ async function viewWaiting() {
     (recent.length ? '<ul>' + recent.map((r) => '<li><span class="t" title="' + esc(r.at) + '">' + esc(ago(r.at)) + '</span><a href="#/s/' + encodeURIComponent(r.session.id) + '">' + esc(r.session.title || 'Untitled session') + '</a>' +
       (r.session.repoLabel ? '<span class="chip mono">' + esc(r.session.repoLabel) + '</span>' : '') +
       '<span class="out-' + esc(r.state) + '">' + esc(r.outcome) + '</span><span class="what">' + esc(String(r.what || '').slice(0, 200)) + '</span>' +
-      (r.where ? '<span class="where">' + esc(r.where) + '</span>' : '') + '</li>').join('') + '</ul>'
+      (r.where ? '<span class="where">' + esc(whereWords(r.where)) + '</span>' : '') + '</li>').join('') + '</ul>'
       : '<div class="nocp">Nothing yet since the daemon started.</div>') +
     '<div class="hint">Board answers are also written to each session’s answers.md. This list is kept since the daemon last started.</div></details>'
   html += dismissedHtml(needs.dismissed || [], { open: !!state.dismissedOpen, agoFn: ago })
@@ -2149,13 +2158,10 @@ document.addEventListener('keydown', (ev) => {
   const b = document.querySelector('[data-action="agent-add"]')
   if (b && !b.disabled) b.click()
 })
+// 2026-10-29: the newest three, then Show all N; where each came from in true words (ui/side-fold.js)
 function answeredList(s) {
-  const list = (s.answers || []).slice().reverse()
-  if (!list.length) return ''
-  return '<h2>Answered from the board <span class="count">' + list.length + '</span></h2><ul class="answered">' + list.map((a) =>
-    '<li><span class="t">' + esc(clock(a.at)) + '</span><b>' + esc(a.summary) + '</b>' + (a.what ? ' · <span class="mono">' + esc(String(a.what).slice(0, 160)) + '</span>' : '') +
-    '<span class="where">' + esc(a.where || '') + (a.delivered === false ? ' · not picked up' : '') + '</span></li>').join('') + '</ul>' +
-    '<div class="hint">Also in answers.md in this session’s folder.</div>'
+  const body = answeredHtml(s.answers, { clock }, { esc })
+  return body ? '<section class="sanswered" id="answered">' + body + '</section>' : ''
 }
 
 // External agents (v0.5.4): a feed session's page. Everything is the feed's
@@ -2381,6 +2387,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 }) }
@@ -2545,9 +2555,10 @@ function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {
   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>' +
+    '<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></div>' +
+    // 2026-10-29: the head above (title row, the status and Live chips) stays pinned while the panel scrolls; these scroll
     (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>'
+    '<div class="fs-where">' + icon('monitor') + '<span>' + esc(mEmoji(s.machine) + ' ' + s.machine) + '</span><span class="faint">· ' + esc(ago(s.lastActivityAt)) + '</span></div>'
   // the prominent actions: Catch me up (after time away, "Away 3h · Catch me up"), Checkpoint now
   noteOpenAway(s)
   const awayMs = openAway.get(s.id)
@@ -2555,7 +2566,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
@@ -2571,33 +2582,44 @@ function sessionPageHtml(s, { spv = null, live: liveV = null, lists = null } = {
   const newestCp = s.checkpoints.filter((cp) => !cp.doubt).reduce((a, b) => (!a || String(b.createdAt) > String(a.createdAt) ? b : a), null)
   const wr = writingFor(s) // 0.9.5: the one being written, at the top until it lands
   const wrRow = wr ? '<div class="tl-item tl-writing">' + writingLine(s, wr, 'tl') + '</div>' : ''
-  const cps = s.checkpoints.filter((cp) => !cp.doubt).sort((a, b) => String(b.createdAt).localeCompare(String(a.createdAt)))
-  side += '<section class="fs-sec fs-cps" id="fsCps"><h2>Checkpoints <span class="count">' + s.checkpointCount + '</span></h2>'
-  side += !cps.length && !wrRow ? '<div class="empty">No checkpoints yet.</div>' : '<div class="timeline">' + wrRow + cpTimeline(cps, newestCp, s.agent ? null : s.id) + '</div>'
+  // 2026-10-29: a wrapper checkpoint ("Working on: <task-notification>…") written beside a real one isn't shown
+  const cps = dropJunkCps(s.checkpoints.filter((cp) => !cp.doubt)).sort((a, b) => String(b.createdAt).localeCompare(String(a.createdAt)))
+  const paths = { roots: rootsOf(s), home: (state.health && state.health.home) || '' }
+  // 2026-10-29 a calmer panel: only the newest checkpoint (Stopped + Next, the rest behind More); older ones fold
+  side += '<section class="fs-sec fs-cps" id="fsCps"><h2>Checkpoints <span class="count">' + cps.length + '</span></h2>'
+  side += !cps.length && !wrRow ? '<div class="empty">No checkpoints yet.</div>' : '<div class="timeline">' + wrRow + (cps.length ? cpLatestHtml(cps[0], s.agent ? null : s.id, paths) : '') + '</div>'
+  if (cps.length > 1) side += foldHtml({ key: 'cps-earlier', title: 'Earlier checkpoints', count: cps.length - 1, open: sideFolds.open('cps-earlier'), cls: 'fs-fold-in', body: '<div class="timeline">' + cpTimeline(cps.slice(1), null, null, paths) + '</div>' }, { esc })
   const doubted = s.checkpoints.filter((cp) => cp.doubt && cp.doubt !== 'empty') // 0.9.0: written with another session's branch: kept, folded away
   if (doubted.length) side += '<details class="tl-doubt"><summary>' + doubted.length + ' checkpoint' + (doubted.length === 1 ? '' : 's') + ' set aside: written with another session’s branch</summary><div class="timeline">' + cpTimeline(doubted, null) + '</div></details>'
   const empties = s.checkpoints.filter((cp) => cp.doubt === 'empty') // 0.9.2
   if (empties.length) side += '<details class="tl-doubt"><summary>' + empties.length + ' empty checkpoint' + (empties.length === 1 ? '' : 's') + ' set aside: no messages were found when ' + (empties.length === 1 ? 'it was' : 'they were') + ' written</summary><div class="timeline">' + cpTimeline(empties, null) + '</div></details>'
   side += '</section>'
+  // 2026-10-29 a calmer panel: PRs and To do stay open; the rest is a one-line header with a count, closed
+  // until you open it (kept per device: ui/side-fold.js). Each keeps its id, so its painter still finds it.
+  side += '<section class="sprs" id="prs">' + sessionPrsSection(s, { mayEdit: !s.agent, open: prsUi.open, details: prsUi.details }) + '</section>'
+  side += '<section class="stodos" id="todos">' + sessionTodosSection(s, { agoFn: ago, mayEdit: state.mayAnswer !== false }) + '</section>' // 0.7.0: steps handed back to you
   // 0.9.8: the last tools it ran and its folder's changes; loads when you open it
   side += '<section class="wid" id="what-it-did">' + whatItDidSection(s, widOf(s.id)) + '</section>'
+  const fold = (key, title, count, body) => foldHtml({ key, title, count, body, open: sideFolds.open(key) }, { esc })
+  const fl = s.files || {}, nFiles = (fl.artifacts || []).length + (fl.plans || []).length + (fl.docs || []).length
+  const filesBody = sessionFilesSection(s, { agoFn: ago })
+  side += filesBody ? fold('files', 'Files', nFiles || null, '<section class="sfiles" id="files">' + filesBody + '</section>') : '<section class="sfiles" id="files"></section>'
+  if (s.lists && s.lists.length) { state.listFull = {}; for (const l of (lists && lists.lists) || []) state.listFull[l.ref] = l }
+  state.listsMayEdit = state.mayAnswer !== false
+  const listsBody = sessionListsSection(s)
+  side += listsBody ? fold('lists', 'Lists', (s.lists || []).length || null, '<section class="slists" id="lists">' + listsBody + '</section>') : '<section class="slists" id="lists"></section>'
+  side += fold('park', s.parked ? 'Parked' : 'Park', null, parkRow(s))
+  side += fold('space', 'Space', s.space || null, spacePicker(s, spv, 'session', s.id))
+  side += fold('status', 'Status history', (s.statusChanges || []).length || null, statusStripHtml(s.statusChanges, { label: LABEL, clock }, { esc }))
+  side += fold('answered', 'Answered from the board', (s.answers || []).length || null, answeredList(s))
   side += '<section class="fs-sec fs-details" id="fsDetails">' + detailsHtml( // 0.9.11: the facts, behind Details
     fact('Model', s.modelLabel || s.model || '—', 'wrap') + fact('Started', clock(s.startedAt)) + (s.repoProject ? fact('Project', projectLabel(s.repoProject)) : '') + fsOtherRepos(s) + repoTile(s) + branchTileHtml(branch, { esc }) + fact('Machine', mEmoji(s.machine) + ' ' + s.machine + (thisOneSuffix(s.machine, state.health) || (s.isLocal ? '' : ' (synced)'))) + (s.worktree ? fact('Worktree', '⑂ ' + s.worktree.name + (s.worktree.branch ? ' · ' + s.worktree.branch : ''), 'wrap', { copy: s.worktree.path || null, what: 'worktree folder' }) : '') + (s.startedIn ? fact('Started in', s.startedIn) : '') + fact('Directory', s.cwd || '—', '', { copy: s.cwd || null, clip: 34 }) + fact('Last activity', ago(s.lastActivityAt)) +
     fact('Turns', s.turns + ' (' + s.turnsSinceCheckpoint + ' since checkpoint)' + (s.historyTurns ? ' · resumed, ' + s.historyTurns + ' before' : '')) + fact('Capture', s.capture || '—') + fact('Session id', s.id, '', { copy: s.id, what: 'session id' }) +
     fact('Open?', s.live === 'open' ? 'open' + (s.liveVia === 'pid' ? ' (process ' + s.pid + ' running)' : ' (heartbeat)') : s.live === 'closed' ? 'closed ' + ago(s.closedAt) : 'unknown', '', { copy: s.live === 'open' && s.liveVia === 'pid' && s.pid != null ? String(s.pid) : null, what: 'process id' }) +
     (s.headless && !s.terminal && !s.tty ? fact('Terminal', 'None · started from the board', '') : fact('Terminal', (s.terminal ? s.terminal.label : s.codingAgent === 'codex' ? ({ 'codex-ide': 'Codex in the IDE', 'codex-app': 'Codex app', 'codex-exec': 'codex exec' }[s.surface] || 'Codex CLI') : '—') + (s.tty ? ' · ' + s.tty.replace('/dev/', '') : '') + ' · tab cp:' + (s.shortId || ''), '', { copy: s.shortId ? 'cp:' + s.shortId : null, what: 'terminal tab id' })), { open: dOpen }) + '</section>'
-  side += '<section class="stodos" id="todos">' + sessionTodosSection(s, { agoFn: ago, mayEdit: state.mayAnswer !== false }) + '</section>' // 0.7.0: steps handed back to you
-  side += '<section class="sfiles" id="files">' + sessionFilesSection(s, { agoFn: ago }) + '</section>'
-  side += '<section class="sprs" id="prs">' + sessionPrsSection(s, { mayEdit: !s.agent, open: prsUi.open, details: prsUi.details }) + '</section>'
-  if (s.lists && s.lists.length) { state.listFull = {}; for (const l of (lists && lists.lists) || []) state.listFull[l.ref] = l }
-  state.listsMayEdit = state.mayAnswer !== false
-  side += '<section class="slists" id="lists">' + sessionListsSection(s) + '</section>'
-  side += parkRow(s) + spacePicker(s, spv, 'session', s.id)
-  if (s.statusChanges && s.statusChanges.length) side += '<div class="striplabel">Status history</div><div class="strip">' + s.statusChanges.slice(-24).map((c) => '<span class="s-' + esc(c.status) + '" data-tip="' + esc(clock(c.at)) + '">' + esc(LABEL[c.status] || c.status) + '</span>').join('') + '</div>'
-  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, scrolled: fsScrolled === 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
@@ -2606,7 +2628,7 @@ function fsStubHtml(s, inner, foot = '') {
   return liveOpenHtml(s, null, '') + '<div class="live-thread fs-none" data-sid="' + esc(s.id) + '"><div class="fs-none-in">' + inner + '</div></div>' + foot + '</section>' // 0.9.17: an ended one keeps its Ended · Resume bar
 }
 function fsPeekWords(s) {
-  const n = s.checkpointCount || 0
+  const n = Array.isArray(s.checkpoints) ? dropJunkCps(s.checkpoints.filter((cp) => !cp.doubt)).length : s.checkpointCount || 0 // 2026-10-29: the junk twin isn't counted
   const w = String(LABEL[s.status] || s.status || 'Session')
   return w.charAt(0).toUpperCase() + w.slice(1) + ' · ' + n + ' checkpoint' + (n === 1 ? '' : 's')
 }
@@ -2981,7 +3003,24 @@ function fsRailGo(go) {
   if (el) el.scrollIntoView({ block: 'start', behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' })
   const d = el && el.querySelector('details:not([open])')
   if (d && go === 'fsDetails') d.open = true
-}
+  const f = el && el.closest('details.fs-fold:not([open])') // 2026-10-29: a folded section opens when the rail goes to it
+  if (f) f.open = true
+}
+// 2026-10-29 the panel's folds: open or closed as you leave them, on this device (ui/side-fold.js)
+document.addEventListener('toggle', (e) => {
+  const d = e.target
+  if (!d || !d.matches || !d.matches('#fsSide details[data-fold]')) return
+  sideFolds.set(d.dataset.fold, d.open)
+}, true)
+// The pinned head's title goes to one line once the panel scrolls, so the pinned part stays slim.
+document.addEventListener('scroll', (e) => {
+  const el = e.target
+  if (!el || !el.classList || !el.classList.contains('fs-side-in')) return
+  const side = el.closest('.fs-side')
+  fsScrolled = side && el.scrollTop > 8 ? side.dataset.sid : null
+  if (side) side.classList.toggle('is-scrolled', !!fsScrolled)
+}, true)
+
 function toggleFsSheet() {
   const side = document.getElementById('fsSide')
   if (!side) return
@@ -4039,16 +4078,29 @@ async function aroundWire(id) {
     if (hit) { hit.scrollIntoView({ block: 'center' }); const mk = hit.querySelector('mark'); if (mk && hit.scrollHeight > hit.clientHeight) mk.scrollIntoView({ block: 'center' }) }
   }
 }
-function cpTimeline(list, newestCp, wtSid = null) {
+function cpTimeline(list, newestCp, wtSid = null, paths = null) {
   return list.map((cp) =>
-    '<div class="tl-item ' + esc(cp.trigger) + (isFresh(cp) ? ' cp-fresh' : '') + '"><div class="tl-head"><span class="t">' + esc(clock(cp.createdAt)) + '</span><span class="trig">' + esc(cp.trigger) + '</span><span>' + esc(ago(cp.createdAt)) + '</span>' +
-    (cp.generator && cp.generator.by ? '<span>· ' + esc(cpByText(cp.generator)) + cpByHintHtml(cp.generator) + '</span>' : '') + '</div>' +
-    cpBlock(cp, { showWhen: false, more: true, open: cp === newestCp, md: true }) +
+    '<div class="tl-item ' + esc(cp.trigger) + (isFresh(cp) ? ' cp-fresh' : '') + '">' + cpHeadLine(cp) +
+    cpBlock(cp, { showWhen: false, more: true, open: cp === newestCp, md: true, paths }) +
     (cp.userNote ? '<div class="note">✎ ' + esc(cp.userNote) + '</div>' : '') +
-    (cp.filesTouched && cp.filesTouched.length ? '<div class="files">' + cp.filesTouched.map((f) => '<span class="chip mono">' + esc(f) + '</span>').join('') + '</div>' : '') +
+    filesTouchedHtml(cp.filesTouched, paths || {}, { esc }) + // 2026-10-29: relative paths, the first five, then +N more
     (wtSid && cp === newestCp ? '<button type="button" class="linkish wt-since" data-action="wt-open" data-id="' + esc(wtSid) + '" data-scope="checkpoint">' + icon('route') + 'Walk through since here</button>' : '') + // 0.9.17
     '</div>').join('')
 }
+function cpHeadLine(cp) {
+  return '<div class="tl-head"><span class="t">' + esc(clock(cp.createdAt)) + '</span><span class="trig">' + esc(cp.trigger) + '</span><span>' + esc(ago(cp.createdAt)) + '</span>' +
+    (cp.generator && cp.generator.by ? '<span>· ' + esc(cpByText(cp.generator)) + cpByHintHtml(cp.generator) + '</span>' : '') + '</div>'
+}
+// 2026-10-29 The panel's newest checkpoint: Stopped + Next; Goal, Doing, the extra sections,
+// your note and the files behind More (open or closed as you last left it on this device).
+function cpLatestHtml(cp, wtSid, paths) {
+  const more = cpBlock(cp, { md: true, part: 'head', paths }) + (cp.userNote ? '<div class="note">✎ ' + esc(cp.userNote) + '</div>' : '') + filesTouchedHtml(cp.filesTouched, paths || {}, { esc })
+  return '<div class="tl-item tl-latest ' + esc(cp.trigger) + (isFresh(cp) ? ' cp-fresh' : '') + '">' + cpHeadLine(cp) +
+    cpBlock(cp, { showWhen: false, md: true, part: 'tail', paths }) +
+    (more ? '<details class="cp-more fs-cp-more" data-fold="cp-more"' + (sideFolds.open('cp-more') ? ' open' : '') + '><summary>More</summary>' + more + '</details>' : '') +
+    (wtSid ? '<button type="button" class="linkish wt-since" data-action="wt-open" data-id="' + esc(wtSid) + '" data-scope="checkpoint">' + icon('route') + 'Walk through since here</button>' : '') +
+    '</div>'
+}
 // Space of one session (or, on an agent's page, of that agent's feed): its
 // own override, or back to the repo / Mac default (v0.5.8).
 function spacePicker(s, spv, kind, key) {
@@ -4986,6 +5038,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
@@ -7455,7 +7509,7 @@ document.addEventListener('keydown', (e) => { const b = e.target.closest && e.ta
     clearTimeout(timer); cur = el
     timer = setTimeout(() => {
       if (cur !== el || !el.isConnected) return hide()
-      if (el.matches('.wt-st-h h3') && el.scrollWidth <= el.clientWidth) return // a step's title only when it's cut short
+      if (el.matches('.wt-st-h h3, .pr-compact .pr-title-btn') && el.scrollWidth <= el.clientWidth) return // a step's title only when it's cut short
       tip.textContent = el.dataset.tip
       const r = el.getBoundingClientRect(), w = tip.offsetWidth
       tip.style.left = Math.round(Math.max(8, Math.min(innerWidth - w - 8, r.left + r.width / 2 - w / 2))) + 'px'
@@ -7463,7 +7517,7 @@ 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], .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
+  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], .sstrip .ss[data-tip], .file-ref-off[data-tip], .pr-compact .pr-title-btn[data-tip], .files .chip[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() })
@@ -8265,6 +8319,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()
@@ -9156,8 +9222,34 @@ async function openToolOutput(sessionId, toolId, label) {
 // daemon serves only the session's folder and Claude's scratch folders
 // (src/file-ref.js). Centered on a desktop, a bottom sheet on a phone.
 const refUi = { sid: null, path: null, line: null, r: null, from: null, seq: 0 }
+// 2026-10-29 Which session a path in the page belongs to, and whether this board can read its files
+// (this machine; another over the peer link; the hosted board straight from it): ui/file-reach.js.
+function refSidOf(el) {
+  if (el.closest('#docViewer')) return refUi.sid
+  const box = el.closest('[data-sid], #live[data-id]')
+  return (box && (box.dataset.sid || box.dataset.id)) || sessionOfHash(location.hash) || liveOnScreen()
+}
+function refReachFor(el) {
+  const sid = refSidOf(el)
+  const s = sid && ((state.sessions || []).find((x) => x.id === sid) || (state.session && state.session.id === sid ? state.session : null))
+  if (!s) return { ok: true }
+  return fileReach(s, { relay: window.leftoffRelay && state.relayStatus ? state.relayStatus : null })
+}
+{
+  let queued = false
+  const pass = () => { queued = false; try { gateFileRefs(document.body, refReachFor) } catch {} }
+  const mo = new MutationObserver((recs) => {
+    if (queued) return
+    if (!recs.some((r) => r.addedNodes.length)) return
+    queued = true; requestAnimationFrame(pass)
+  })
+  if (document.body) mo.observe(document.body, { childList: true, subtree: true })
+  // a path that can't be read: a tap says why (a phone has no hover tip)
+  document.addEventListener('click', (e) => { const off = e.target.closest && e.target.closest('.file-ref-off'); if (off && matchMedia('(hover: none)').matches) toast(off.dataset.tip, 4000) })
+}
 function openRefFile(btn, cardId) {
   const inViewer = btn.closest('#docViewer')
+  { const r = inViewer ? { ok: true } : refReachFor(btn); if (!r.ok) { toast(r.tip, 4000); return } } // never a viewer that opens onto "not available"
   let p = btn.dataset.path || ''
   if (inViewer && refUi.r && refUi.r.path && /^\.{1,2}\//.test(p)) p = refAgainst(p, refUi.r.path) // ./ or ../ inside a viewed file: that file's folder (else the session's)
   const sid = (inViewer && refUi.sid) || cardId || sessionOfHash(location.hash) || liveOnScreen()

package/ui/file-reach.js

@@ -0,0 +1,66 @@
+// 2026-10-29 A file path in a message is a link only when the board can read
+// that file (Joel: "in the chat all files are clickable and open in the modal
+// but not available"). The board reads a session's file on the machine that
+// has it: this machine; another machine over the signed, sealed peer link the
+// Files panel already uses (src/engine.js sessionFile -> viaPeer); or, on the
+// hosted board, straight from that machine through the relay
+// (ui/relay-client.js ownerRoute). Nothing new is opened to the network here:
+// this only decides whether to offer the link. Otherwise the path stays plain
+// monospace text and its tip says why. Pure (test/unit/calmside-1029.test.mjs).
+
+const escD = (s) => String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')
+
+// s: the session (isLocal, machine, peer: { ok, code }, agent)
+// relay: null off the hosted board; else { macs: [{ machine, online, serves, platform }] } from the relay's status
+// -> { ok: true } | { ok: false, why: 'agent' | 'offline' | 'sandbox' | 'unreachable', tip }
+export function fileReach(s, { relay = null } = {}) {
+  if (!s) return { ok: true } // no session to ask about: the viewer says what it can
+  if (s.agent || /^agent:/.test(String(s.id || ''))) return { ok: false, why: 'agent', tip: 'External agents don’t share files' }
+  if (s.isLocal !== false) return { ok: true }
+  const m = String(s.machine || 'its machine')
+  const x = relay && Array.isArray(relay.macs) ? relay.macs.find((y) => y && y.machine === m) : null
+  const peer = s.peer || {}
+  if (x && !x.online) return { ok: false, why: 'offline', tip: 'On ' + m + ' (offline). Open the board on ' + m + ' to view' }
+  if (peer.ok || peer.code === 'checking') return { ok: true }
+  // the hosted board goes straight to the session's machine when that machine can open this browser's key
+  if (x && x.online && x.serves !== 0) return { ok: true }
+  if (x && x.online) return { ok: false, why: 'sandbox', tip: x.platform && x.platform !== 'darwin' ? 'On ' + m + '. Can’t read files from a sandbox here; open the board on ' + m + ' to view' : 'On ' + m + ', which can’t share its files with this device yet' }
+  if (peer.code === 'unreachable' || !x) return { ok: false, why: peer.code === 'unreachable' ? 'offline' : 'unreachable', tip: peer.code === 'unreachable' ? 'On ' + m + ' (offline). Open the board on ' + m + ' to view' : 'On ' + m + ', which this board can’t reach right now' }
+  return { ok: false, why: 'unreachable', tip: 'On ' + m + ', which this board can’t reach right now' }
+}
+
+// The plain-text form of a path link (the words as shown; the path kept for when it can be read again)
+export function offRefHtml({ path, line = null, shownHtml, tip }, { esc = escD } = {}) {
+  return '<span class="file-ref-off" tabindex="0" data-path="' + esc(path) + '"' + (line ? ' data-line="' + esc(String(line)) + '"' : '') + ' data-tip="' + esc(tip) + '" aria-label="' + esc(String(path) + '. ' + tip) + '">' + shownHtml + '</span>'
+}
+
+// In the page: every path link a session's machine can't serve becomes plain
+// text, and back to a link once it can. reachFor(el) -> { ok, tip } for the
+// session that element belongs to. Returns how many changed.
+export function gateFileRefs(root, reachFor) {
+  if (!root || !root.querySelectorAll) return 0
+  let n = 0
+  for (const a of root.querySelectorAll('a.file-ref')) {
+    const r = reachFor(a)
+    if (!r || r.ok) continue
+    const sp = a.ownerDocument.createElement('span')
+    sp.className = 'file-ref-off'; sp.tabIndex = 0
+    sp.setAttribute('data-path', a.getAttribute('data-path') || '')
+    if (a.getAttribute('data-line')) sp.setAttribute('data-line', a.getAttribute('data-line'))
+    sp.setAttribute('data-tip', r.tip); sp.setAttribute('aria-label', (a.getAttribute('data-path') || '') + '. ' + r.tip)
+    while (a.firstChild) sp.appendChild(a.firstChild)
+    a.replaceWith(sp); n++
+  }
+  for (const sp of root.querySelectorAll('span.file-ref-off')) {
+    const r = reachFor(sp)
+    if (!r || !r.ok) { if (r && r.tip && sp.getAttribute('data-tip') !== r.tip) sp.setAttribute('data-tip', r.tip); continue }
+    const a = sp.ownerDocument.createElement('a')
+    a.className = 'file-ref'; a.href = '#'
+    a.setAttribute('data-action', 'file-ref'); a.setAttribute('data-path', sp.getAttribute('data-path') || '')
+    if (sp.getAttribute('data-line')) a.setAttribute('data-line', sp.getAttribute('data-line'))
+    a.setAttribute('data-tip', 'Open in Leftoff')
+    while (sp.firstChild) a.appendChild(sp.firstChild)
+    sp.replaceWith(a); n++
+  }
+  return n
+}