@leftoff/cli 0.9.17-beta.8 → 0.9.17

package/ui/back-line.js

@@ -5,6 +5,9 @@
 // × hides that one line for this tab (sessionStorage); a new recap or
 // checkpoint brings it back. Pure apart from the store the board passes.
 
+import { mdInline } from './changelog-md.js'
+// 0.9.19: the words are Claude's or the summarizer's, so `code` and **bold** render (escaped first, no links)
+const md = (x) => mdInline(x, { links: false })
 const MIN = 60000
 export const BACK_AWAY_MS = 30 * MIN
 export const BACK_PREFIX = 'lo-back-x:'
@@ -35,8 +38,8 @@ export function backLineHtml(s, line, { esc, icon = () => '', ago = () => '' })
   const when = line.at ? ago(line.at) : ''
   const label = line.kind === 'recap' ? 'Recap' : 'Where it stopped'
   const tip = (line.kind === 'recap' ? 'Claude Code’s recap' : 'The latest checkpoint') + (when ? ' · ' + when : '')
-  const body = line.kind === 'recap' ? esc(line.text)
-    : (line.goal ? '<span class="bl-goal">' + esc(line.goal) + '</span> · ' : '') + esc(line.stopped) + (line.next ? ' <span class="bl-next">Next: ' + esc(line.next) + '</span>' : '')
+  const body = line.kind === 'recap' ? md(line.text)
+    : (line.goal ? '<span class="bl-goal">' + md(line.goal) + '</span> · ' : '') + md(line.stopped) + (line.next ? ' <span class="bl-next">Next: ' + md(line.next) + '</span>' : '')
   return '<div class="back-line" role="note" data-key="' + esc(line.key) + '"><p data-tip="' + esc(tip) + '"><span class="rl-k">' + label + '</span> ' + body + '</p>' +
     '<button type="button" class="back-x" data-action="back-dismiss" data-id="' + esc(s.id) + '" data-key="' + esc(line.key) + '" aria-label="Hide this line" data-tip="Hide">' + icon('x') + '</button></div>'
 }

package/ui/diff-view.js

@@ -238,19 +238,80 @@ export function renderDiff(doc, text, { label = '', numbers = true } = {}) {
       const mk = el('span', 'gd-m', MARK[r.k])
       mk.setAttribute('aria-label', r.k === 'add' ? 'added' : r.k === 'del' ? 'removed' : 'unchanged')
       row.appendChild(mk)
+      row.appendChild(lineCell(doc, el, r))
+    }
+    root.appendChild(row)
+  }
+  return root
+}
+// a line's text, the changed words marked (textContent only)
+function lineCell(doc, el, r) {
+  const c = el('span', 'gd-c')
+  if (r.w && r.w.length) {
+    let at = 0
+    for (const [s, e] of r.w) {
+      if (s > at) c.appendChild(doc.createTextNode(r.t.slice(at, s)))
+      c.appendChild(el(r.k === 'add' ? 'ins' : 'del', 'gd-x', r.t.slice(s, e)))
+      at = e
+    }
+    if (at < r.t.length) c.appendChild(doc.createTextNode(r.t.slice(at)))
+  } else if (r.t) c.textContent = r.t
+  else c.textContent = '\u200b' // keeps an empty line's height
+  return c
+}
+
+// 2026-10-30 (walkthrough round 3) the same patch side by side: old on the left,
+// new on the right, a run of removed lines beside the added lines that replaced
+// it (paired in order), unchanged lines on both sides, the @@ bars across. -> the
+// split rows: [{ k: 'line', l: rowIndex | null, r: rowIndex | null } | { k: 'span', i }],
+// indexes into parsePatch's rows (so a picked line means the same in both views).
+export function splitRows(rows) {
+  const out = []
+  let dels = [], adds = []
+  const flush = () => { const n = Math.max(dels.length, adds.length); for (let i = 0; i < n; i++) out.push({ k: 'line', l: i < dels.length ? dels[i] : null, r: i < adds.length ? adds[i] : null }); dels = []; adds = [] }
+  rows.forEach((r, i) => {
+    if (r.k === 'del') { if (adds.length) flush(); dels.push(i) } else if (r.k === 'add') adds.push(i)
+    else { flush(); out.push(r.k === 'ctx' ? { k: 'line', l: i, r: i } : { k: 'span', i }) }
+  })
+  flush()
+  return out
+}
+export function renderSplit(doc, text, { label = '' } = {}) {
+  const { rows, maxLine } = parsePatch(text)
+  const el = (tag, cls, txt) => { const e = doc.createElement(tag); if (cls) e.className = cls; if (txt != null && txt !== '') e.textContent = txt; return e }
+  const root = el('div', 'gd gd-split gd-w' + Math.min(6, Math.max(2, String(maxLine || 1).length)))
+  if (label) root.setAttribute('aria-label', label)
+  const half = (i, side) => {
+    if (i == null) { const h = el('div', 'gd-half gd-h' + side + ' gd-empty'); h.setAttribute('aria-hidden', 'true'); return h }
+    const r = rows[i]
+    const k = r.k === 'ctx' ? 'ctx' : r.k
+    const h = el('div', 'gd-half gd-h' + side + ' gd-' + k)
+    h.dataset.ri = String(i)
+    const num = side === 'l' ? r.o : r.n
+    h.appendChild(el('span', 'gd-gut ' + (side === 'l' ? 'gd-o' : 'gd-n'), num == null ? '' : String(num)))
+    const mk = el('span', 'gd-m', MARK[k])
+    mk.setAttribute('aria-label', k === 'add' ? 'added' : k === 'del' ? 'removed' : 'unchanged')
+    h.appendChild(mk)
+    h.appendChild(lineCell(doc, el, r))
+    return h
+  }
+  for (const s of splitRows(rows)) {
+    if (s.k === 'span') {
+      const r = rows[s.i]
+      const row = el('div', 'gd-row gd-' + r.k)
+      row.dataset.ri = String(s.i)
+      row.appendChild(el('span', 'gd-gut gd-span', r.k === 'gap' ? '⋯' : ''))
       const c = el('span', 'gd-c')
-      if (r.w && r.w.length) {
-        let at = 0
-        for (const [s, e] of r.w) {
-          if (s > at) c.appendChild(doc.createTextNode(r.t.slice(at, s)))
-          c.appendChild(el(r.k === 'add' ? 'ins' : 'del', 'gd-x', r.t.slice(s, e)))
-          at = e
-        }
-        if (at < r.t.length) c.appendChild(doc.createTextNode(r.t.slice(at)))
-      } else if (r.t) c.textContent = r.t
-      else c.textContent = '\u200b' // keeps an empty line's height
+      if (r.k === 'gap') c.textContent = r.n + ' unchanged line' + (r.n === 1 ? '' : 's')
+      else if (r.k === 'hunk') { c.appendChild(el('span', 'gd-range', r.range)); if (r.ctx) { c.appendChild(doc.createTextNode(' ')); c.appendChild(el('span', 'gd-ctx', r.ctx)) } }
+      else c.textContent = r.t
       row.appendChild(c)
+      root.appendChild(row)
+      continue
     }
+    const row = el('div', 'gd-srow')
+    row.appendChild(half(s.l, 'l'))
+    row.appendChild(half(s.r, 'r'))
     root.appendChild(row)
   }
   return root

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
+}

package/ui/fs-side.js

@@ -71,12 +71,12 @@ export function railHtml({ cpCount = 0, cu = true, away = '' } = {}, { esc, icon
 // The whole panel. side/foot: the panel's markup (built by app.js from the
 // session); label: the peek's one line; collapsed: the rail instead (desktop);
 // sheet: the phone's sheet is raised.
-export function fsSideHtml({ id, side = '', foot = '', label = '', away = '', cpCount = 0, cu = true, wt = false, look = 0, collapsed = false, sheet = false, width = SIDE_W_DEFAULT, viewport = 0 }, { esc, icon }) {
+export function fsSideHtml({ id, side = '', foot = '', label = '', away = '', cpCount = 0, cu = true, wt = false, look = 0, collapsed = false, sheet = false, scrolled = false, width = SIDE_W_DEFAULT, viewport = 0 }, { esc, icon }) {
   const peek = '<div class="fs-peek">' +
     '<button type="button" class="fs-peek-b" data-action="fs-sheet" aria-expanded="' + (sheet ? 'true' : 'false') + '" aria-controls="fsSide"><span class="fs-grip" aria-hidden="true"></span><span class="fs-peek-t">' + esc(label) + '</span>' + icon(sheet ? 'chevron-down' : 'chevron-up') + '</button>' +
     (cu ? '<button type="button" class="btn fs-peek-cu' + (away ? ' primary' : '') + '" data-action="scu-open" data-id="' + esc(id) + '"' + (away ? ' aria-label="' + esc(away + ' · Catch me up') + '"' : '') + '>' + icon('coffee') + 'Catch me up</button>' : '') +
     // 0.9.17 Walk me through it, beside Catch me up in the peek (its eye count when there's something to look at)
     (wt ? '<button type="button" class="btn fs-peek-wt" data-action="wt-open" data-id="' + esc(id) + '" aria-label="' + esc('Walk me through it' + (look ? ', ' + look + ' to look closely at' : '')) + '" data-tip="Walk me through the code changes">' + icon('git-compare') + (look ? '<span class="fs-peek-n" aria-hidden="true">' + esc(String(look)) + '</span>' : '') + '</button>' : '') + '</div>'
-  return '<aside class="fs-side' + (collapsed ? ' collapsed' : '') + (sheet ? ' sheet-up' : '') + '" id="fsSide" data-sid="' + esc(id) + '" aria-label="This session">' +
+  return '<aside class="fs-side' + (collapsed ? ' collapsed' : '') + (sheet ? ' sheet-up' : '') + (scrolled ? ' is-scrolled' : '') + '" id="fsSide" data-sid="' + esc(id) + '" aria-label="This session">' +
     resizeHandleHtml({ width, viewport }, { esc }) + peek + '<div class="fs-side-in">' + side + '</div>' + foot + railHtml({ cpCount, cu, away }, { esc, icon }) + '</aside>'
 }

package/ui/icons.js

@@ -3,6 +3,10 @@
 // so they follow light and dark; always aria-hidden next to a text label.
 // index.html carries the nav's copies inline (no script needed to draw them).
 export const ICONS = {
+  "crosshair": "<circle cx=\"12\" cy=\"12\" r=\"10\"/> <path d=\"M22 12h-4M6 12H2M12 6V2M12 22v-4\"/>",
+  "columns-2": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <path d=\"M12 3v18\"/>",
+  "chevrons-down-up": "<path d=\"m7 20 5-5 5 5\"/> <path d=\"m7 4 5 5 5-5\"/>",
+  "chevrons-up-down": "<path d=\"m7 15 5 5 5-5\"/> <path d=\"m7 9 5-5 5 5\"/>",
   "panel-left-close": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <path d=\"M9 3v18\"/> <path d=\"m16 15-3-3 3-3\"/>",
   "panel-left-open": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/> <path d=\"M9 3v18\"/> <path d=\"m14 9 3 3-3 3\"/>",
   "menu": "<path d=\"M4 5h16\"/> <path d=\"M4 12h16\"/> <path d=\"M4 19h16\"/>",

package/ui/live-view.js

@@ -168,7 +168,7 @@ export function senderLabel(m) {
   if (!device && by.transport === 'local') device = 'this Mac'
   if (!device && m.where) { // older entries: just the where line
     const w = String(m.where)
-    device = /^on this machine/.test(w) ? 'this Mac' : (w.match(/ as ([^(·]+?)(?: \(|$| ·)/) || [])[1] || (w.match(/^from (.+?)’s board/) || [])[1] || null
+    device = /^on this machine/.test(w) ? 'this Mac' : (w.match(/ as ([^(·]+?)(?: \(|$| ·)/) || [])[1] || (w.match(/^from (.+?)’s board/) || [])[1] || (w.match(/^from (.+?) · (?:via relay|direct)\b/) || [])[1] || null // 2026-10-29: "from iPhone · via relay"
   }
   let label = 'You' + (device ? ' · from ' + device : '')
   const path = PATHS[by.transport] || null

package/ui/prs.js

@@ -93,6 +93,11 @@ export async function prCopyClick(btn, env = {}) {
 export function prMoreHtml(p, open = false) {
   return ' · <button type="button" class="pr-more pr-toggle" data-action="pr-expand" data-url="' + esc(p.url) + '" aria-expanded="' + !!open + '">' + (open ? 'Less' : 'More…') + '</button>'
 }
+// 2026-10-29 a compact row (closed): GitHub only; Copy link and Unlink come with the details
+export function prGhOnlyHtml(p) {
+  const url = safeUrl(p.url)
+  return url ? '<div class="pr-actions"><a class="pr-ic pr-gh" href="' + esc(url) + '" target="_blank" rel="noopener noreferrer" data-tip="Open on GitHub" aria-label="Open ' + esc('#' + (p.number || '')) + ' on GitHub">' + GH_MARK + '</a></div>' : ''
+}
 export function prActionsHtml(p, { unlinkId = null } = {}) {
   const url = safeUrl(p.url), n = '#' + (p.number || '')
   if (!url && !unlinkId) return ''
@@ -113,21 +118,25 @@ export function sessionPrsSection(s, { mayEdit = true, open = null, details = {}
   const n = list.length + unchecked.length
   let h = '<h2>Pull requests' + (n ? ' <span class="count">' + n + '</span>' : '') + '</h2>'
   if (list.length) {
-    h += '<div class="prlist">' + list.map((p) => {
-      // 0.9.8: tap the title (or More…) for the same details as the PRs page, in place; GitHub ↗ still goes out
+    // 2026-10-29 one compact row each: the state (shape + word), #, the title on one line; tap the title for
+    // the repo, branch, checks and the details in place. Copy, GitHub and Unlink stay one tap away.
+    h += '<div class="prlist pr-compact">' + list.map((p) => {
       const isOpen = !!(open && open.has && open.has(p.url))
       return '<article class="prrow slim' + (isOpen ? ' open' : '') + '" data-pr="' + esc(p.url) + '"><div class="pr-main">' +
-        '<div class="pr-line1"><span class="pr-num">#' + esc(p.number) + '</span>' + stateHtml(p.state) + checksHtml(p.checks) + '</div>' +
-        '<div class="pr-title"><button type="button" class="linkish pr-title-btn" data-action="pr-expand" data-url="' + esc(p.url) + '" aria-expanded="' + isOpen + '">' + esc(p.title || 'Pull request #' + p.number) + '</button></div>' +
-        '<div class="pr-meta">' + esc(p.repo || '') + (whyText(p) ? ' · <span class="pr-why">' + esc(whyText(p)) + '</span>' : '') + prMoreHtml(p, isOpen) + '</div>' +
-        (isOpen ? prDetailHtml(p, details && details[p.url], {}) : '') + '</div>' +
-        prActionsHtml(p, { unlinkId: mayEdit ? s.id : null }) + '</article>'
+        '<div class="pr-c1">' + stateHtml(p.state) + '<span class="pr-num">#' + esc(p.number) + '</span>' +
+        '<span class="pr-title"><button type="button" class="linkish pr-title-btn" data-tip="' + esc(p.title || 'Pull request #' + p.number) + '" data-action="pr-expand" data-url="' + esc(p.url) + '" aria-expanded="' + isOpen + '">' + esc(p.title || 'Pull request #' + p.number) + '</button></span></div>' +
+        (isOpen ? '<div class="pr-meta">' + esc(p.repo || '') + (p.branch ? ' · <span class="mono">' + esc(p.branch) + '</span>' : '') + (whyText(p) ? ' · <span class="pr-why">' + esc(whyText(p)) + '</span>' : '') + checksHtml(p.checks) + prMoreHtml(p, isOpen) + '</div>' + prDetailHtml(p, details && details[p.url], {}) : '') + '</div>' +
+        (isOpen ? prActionsHtml(p, { unlinkId: mayEdit ? s.id : null }) : prGhOnlyHtml(p)) + '</article>'
     }).join('') + '</div>'
   }
-  if (unchecked.length) h += '<div class="pr-unlist">' + unchecked.map(uncheckedHtml).join('') + '</div>'
+  // several refs that couldn't be checked fold into one "+4 not checked" row
+  if (unchecked.length === 1) h += '<div class="pr-unlist">' + uncheckedHtml(unchecked[0]) + '</div>'
+  else if (unchecked.length > 1) h += '<details class="pr-unfold"><summary class="pr-unsum">' + STATE_IC.unchecked + '<span>+' + unchecked.length + ' not checked</span></summary><div class="pr-unlist">' + unchecked.map(uncheckedHtml).join('') + '</div></details>'
   if (!n) h += '<p class="nocp pr-none" data-tip="' + esc(PR_HOW) + '">No PR found for this session' + (noPrWhy(s) ? '<span class="pr-none-why"> · ' + esc(noPrWhy(s)) + '</span>' : '') +
     (mayEdit ? ' · <label class="linkish pr-none-link" for="' + esc(prInputId(s.id)) + '">Link a PR…</label>' : '') + '</p>'
-  if (mayEdit) h += '<form class="prlink addform sess-add" data-pr-link="' + esc(s.id) + '" autocomplete="off"><input id="' + esc(prInputId(s.id)) + '" name="ref" type="text" inputmode="url" placeholder="Link a PR: paste its link or #number" aria-label="Link a PR: paste its link or #number" autocapitalize="off" spellcheck="false" enterkeyhint="done"><button type="submit" class="btn sm">Link</button></form>'
+  const form = '<form class="prlink addform sess-add" data-pr-link="' + esc(s.id) + '" autocomplete="off"><input id="' + esc(prInputId(s.id)) + '" name="ref" type="text" inputmode="url" placeholder="Link a PR: paste its link or #number" aria-label="Link a PR: paste its link or #number" autocapitalize="off" spellcheck="false" enterkeyhint="done"><button type="submit" class="btn sm">Link</button></form>'
+  // 2026-10-29: with PRs already linked, the box waits behind one quiet "Link another PR…"
+  if (mayEdit) h += n ? '<details class="pr-linkd"><summary class="linkish">Link another PR…</summary>' + form + '</details>' : form
   return h
 }
 // 2026-10-28 No PR: one quiet line saying why, then Link a PR… (it focuses the box below).

package/ui/recap-line.js

@@ -3,18 +3,21 @@
 // says where the session is (the daemon drops it once you prompt again).
 // Before /clear: what this tab was doing before a /clear, with a link to it.
 // Pure: the board passes its own esc / ago / clock, so this runs under node too.
+// 0.9.19: the words are Claude's, so `code` and **bold** render (escaped first, no links).
+import { mdInline } from './changelog-md.js'
+const md = (t) => mdInline(t, { links: false })
 
 export function recapLineHtml(s, { esc, ago = () => '', clock = () => '' }) {
   const r = s && s.recap
   if (!r || !r.text) return ''
   const tip = 'Claude Code’s recap' + (r.at ? ' · ' + ago(r.at) + (clock(r.at) ? ' (' + clock(r.at) + ')' : '') : '')
-  return '<p class="recap-line" data-tip="' + esc(tip) + '"><span class="rl-k">Recap</span> ' + esc(r.text) + '</p>'
+  return '<p class="recap-line" data-tip="' + esc(tip) + '"><span class="rl-k">Recap</span> ' + md(r.text) + '</p>'
 }
 
 export function beforeClearHtml(s, { esc }) {
   const b = s && s.beforeClear
   if (!b || !b.goal) return ''
   const href = b.sessionId ? '#/s/' + encodeURIComponent(b.sessionId) : null
-  const words = esc(b.goal) + (b.stoppedAt ? ' <span class="bc-stop">· stopped at: ' + esc(b.stoppedAt) + '</span>' : '')
+  const words = md(b.goal) + (b.stoppedAt ? ' <span class="bc-stop">· stopped at: ' + md(b.stoppedAt) + '</span>' : '')
   return '<p class="before-clear"><span class="rl-k">Before /clear</span> ' + (href ? '<a href="' + esc(href) + '" data-tip="The session before /clear">' + words + '</a>' : words) + '</p>'
 }