@leftoff/cli 0.9.8-beta.18 → 0.9.8-beta.19

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

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.9.8-beta.18",
+  "version": "0.9.8-beta.19",
   "description": "Leftoff (formerly Checkpoints): WTF was I working on? Tracks every Claude Code session on this machine, writes a 3-line checkpoint when one goes quiet, and adds /cp (checkpoint now), /cp-name and a /leftoff pane. Talks to the local Leftoff daemon on 127.0.0.1:7429 and falls back to writing markdown in ~/checkpoints.",
   "author": {
     "name": "Joel"

package/mod/hooks/register.js

@@ -28,7 +28,7 @@ const END_TIMEOUT_MS = 1000
 const MODEL_TIMEOUT_MS = 20000
 
 // Module state. $.state is not used: the pane redraws with $.ui.invalidate.
-const MOD_VERSION = '0.9.8-beta.18' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.9.8-beta.19' // keep in step with .claude-plugin/plugin.json
 
 const st = {
   internal: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftoff/cli",
-  "version": "0.9.8-beta.18",
+  "version": "0.9.8-beta.19",
   "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

@@ -956,25 +956,15 @@ main img, main video { max-width: 100%; height: auto; }
 .md code { overflow-wrap: anywhere; word-break: break-word; }
 .md .where { color: var(--muted); font-family: var(--mono); font-size: 12px; }
 .md li .sub .k { color: var(--faint); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; margin-right: 2px; }
-.dates a .d-short { display: none; }
 .rchip .rl { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
 .tlbar > * { min-width: 0; }
 .tl-head { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
 .need-head > * { min-width: 0; }
 .need-head .need-title { max-width: calc(100% - 20px); }  /* stays beside its dot when it wraps */
 @media (max-width: 900px) {
-  /* past digests: one compact row that scrolls on its own, like Catch me up's */
-  .digest-dates { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px 2px; }
-  .digest-dates::-webkit-scrollbar { display: none; }
-  .digest-dates a { flex: none; display: flex; flex-direction: column; gap: 1px; padding: 6px 11px; font-family: inherit; font-size: 13px; line-height: 1.3; border: 1px solid var(--line); background: var(--card); }
-  .digest-dates a.on { border-color: var(--accent); background: var(--tint-accent); }
-  .digest-dates a .d-iso { display: none; }
-  .digest-dates a .d-short { display: inline; }
-  .digest-dates a .m { margin-left: 0; font-size: 11.5px; }
   .digest-wrap { gap: 12px; margin-top: 12px; }
 }
 @media (max-width: 640px) {
-  .digest-dates { margin: 0 -14px; padding: 0 14px 2px; }
   .md { padding: 16px 16px 18px; }
   .md h1 { font-size: 19px; line-height: 1.3; }
   .md h2 { font-size: 15.5px; margin: 18px 0 6px; }
@@ -2624,3 +2614,95 @@ html.pv-open, html.pv-open body { overflow: hidden; }
 .live-box.off .live-resume-row .copy-float::after { content: attr(data-tip); position: absolute; bottom: calc(100% - 2px); right: 4px; padding: 4px 8px; border-radius: 7px; background: var(--card2); border: 1px solid var(--line-strong); box-shadow: var(--toast-shadow); color: var(--text2); font-size: 12px; line-height: 1.3; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s; pointer-events: none; }
 @media (hover: hover) { .live-box.off .live-resume-row .copy-float:hover::after { opacity: 1; transform: none; transition-delay: .35s; } }
 .live-box.off .live-resume-row .copy-float:focus-visible::after, .live-box.off .live-resume-row .copy-float.copied::after { opacity: 1; transform: none; transition-delay: 0s; }
+
+/* 0.9.8: the digest reads as a brief: Yesterday / Today, Start here, a sentence per session, Finished folded */
+.md p.lede { color: var(--text); font-size: 15px; line-height: 1.5; margin: 8px 0 0; }
+.md p.lede b { font-weight: 650; }
+.md p.lede + p.lede { margin-top: 4px; }
+.md section.start-sec { margin: 16px 0 4px; padding: 10px 14px 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg2); }
+.md section.start-sec h2 { margin: 2px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
+.md ol.start { list-style: none; margin: 0; padding: 0; counter-reset: sh; }
+.md ol.start > li { counter-increment: sh; display: flex; align-items: center; gap: 10px 12px; padding: 9px 0; margin: 0; border-top: 1px solid var(--line); color: var(--text2); }
+.md ol.start > li:first-child { border-top: 0; }
+.md ol.start > li[hidden] { display: none; }
+.md ol.start > li::before { content: counter(sh); flex: none; align-self: flex-start; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--tint-accent); color: var(--accent); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
+.md .sh-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
+.md .sh-step { color: var(--text); font-weight: 600; line-height: 1.4; }
+.md .sh-sess { font-size: 12.5px; color: var(--muted); }
+.md .sh-sess a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
+.md .sh-sess a:hover { color: var(--text); }
+.md .sh-repo { color: var(--faint); white-space: nowrap; }
+.md .sh-repo::before { content: '· '; }
+.md .sh-act { flex: none; display: flex; }
+.md .sh-act .btn { min-height: 44px; min-width: 64px; padding: 0 14px; justify-content: center; font-size: 13px; }
+.md .sh-act .go-off .why { display: none; }
+.md ul:has(> li.bi) { padding-left: 0; }
+.md li.bi { list-style: none; margin: 12px 0; }
+.md .bi-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
+.md .bi-title { color: var(--text); font-weight: 600; text-decoration: none; padding: 2px 0; }
+.md .bi-title:hover { text-decoration: underline; text-underline-offset: 2px; }
+.md .bi-tag { color: var(--faint); font-size: 12px; }
+.md section.start-sec + .digest-hint, .md p.lede + .digest-hint { margin-top: 14px; }
+.md section.start-sec ~ #digestSpaces { margin-top: 16px; }
+.md .bi-say { display: block; color: var(--text2); line-height: 1.45; margin-top: 1px; }
+.md details.fin { margin: 10px 0 4px; }
+.md details.fin[hidden] { display: none; }
+.md details.fin > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-radius: 8px; }
+.md details.fin > summary::-webkit-details-marker { display: none; }
+.md details.fin > summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin: 0 2px 0 1px; }
+.md details.fin[open] > summary::before { transform: rotate(45deg); }
+.md details.fin > summary:hover { color: var(--text); }
+.md details.fin > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.md details.fin > ul { margin-top: -4px; }
+@media (prefers-reduced-motion: reduce) { .md details.fin > summary::before, .digest-cal .cal-fold .ic { transition: none; } }
+@media (max-width: 600px) {
+  .md p.lede { font-size: 15px; }
+  .md section.start-sec { padding: 8px 12px 2px; margin-left: -4px; margin-right: -4px; }
+  .md li.bi { margin: 14px 0; }
+}
+
+/* 0.9.8: past digests as a month calendar (left column; a compact month above the digest on phones) */
+.digest-wrap:has(> .digest-cal) { grid-template-columns: 252px minmax(0, 1fr); }
+.digest-cal { align-self: start; position: sticky; top: 64px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 6px 8px 8px; }
+.digest-cal .cal-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
+.digest-cal .cal-month { font-weight: 600; font-size: 14px; color: var(--text); }
+.digest-cal .cal-nav { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; padding: 0; background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer; }
+.digest-cal .cal-nav:hover:not(:disabled) { background: var(--card2); color: var(--text); }
+.digest-cal .cal-nav:disabled { opacity: .3; cursor: default; }
+.digest-cal .cal-nav:focus { outline: none; }
+.digest-cal .cal-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.digest-cal .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
+.digest-cal .cal-wd { text-align: center; font-size: 11px; font-weight: 600; color: var(--faint); padding: 2px 0 4px; }
+.digest-cal .cal-day { position: relative; height: 34px; display: grid; place-items: center; border-radius: 8px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--faint); }
+.digest-cal .cal-day.pad { visibility: hidden; }
+.digest-cal a.cal-day { color: var(--text); font-weight: 600; text-decoration: none; }
+.digest-cal a.cal-day:hover { background: var(--card2); }
+.digest-cal a.cal-day:focus { outline: none; }
+.digest-cal a.cal-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.digest-cal .cal-day .dot { position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
+.digest-cal .cal-day.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
+.digest-cal a.cal-day.on { background: var(--accent); color: var(--on-accent); }
+.digest-cal a.cal-day.on .dot { background: var(--on-accent); }
+.digest-cal a.cal-day.on.today { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 3.5px var(--card); }
+.digest-cal .cal-none { text-align: center; font-size: 12.5px; color: var(--muted); padding: 8px 4px 2px; }
+@media (pointer: coarse) { .digest-cal .cal-day { height: 44px; } }
+.digest-cal .cal-fold { display: none; }
+@media (max-width: 900px) {
+  /* folded to the picked day's week until the month is opened */
+  .digest-cal .cal-head > span.cal-month { display: none; }
+  .digest-cal .cal-fold { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 600; font-size: 15px; border-radius: 8px; cursor: pointer; }
+  .digest-cal .cal-fold .ic { width: 16px; height: 16px; color: var(--muted); transition: transform .15s; }
+  .digest-cal .cal-fold[aria-expanded="true"] .ic { transform: rotate(180deg); }
+  .digest-cal .cal-fold:focus { outline: none; }
+  .digest-cal .cal-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .digest-cal .cal-grid:not(.open) > .cal-day:not(.wk) { display: none; }
+  .digest-wrap:has(> .digest-cal) { grid-template-columns: minmax(0, 1fr); }
+  .digest-cal { position: static; width: 100%; max-width: 420px; padding: 2px 6px 6px; box-shadow: none; }
+  .digest-cal .cal-day { height: 44px; font-size: 14px; }
+  .digest-cal .cal-wd { padding: 0 0 2px; }
+}
+/* 0.9.8: an Unfinished session: its sentence, with Resume beside it */
+.md li.bi.unf { display: flex; align-items: center; gap: 12px; }
+.md li.bi.unf .bi-body { flex: 1 1 auto; min-width: 0; }
+.md li.bi.unf[hidden] { display: none; }
+

package/ui/app.js

@@ -2275,29 +2275,67 @@ async function viewTimeline() {
   $app.innerHTML = html
 }
 
-function renderMd(md, { spaces = [] } = {}) {
+// 0.9.8: a digest line may end in "<!-- s:<id> -->", its session: the title
+// links there and Start here gets that session's Go / Resume.
+const MD_SID = /\s*<!-- s:(\S+?) -->\s*$/
+function briefAction(id, sessions, viewer) {
+  const open = '<a class="btn sh-open" href="#/s/' + encodeURIComponent(id) + '" aria-label="Open the session">Open</a>'
+  const s = sessions && sessions.get(id)
+  if (!s) return open
+  let b = ''
+  // 0.9.8: closed: Resume opens it in a new tab where it can, else (on the Mac) copies the resume command
+  if (s.live === 'closed' || s.status === 'ended') b = resumeButton(s, viewer || {}) || (s.agent || !s.cwd || (viewer && viewer.local === false) || state.viewerLocal === false ? '' : '<button type="button" class="btn" data-action="resume" data-id="' + esc(s.id) + '" aria-label="Copy the resume command">' + icon('copy') + 'Resume</button>')
+  else { const g = goButton(s); b = g && !/disabled/.test(g) ? g : '' }
+  return b || open
+}
+
+function renderMd(md, { spaces = [], sessions = null, viewer = null } = {}) {
   const body = md.replace(/^---\n[\s\S]*?\n---\n/, '')
   const inline = (t) => esc(t).replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>').replace(/`([^`]+)`/g, '<code>$1</code>').replace(/(^|[^\w*])_([^_\s][^_]*?)_(?!\w)/g, '$1<em>$2</em>')  // not inside snake_case names (clutch_hockey)
   const out = []
-  let inList = false, inSec = false
+  let inList = false, inSec = false, inFin = false, seenH2 = false, inUnf = false
+  const closeList = () => { if (inList) { out.push(inList === 'ol' ? '</ol>' : '</ul>'); inList = false } if (inFin) { out.push('</details>'); inFin = false } }
+  const openList = (kind, cls) => { if (inList !== kind) { if (inList) out.push(inList === 'ol' ? '</ol>' : '</ul>'); out.push('<' + kind + (cls ? ' class="' + cls + '"' : '') + '>'); inList = kind } }
+  const href = (id) => '#/s/' + encodeURIComponent(id)
   // v0.5.8: each "## <space>" opens a section with its own Copy for standup;
   // other "## " headings (Lists, Top of mind) are whole-folder sections.
+  // 0.9.8: "## Start here" is the brief's own section, never hidden by a space.
   const openSec = (h) => {
     if (inSec) out.push('</section>')
     inSec = true
-    if (spaces.includes(h)) {
+    if (h === 'Start here') out.push('<section class="start-sec"><h2>' + inline(h) + '</h2>')
+    else if (spaces.includes(h)) {
       out.push('<section class="space-sec" data-space="' + esc(h) + '"><div class="space-head"><h2>' + esc(h) + '</h2>' +
         '<button type="button" class="btn standup-btn' + (h === 'Work' ? ' primary' : '') + '" data-action="standup-copy" data-space="' + esc(h) + '">' + icon('clipboard') + 'Copy for standup</button></div>')
     } else out.push('<section class="other-sec"><h2>' + inline(h) + '</h2>')
   }
-  for (const line of body.split('\n')) {
+  for (const raw of body.split('\n')) {
+    const mid = raw.match(MD_SID)
+    const id = mid ? mid[1] : null
+    const line = mid ? raw.slice(0, mid.index) : raw
+    // 0.9.8: Start here: "1. <step> — **Title** (repo)"
+    const st = /^\d+\. /.test(line) && line.match(/^\d+\. (.*?) — \*\*(.+?)\*\*(?: \(([^)]*)\))?$/)
+    if (st) {
+      openList('ol', 'start')
+      const t = id ? '<a href="' + href(id) + '">' + inline(st[2]) + '</a>' : inline(st[2])
+      out.push('<li' + (id ? ' data-sid="' + esc(id) + '"' : '') + '><div class="sh-main"><span class="sh-step">' + inline(st[1]) + '</span><span class="sh-sess">' + t + (st[3] ? ' <span class="sh-repo">' + esc(st[3]) + '</span>' : '') + '</span></div>' +
+        (id ? '<div class="sh-act">' + briefAction(id, sessions, viewer) + '</div>' : '') + '</li>')
+      continue
+    }
     if (/^- /.test(line)) {
-      if (!inList) { out.push('<ul>'); inList = true }
+      openList('ul')
       // Digest items read "- **Title** (repo · branch) — state": tag the repo so the view can filter.
       const m = line.match(/^- \*\*.*?\*\* \(([^)·]+?)(?: · [^)]*)?\) — /)
+      const attrs = (m ? ' data-repo="' + esc(m[1].trim()) + '"' : '') + (id ? ' data-sid="' + esc(id) + '"' : '')
+      // 0.9.8: "- **Title** (repo · state) — You were …; left off …." with its
+      // session: the title links to it, the sentence under it, the tags quiet.
+      const bi = id && line.match(/^- \*\*(.+?)\*\* \(([^)]*)\) — (.*)$/)
+      // 0.9.8: an Unfinished one is closed, so it has its Resume beside it
+      if (bi && inUnf) { out.push('<li class="bi unf"' + attrs + '><div class="bi-body"><div class="bi-head"><a class="bi-title" href="' + href(id) + '">' + inline(bi[1]) + '</a><span class="bi-tag">' + esc(bi[2]) + '</span></div><span class="bi-say">' + inline(bi[3]) + '</span></div><div class="sh-act">' + briefAction(id, sessions, viewer) + '</div>'); continue }
+      if (bi) { out.push('<li class="bi"' + attrs + '><div class="bi-head"><a class="bi-title" href="' + href(id) + '">' + inline(bi[1]) + '</a><span class="bi-tag">' + esc(bi[2]) + '</span></div><span class="bi-say">' + inline(bi[3]) + '</span>'); continue }
       // v0.5.7: the "(repo · branch · machine)" part is set small so the title leads on a phone.
       const li = inline(line.slice(2)).replace(/^(<strong>.*?<\/strong>) (\([^)]*\))( — )/, '$1 <span class="where">$2</span>$3')
-      out.push('<li' + (m ? ' data-repo="' + esc(m[1].trim()) + '"' : '') + '>' + li); continue
+      out.push('<li' + attrs + '>' + li); continue
     }
     if (/^\s{2,}\S/.test(line) && inList) {
       // "Stopped at: … Next: …" is two lines, each with its label.
@@ -2306,13 +2344,17 @@ function renderMd(md, { spaces = [] } = {}) {
       else out.push('<span class="sub">' + inline(t) + '</span>')
       continue
     }
-    if (inList) { out.push('</ul>'); inList = false }
+    closeList()
+    if (/^#{1,3} /.test(line)) inUnf = /^### Unfinished \(\d+\)\s*$/.test(line)
     if (/^# /.test(line)) out.push('<h1>' + inline(line.slice(2)) + '</h1>')
-    else if (/^## /.test(line)) { if (spaces.length) openSec(line.slice(3).trim()); else out.push('<h2>' + inline(line.slice(3)) + '</h2>') }
+    else if (/^## /.test(line)) { seenH2 = true; const h = line.slice(3).trim(); if (spaces.length || h === 'Start here') openSec(h); else { if (inSec) { out.push('</section>'); inSec = false } out.push('<h2>' + inline(h) + '</h2>') } }
+    // 0.9.8: Finished folds away (older digests' "Finished or closed" too)
+    else if (/^### Finished(?: or closed)? \(\d+\)\s*$/.test(line)) { out.push('<details class="fin"><summary>' + inline(line.slice(4).replace(/ or closed/, '')) + '</summary>'); inFin = true }
     else if (/^### /.test(line)) out.push('<h3>' + inline(line.slice(4)) + '</h3>')
-    else if (line.trim()) out.push('<p>' + inline(line) + '</p>')
+    // 0.9.8: the Yesterday / Today opener, above the first section
+    else if (line.trim()) out.push(seenH2 ? '<p>' + inline(line) + '</p>' : '<p class="lede">' + inline(line).replace(/^(Yesterday|Today):/, '<b>$1:</b>') + '</p>')
   }
-  if (inList) out.push('</ul>')
+  closeList()
   if (inSec) out.push('</section>')
   return out.join('\n')
 }
@@ -2323,6 +2365,81 @@ function shortDay(iso) {
   return isNaN(d) ? iso : d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }).replace(',', '')
 }
 
+// The past-digests calendar (0.9.8): one month at a time, Sunday first. A day
+// with a digest is a link (the shared one, else a Mac's own from before one
+// digest a day); the rest are plain numbers. Opens on the picked digest's
+// month; next stops at this month, prev at the first month with a digest.
+const monthOf = (iso) => String(iso).slice(0, 7)
+const localDay = (t = new Date()) => t.getFullYear() + '-' + String(t.getMonth() + 1).padStart(2, '0') + '-' + String(t.getDate()).padStart(2, '0')
+function shiftMonth(ym, by) {
+  const [y, m] = ym.split('-').map(Number)
+  const d = new Date(y, m - 1 + by, 1)
+  return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0')
+}
+function digestCalendar() {
+  const { days = [], pick = null } = digestUi.cal || {}
+  const today = localDay()
+  const max = monthOf(today)
+  const min = days.length ? days.map((x) => monthOf(x.day)).sort()[0] : max
+  let ym = digestUi.month || max
+  if (ym > max) ym = max
+  if (ym < min) ym = min
+  digestUi.month = ym
+  const [y, m] = ym.split('-').map(Number)
+  const first = new Date(y, m - 1, 1)
+  const label = first.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+  const by = new Map(days.map((x) => [x.day, x.d]))
+  const prev = shiftMonth(ym, -1), next = shiftMonth(ym, 1)
+  const name = (x) => new Date(x + '-01T12:00:00').toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+  const navBtn = (to, ok, dir) => '<button type="button" class="cal-nav" data-action="digest-month" data-to="' + to + '"' + (ok ? '' : ' disabled') + ' aria-label="' + (dir < 0 ? 'Previous month, ' : 'Next month, ') + esc(name(to)) + '">' + icon(dir < 0 ? 'chevron-left' : 'chevron-right') + '</button>'
+  // phones fold it to one week (the picked day's) until you open the month
+  const open = !!digestUi.calOpen
+  let h = '<div class="cal-head">' + navBtn(prev, prev >= min, -1) + '<span class="cal-month" aria-live="polite">' + esc(label) + '</span>' +
+    '<button type="button" class="cal-month cal-fold" data-action="digest-cal-fold" aria-expanded="' + open + '" aria-label="' + esc(label) + (open ? ', show one week' : ', show the whole month') + '">' + esc(label) + icon('chevron-down') + '</button>' + navBtn(next, next <= max, 1) + '</div>'
+  h += '<div class="cal-grid' + (open ? ' open' : '') + '">' + ['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((w) => '<span class="cal-wd" aria-hidden="true">' + w + '</span>').join('')
+  const n = new Date(y, m, 0).getDate()
+  const lead0 = first.getDay()
+  const week = (dn) => Math.floor((lead0 + dn - 1) / 7)
+  const inMonth = (x) => x && x.slice(0, 7) === ym
+  const firstHas = days.map((x) => x.day).filter(inMonth).sort()[0]
+  const wk = week(inMonth(pick) ? Number(pick.slice(8)) : inMonth(today) ? Number(today.slice(8)) : firstHas ? Number(firstHas.slice(8)) : 1)
+  for (let i = 0; i < lead0; i++) h += '<span class="cal-day pad' + (wk === 0 ? ' wk' : '') + '" aria-hidden="true"></span>'
+  let count = 0
+  for (let dn = 1; dn <= n; dn++) {
+    const day = ym + '-' + String(dn).padStart(2, '0')
+    const d = by.get(day)
+    const cls = ['cal-day', d ? 'has' : 'none', day === pick ? 'on' : '', day === today ? 'today' : '', week(dn) === wk ? 'wk' : ''].filter(Boolean).join(' ')
+    const long = shortDay(day)
+    if (d) {
+      count++
+      const whose = d.shared ? '' : ', ' + d.machine + '’s own digest'
+      h += '<a class="' + cls + '" href="#/digest/' + day + (d.shared ? '' : '?machine=' + encodeURIComponent(d.machine)) + '" data-day="' + day + '" aria-label="' + esc(long + whose + (day === today ? ', today' : '')) + '"' + (day === pick ? ' aria-current="date"' : '') + '><span class="n">' + dn + '</span><span class="dot" aria-hidden="true"></span></a>'
+    } else h += '<span class="' + cls + '" data-day="' + day + '"><span class="n">' + dn + '</span></span>'
+  }
+  h += '</div>'
+  if (!count) h += '<div class="cal-none">' + (days.length ? 'No digests in ' + esc(first.toLocaleDateString('en-US', { month: 'long' })) + '.' : 'None yet') + '</div>'
+  return h
+}
+
+// Month or fold changed: patch the calendar in place, so the arrows (and the
+// focus on them, with its keyboard ring) stay put.
+function repaintCalendar() {
+  const nav = document.querySelector('nav.digest-cal')
+  if (!nav) return null
+  const t = document.createElement('div')
+  t.innerHTML = digestCalendar()
+  const now = [...nav.querySelectorAll('.cal-head > *')], fresh = [...t.querySelectorAll('.cal-head > *')]
+  now.forEach((el, i) => {
+    const f = fresh[i]
+    for (const a of ['data-to', 'aria-label', 'aria-expanded']) if (f.hasAttribute(a)) el.setAttribute(a, f.getAttribute(a))
+    el.disabled = !!f.disabled
+    if (!el.classList.contains('cal-nav')) el.innerHTML = f.innerHTML
+  })
+  for (const el of nav.querySelectorAll('.cal-grid, .cal-none')) el.remove()
+  nav.append(...t.querySelectorAll('.cal-grid, .cal-none'))
+  return nav
+}
+
 // Digest (v0.5.8): one digest a day for the whole folder. The strip has one
 // pill per day: the shared digest, else (days from before 0.5.8) a Mac's own,
 // labelled with that Mac. Space tabs (All / Work / Personal …) sit above the
@@ -2347,16 +2464,16 @@ async function viewDigest(date, machine) {
   const who = dg.order && dg.order.length > 1 ? ' Made by ' + esc(dg.order[0]) + ' (first in line), or the next Mac awake ' + esc(dg.graceMin) + ' min later.' : ''
   const nextLine = todayLine + (dg.time ? 'Next automatic digest: ' + esc(when(dg.nextAt) || 'at ' + dg.time) + ' · ' + esc(dg.daysLabel || 'Every day') + ', ' + esc(dg.label || dg.time) + '.' + who : 'Automatic digests are off (<a href="#/settings/digest">Settings → Digest</a>).')
   if (dg.lastError) html += '<div class="banner warn" role="status"><span class="grow"><b>The last digest failed</b> (' + esc(ago(dg.lastError.at)) + '): ' + esc(dg.lastError.message) + '. Generate now tries again; <code>leftoff doctor</code> shows it too.</span></div>'
-  html += '<div class="digest-wrap"><nav class="dates digest-dates" aria-label="Past digests">' + (days.length ? days.map((day) => {
-    const d = lead(day)
-    const on = pick === day
-    const label = d.shared ? '' : d.machine
-    return '<a href="#/digest/' + day + (d.shared ? '' : '?machine=' + encodeURIComponent(d.machine)) + '" class="' + (on ? 'on' : '') + '" title="' + esc(day + (d.shared ? '' : ' · ' + d.machine + '’s own digest (from before one digest a day)')) + '"><span class="d-iso">' + day + '</span><span class="d-short">' + esc(shortDay(day)) + '</span>' + (label ? ' <span class="m">' + esc(label) + '</span>' : '') + '</a>'
-  }).join('') : '<span class="nocp">None yet</span>') + '</nav>'
+  // 0.9.8: a month calendar, not a long list: days with a digest are links
+  if (digestUi.date !== pick || !digestUi.month) { digestUi.month = monthOf(pick || localDay()); digestUi.calOpen = false }
+  digestUi.cal = { days: days.map((day) => ({ day, d: lead(day) })), pick }
+  html += '<div class="digest-wrap"><nav class="digest-cal" aria-label="Past digests">' + digestCalendar() + '</nav>'
   let spaces = []
   if (pick) {
     try {
-      const d = await api('GET', '/v1/digests/' + pick + (pickD.machine ? '?machine=' + encodeURIComponent(pickD.machine) : ''))
+      // 0.9.8: the sessions too, for Start here's Go / Resume
+      const [d, sv] = await Promise.all([api('GET', '/v1/digests/' + pick + (pickD.machine ? '?machine=' + encodeURIComponent(pickD.machine) : '')), api('GET', '/v1/sessions?limit=500&archived=1').catch(() => null)])
+      if (sv) { state.sessions = sv.sessions || []; if (sv.viewer) { state.viewerLocal = sv.viewer.local !== false; state.ghostty = sv.viewer.ghostty === true } }
       const fm = d.meta || {}
       const madeAt = fm.generated_at
       spaces = Array.isArray(fm.spaces) ? fm.spaces.map(String) : []
@@ -2366,10 +2483,14 @@ async function viewDigest(date, machine) {
       const also = others.length ? '<div class="digest-also">Also for this day: ' + others.map((x) => '<a href="#/digest/' + x.date + (x.shared ? '' : '?machine=' + encodeURIComponent(x.machine)) + '">' + esc(x.shared ? 'the shared digest' : x.machine + '’s') + '</a>').join(' · ') + '</div>' : ''
       const unnamed = spv && spaces.some((x) => (spv.machines || []).some((m) => !m.set && m.machine === x)) ? '<div class="digest-hint">Spaces are named after your Macs until you pick one for each: <a href="#/settings/spaces">Settings → Spaces</a> (Work, Personal or your own).</div>' : ''
       html += '<article class="md"><div class="digest-meta">' + legacy + (madeAt ? 'Made ' + esc(clock(madeAt)) + whose + ' · ' : '') + nextLine + '</div>' + also + unnamed +
-        '<div id="digestSpaces"></div><div class="repos digest-repos" id="digestRepos"></div>' + renderMd(d.markdown, { spaces }) + '</article>'
+        '<div id="digestSpaces"></div><div class="repos digest-repos" id="digestRepos"></div>' + renderMd(d.markdown, { spaces, sessions: sv ? new Map((sv.sessions || []).map((x) => [x.id, x])) : null, viewer: sv && sv.viewer }) + '</article>'
     } catch (e) { html += '<div class="empty">' + esc(e.message) + '</div>' }
   } else html += '<div class="empty"><p><strong>No digest yet.</strong></p><p>' + nextLine + '</p><p><button type="button" class="btn primary" data-action="gen-digest">Generate now</button> makes one from your sessions so far.</p></div>'
   $app.innerHTML = html + '</div>'
+  // 0.9.8: the brief comes first; the space tabs and repo chips sit under it, over the sessions they filter
+  const art = $app.querySelector('article.md')
+  const after = art && (art.querySelector(':scope > section.start-sec') || [...art.querySelectorAll(':scope > p.lede')].pop())
+  if (after) after.after(...['.digest-hint', '#digestSpaces', '#digestRepos'].map((q) => art.querySelector(q)).filter(Boolean))
   const params = (state.route && state.route.params) || new URLSearchParams()
   state.digestRepos = readFilter(params, window.localStorage).repos
   state.digestSpaces = spaces
@@ -2391,7 +2512,7 @@ function paintDigestFilter() {
   const spaces = state.digestSpaces || []
   const sp = state.digestSpace
   const secs = [...document.querySelectorAll('.md section')]
-  for (const sec of secs) sec.hidden = !!sp && (sec.classList.contains('other-sec') || sec.dataset.space !== sp)
+  for (const sec of secs) sec.hidden = !sec.classList.contains('start-sec') && !!sp && (sec.classList.contains('other-sec') || sec.dataset.space !== sp)
   const tabsBox = document.getElementById('digestSpaces')
   if (tabsBox) {
     const counts = new Map(spaces.map((x) => [x, document.querySelectorAll('.md section[data-space="' + CSS.escape(x) + '"] li[data-repo]').length]))
@@ -2409,8 +2530,19 @@ function paintDigestFilter() {
     const any = [...ul.children].some((li) => !li.hidden)
     ul.hidden = !any
     if (h && (h.tagName === 'H2' || h.tagName === 'H3')) h.hidden = !any
+    const fin = ul.closest('details.fin')
+    if (fin) fin.hidden = !any
   }
   if (sel.length) for (const sec of secs) if (sec.classList.contains('space-sec') && !sec.hidden && ![...sec.querySelectorAll('li[data-repo]')].some((li) => !li.hidden)) sec.hidden = true
+  // 0.9.8: a Start here step follows its session's line: hidden with it (space or repo)
+  const startSec = document.querySelector('.md section.start-sec')
+  if (startSec) {
+    for (const li of startSec.querySelectorAll('li[data-sid]')) {
+      const twin = [...document.querySelectorAll('.md li[data-repo][data-sid]')].find((x) => x.dataset.sid === li.dataset.sid)
+      li.hidden = !!twin && (twin.hidden || !!(twin.closest('section') && twin.closest('section').hidden))
+    }
+    startSec.hidden = ![...startSec.querySelectorAll('ol.start > li')].some((li) => !li.hidden)
+  }
   if (counts.size < 2) { box.innerHTML = ''; return }
   const on = (r) => sel.some((tok) => repoMatches({ repoKey: r, repoLabel: r }, tok))
   box.innerHTML = '<div class="track"><button type="button" class="rchip all' + (sel.length ? '' : ' on') + '" data-action="digest-repo" data-repo=""><span class="rl">All</span><span class="rc">' + items.length + '</span></button>' +
@@ -5162,6 +5294,19 @@ document.addEventListener('click', async (ev) => {
       saveSpace(state.digestSpace)
       return paintDigestFilter()
     }
+    if (action === 'digest-cal-fold') {
+      digestUi.calOpen = !digestUi.calOpen
+      repaintCalendar()
+      return
+    }
+    if (action === 'digest-month') {
+      const back = btn.dataset.to < (digestUi.month || '')
+      digestUi.month = btn.dataset.to
+      digestUi.calOpen = true // another month: show all of it
+      const nav = repaintCalendar()
+      if (nav && btn.disabled) { const [p, n] = nav.querySelectorAll('.cal-nav'); const b = back ? n : p; if (!b.disabled) b.focus() } // the end of the range: focus stays on the arrows
+      return
+    }
     if (action === 'standup-copy') return standupCopy(btn)
     if (action === 'standup-close') { const b = btn.closest('.standup-out'); if (b) b.remove(); digestUi.open = null; return }
     if (action === 'space-quick' || action === 'space-repo-add' || action === 'space-unset') return spacesAction(action, btn)