@leftoff/cli 0.9.3 → 0.9.5

package/ui/app.js

@@ -4,6 +4,9 @@ import { goWithFeedback, goState, GIVE_UP_MS } from './go.js'
 import { icon } from './icons.js'
 import { selectHtml, comboHtml, closeMenu, openActionMenu, closeActionMenu, actionMenuKey, openNameSheet } from './picker.js'
 import { SETTINGS, settingsKeyFor } from './settings-nav.js'
+import { changedKeys } from './settings-dirty.js'
+import { looksMd, stripMd, plainCp } from './cp-text.js'
+import { beginWriting, settleWriting, reconcileWriting, dismissWriting, isWriting, writingText, WRITING_SYNC_MS, FRESH_MS } from './writing.js'
 import { inStatus, repoChips, applyFilter, readFilter, saveRepos, filterHash, toggleRepo, chipSelected, splitChips, repoMatches, orderSelectedFirst, searchMatches, saveProject, inProject, projectChips, projectLabel } from './repos.js'
 import { needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer, turnsHtml, dismissedHtml } from './needs.js'
 import { SUMMARY_EXAMPLES, LENGTH_CHOICES } from './summary-examples.js'
@@ -11,7 +14,7 @@ import { mdInline, renderSection } from './changelog-md.js'
 import { cardPrsHtml, sessionPrsSection, prsPageHtml, prsBodyHtml, prRowHtml, prRows, readPrFilter, prsHash } from './prs.js'
 import { wantsSetupBanner, setupCandidate, localLeftoffAnswers, thisOneSuffix } from './viewer.js'
 import { defaultEmoji, PICKER_SET, isEmoji } from './machines.js'
-import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref, docMenuItems, docFileName } from './handoffs.js'
+import { todosSection, sessionTodosSection, cardHandoffChips, sessionFilesSection, docViewerBody, docDownloadHref, docMenuItems, docFileName, renderDoc } from './handoffs.js'
 const $app = document.getElementById('app')
 const state = { sessions: [], health: null, cfg: null, route: null, machine: localStorage.getItem('cp.machine') || '', drafts: {}, pendingAsk: {}, mayAnswer: true, needOpen: {}, needTurns: {} }
 const multi = () => !!(state.health && state.health.machines && state.health.machines.length > 1)
@@ -128,14 +131,23 @@ function cpExtras(cp) {
 }
 
 // more: show the informative / long sections, folded (open: unfolded).
-function cpBlock(cp, { showWhen = true, more = false, open = false } = {}) {
+// 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.
+function cpBlock(cp, { showWhen = true, more = false, open = false, md = false } = {}) {
   if (!cp) return '<div class="nocp">No checkpoint yet. One appears when the session goes quiet, or press “Checkpoint now”.</div>'
   const you = /^YOU:/i.test(cp.next || '')
   const n = EXTRA_TITLES.filter(([k]) => (Array.isArray(cp[k]) ? cp[k].length : !!cp[k])).length
-  return '<dl class="cp">' +
-    '<dt>Doing</dt><dd>' + fmtCode(cp.doing) + '</dd>' +
-    '<dt>Stopped</dt><dd>' + fmtCode(cp.stoppedAt) + '</dd>' +
-    '<dt>Next</dt><dd class="next' + (you ? ' you' : '') + '">' + fmtCode(cp.next) + '</dd>' +
+  const dd = (t, cls = '') => {
+    if (md && looksMd(t)) return '<dd class="' + (cls ? cls + ' ' : '') + 'cp-md">' + renderDoc(t) + '</dd>'
+    const plainT = looksMd(t) ? stripMd(t) : String(t == null ? '' : t)
+    const long = (cp.format === 'markdown' || looksMd(t)) ? plainT.length > 160 : plainT.length > 600
+    const c = (cls + (!md && long ? ' clamp' : '')).trim()
+    return '<dd' + (c ? ' class="' + c + '"' : '') + '>' + fmtCode(plainT) + '</dd>'
+  }
+  return '<dl class="cp' + (cp.format === 'markdown' ? ' cp-salvaged' : '') + '">' +
+    '<dt>Doing</dt>' + dd(cp.doing) +
+    '<dt>Stopped</dt>' + dd(cp.stoppedAt) +
+    '<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 ? ' · by ' + esc(cp.generator.by) : '') + '</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>' : '')
@@ -420,17 +432,19 @@ function copyResumeIcon(s) {
   return '<button type="button" class="btn icon-btn copy-resume" data-action="resume" data-id="' + esc(s.id) + '" aria-label="Copy resume command" title="Copy resume command">' + icon('copy') + '</button>'
 }
 // items: [{ action, label, icon, title, attrs }]
-// 0.9.2: an item may also be { note } (a plain line, no button) or { row: [items], label }
-// (small buttons side by side, e.g. the other checkpoint lengths), and carry a sub line.
+// 0.9.2: an item may also be { note } (a plain line, no button) and carry a sub line.
+// 0.9.4: or { …item, more: { title, items } }: the row does its action, and a ›
+// at its right edge opens a second page of items (e.g. the checkpoint lengths,
+// each with { sub, on }).
 function moreMenu(s, items, { project = true, title = '' } = {}) {
   items = items.concat([project ? projectMenuItem(s) : null]).filter(Boolean) // 0.9.0: Add to project… on every card with a repo
   if (!items.length) return ''
   const btn = (it) => '<button type="button" data-action="' + esc(it.action) + '" data-id="' + esc(s.id) + '"' +
-    Object.entries(it.attrs || {}).map(([k, v]) => ' ' + k + '="' + esc(v) + '"').join('') + (it.title ? ' title="' + esc(it.title) + '"' : '') + (it.sub ? ' data-sub="' + esc(it.sub) + '"' : '') + '>' +
+    Object.entries(it.attrs || {}).map(([k, v]) => ' ' + k + '="' + esc(v) + '"').join('') + (it.title ? ' title="' + esc(it.title) + '"' : '') + (it.sub ? ' data-sub="' + esc(it.sub) + '"' : '') + (it.on ? ' data-on="' + esc(it.onLabel || 'on') + '"' : '') + '>' +
     (it.icon ? icon(it.icon) : '') + esc(it.label) + '</button>'
   return '<button type="button" class="btn icon-btn more" data-action="card-more" data-id="' + esc(s.id) + '"' + (title ? ' data-menu-title="' + esc(title) + '"' : '') + ' aria-label="More actions" title="More actions" aria-haspopup="menu" aria-expanded="false">' + icon('ellipsis') + '</button>' +
     '<template class="more-items">' + items.map((it) => it.note ? '<div class="more-note">' + (it.icon ? icon(it.icon) : '') + esc(it.note) + '</div>'
-      : it.row ? '<div class="more-row" data-label="' + esc(it.label || '') + '">' + it.row.map(btn).join('') + '</div>' : btn(it)).join('') + '</template>'
+      : it.more ? '<div class="more-split" data-more-title="' + esc(it.more.title) + '">' + btn(it) + '<div class="more-sub">' + it.more.items.map(btn).join('') + '</div></div>' : btn(it)).join('') + '</template>'
 }
 function openCardMenu(btn) {
   const tpl = btn.parentElement && btn.parentElement.querySelector('template.more-items')
@@ -440,12 +454,12 @@ function openCardMenu(btn) {
   const toItem = (b) => {
     const svg = b.querySelector('svg')
     const attrs = {}
-    for (const a of b.attributes) if ((a.name.startsWith('data-') && a.name !== 'data-sub') || a.name === 'title') attrs[a.name] = a.value
-    return { label: b.textContent.trim(), icon: svg ? svg.outerHTML : '', attrs, ...(b.dataset.sub ? { sub: b.dataset.sub } : {}) }
+    for (const a of b.attributes) if ((a.name.startsWith('data-') && a.name !== 'data-sub' && a.name !== 'data-on') || a.name === 'title') attrs[a.name] = a.value
+    return { label: b.textContent.trim(), icon: svg ? svg.outerHTML : '', attrs, ...(b.dataset.sub ? { sub: b.dataset.sub } : {}), ...(b.dataset.on ? { on: true, onLabel: b.dataset.on } : {}) }
   }
   const items = [...tpl.content.children].map((el) => {
     if (el.classList.contains('more-note')) { const svg = el.querySelector('svg'); return { note: el.textContent.trim(), icon: svg ? svg.outerHTML : '' } }
-    if (el.classList.contains('more-row')) return { row: [...el.querySelectorAll('button')].map(toItem), label: el.dataset.label || '' }
+    if (el.classList.contains('more-split')) return { ...toItem(el.querySelector(':scope > button')), more: { title: el.dataset.moreTitle || '', items: [...el.querySelectorAll('.more-sub > button')].map(toItem) } }
     return el.tagName === 'BUTTON' ? toItem(el) : null
   }).filter(Boolean)
   lastMenuAnchor = btn
@@ -463,12 +477,36 @@ function reachOf(s) {
 // The length "Checkpoint now" writes: yours from Settings → Summaries.
 function defaultLength() { const k = state.cfg && state.cfg.summary && state.cfg.summary.length; return LENGTH_CHOICES.some((o) => o.key === k) ? k : 'informative' }
 const lengthLabel = (k) => (LENGTH_CHOICES.find((o) => o.key === k) || LENGTH_CHOICES[1]).label
-// Checkpoint now at your length, then the other two lengths side by side.
+// 0.9.5: "Checkpoint now" in flight stays on screen (ui/writing.js) until it lands
+// or fails; the checkpoint that lands gets a short highlight.
+state.writing = {}
+state.cpFresh = {}
+function writingFor(s) {
+  const w = reconcileWriting(state.writing, s)
+  if (w && w.landed) { state.cpFresh[w.landed] = Date.now(); return null }
+  return w
+}
+const isFresh = (cp) => !!(cp && state.cpFresh[cp.id] && Date.now() - state.cpFresh[cp.id] < FRESH_MS)
+function writingLine(s, w, cls = '') {
+  const busy = w.phase === 'writing' || w.phase === 'syncing'
+  return '<div class="cp-writing ' + w.phase + (cls ? ' ' + cls : '') + '" role="' + (w.phase === 'failed' ? 'alert' : 'status') + '" data-writing="' + esc(s.id) + '">' +
+    (busy ? '<span class="spin" aria-hidden="true"></span>' : w.phase === 'failed' ? icon('info') : icon('history')) +
+    '<span class="wtext">' + esc(writingText(w, lengthLabel)) + '</span>' +
+    (busy ? '' : '<button type="button" class="icon wx" data-action="writing-dismiss" data-id="' + esc(s.id) + '" aria-label="Dismiss" title="Dismiss">' + icon('x') + '</button>') + '</div>'
+}
+// The card's checkpoint area: the writing line above the old checkpoint (dimmed while it's written).
+function cpArea(s, block) {
+  const w = writingFor(s)
+  if (!w) return isFresh(s.latestCheckpoint) ? '<div class="cp-fresh">' + block + '</div>' : block
+  return writingLine(s, w) + (isWriting(state.writing, s.id) ? '<div class="cp-stale" aria-hidden="true">' + block + '</div>' : block)
+}
+// 0.9.4: one row, "Checkpoint now" at your length; its › opens Short /
+// Informative / Long, each with its line, your default ticked.
 function checkpointItems() {
   const def = defaultLength()
   return [
-    { action: 'checkpoint', label: 'Checkpoint now', icon: 'bookmark-plus', sub: lengthLabel(def) + ' · your default', attrs: { 'data-length': def } },
-    { row: LENGTH_CHOICES.filter((o) => o.key !== def).map((o) => ({ action: 'checkpoint', label: o.label, title: o.label + ' checkpoint: ' + o.blurb, attrs: { 'data-length': o.key } })), label: 'Or' },
+    { action: 'checkpoint', label: 'Checkpoint now', icon: 'bookmark-plus', title: 'Checkpoint now · ' + lengthLabel(def), attrs: { 'data-length': def },
+      more: { title: 'Checkpoint length', items: LENGTH_CHOICES.map((o) => ({ action: 'checkpoint', label: o.label, sub: o.blurb, on: o.key === def, onLabel: 'your default', attrs: { 'data-length': o.key } })) } },
   ]
 }
 // The ⋯ menu when the Mac a session lives on can't be reached: why, in plain
@@ -502,6 +540,11 @@ const sessionMenuItems = (s) => { const r = reachOf(s); return r === 'local' ||
 // length; the chevron opens Short / Informative / Long (our menu, a sheet on a phone).
 function checkpointSplit(s) {
   const def = defaultLength()
+  if (isWriting(state.writing, s.id)) { // 0.9.5: busy until the checkpoint lands
+    return '<span class="split is-writing" role="group" aria-label="Checkpoint now" aria-busy="true">' +
+      '<button type="button" class="btn primary split-main" disabled aria-disabled="true" data-id="' + esc(s.id) + '"><span class="spin" aria-hidden="true"></span>Writing…</button>' +
+      '<button type="button" class="btn primary split-more" disabled aria-disabled="true" aria-label="Checkpoint length">' + icon('chevron-down') + '</button></span>'
+  }
   return '<span class="split" role="group" aria-label="Checkpoint now">' +
     '<button type="button" class="btn primary split-main" data-action="checkpoint" data-id="' + esc(s.id) + '" data-length="' + esc(def) + '" title="' + esc('Checkpoint now · ' + lengthLabel(def) + (s.isLocal ? '' : ' · written on ' + s.machine)) + '">Checkpoint now</button>' +
     '<button type="button" class="btn primary split-more" data-action="cp-lengths" data-id="' + esc(s.id) + '" aria-label="Checkpoint length" title="Choose the length" aria-haspopup="menu" aria-expanded="false">' + icon('chevron-down') + '</button></span>'
@@ -532,7 +575,7 @@ function card(s) {
     '</div>' + pill(s.status) + '</div>' +
     '<div class="meta">' + spaceChip(s) + where(s) + (ln ? '<span class="livenote ' + esc(s.live) + '">' + esc(ln) + '</span>' : '') + (endedNote ? '<span>' + esc(endedNote) + '</span>' : '') + '<span>·</span><span>' + esc(s.turns) + (s.turns === 1 ? ' turn' : ' turns') + (s.historyTurns ? ' · resumed (' + esc(s.historyTurns) + ' before)' : s.startSource === 'resume' && !s.turns ? ' · resumed' : s.empty && s.live !== 'closed' ? ' · no prompt yet' : '') + '</span>' +
       (s.needsInput && s.lastNotification && !s.needsYou ? '<span class="chip">' + esc(s.lastNotification.replace(/_/g, ' ')) + '</span>' : '') + '</div>' +
-    cardPrsHtml(s.prs) + listChips(s) + cardHandoffChips(s) + nb + cpBlock(s.latestCheckpoint) +
+    cardPrsHtml(s.prs) + listChips(s) + cardHandoffChips(s) + nb + cpArea(s, cpBlock(s.latestCheckpoint)) +
     '<a class="cplink" href="#/s/' + encodeURIComponent(s.id) + '">' + (s.checkpointCount ? s.checkpointCount + (s.checkpointCount === 1 ? ' checkpoint' : ' checkpoints') : 'Session history') + ' →</a>' +
     '<div class="actions-row">' + (goButton(s) || (s.status === 'ended' || s.live === 'closed' ? resumeButton(s, s.viewer || { local: state.viewerLocal !== false, ghostty: !!state.ghostty }) : '')) +
       copyResumeIcon(s) +
@@ -949,7 +992,7 @@ function parkedCard(s, viewer) {
   const p = s.parked || {}
   const open = s.status !== 'ended' && s.live !== 'closed'
   const cp = s.latestCheckpoint
-  const note = p.note || (cp && cp.next) || ''
+  const note = p.note || (cp && plainCp(cp.next)) || ''
   const main = open ? goButton(s) : resumeButton(s, viewer)
   return '<article class="card is-parked parked-card" data-id="' + esc(s.id) + '" data-href="' + esc(href) + '">' +
     '<div class="row1"><div class="title"><a href="' + href + '">' + esc(s.title || 'Untitled session') + '</a></div><span class="pill s-parked">parked</span></div>' +
@@ -1203,8 +1246,12 @@ async function viewSession(id) {
   html += '<section class="slists" id="lists">' + sessionListsSection(s) + '</section>'
   html += '<h2>Checkpoints <span class="count">' + s.checkpointCount + '</span></h2>'
   const newestCp = s.checkpoints.filter((cp) => !cp.doubt).reduce((a, b) => (!a || String(b.createdAt) > String(a.createdAt) ? b : a), null)
-  if (!s.checkpoints.length) html += '<div class="empty">No checkpoints yet.</div>'
-  else html += '<div class="timeline">' + cpTimeline(s.checkpoints.filter((cp) => !cp.doubt), newestCp) + '</div>'
+  // 0.9.5: the one being written, at the top of the list until it lands
+  const wr = writingFor(s)
+  const wrRow = wr ? '<div class="tl-item tl-writing">' + writingLine(s, wr, 'tl') + '</div>' : ''
+  const live = s.checkpoints.filter((cp) => !cp.doubt)
+  if (!live.length && !wrRow) html += '<div class="empty">No checkpoints yet.</div>'
+  else html += '<div class="timeline">' + wrRow + cpTimeline(live, newestCp) + '</div>'
   // 0.9.0: checkpoints written while Leftoff had another session's branch for this one: kept, folded away
   const doubted = s.checkpoints.filter((cp) => cp.doubt && cp.doubt !== 'empty')
   if (doubted.length) html += '<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>'
@@ -1215,9 +1262,9 @@ async function viewSession(id) {
 }
 function cpTimeline(list, newestCp) {
   return list.map((cp) =>
-    '<div class="tl-item ' + esc(cp.trigger) + '"><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>' +
+    '<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(cp.generator.by) + (cp.generator.model ? ' / ' + esc(cp.generator.model) : '') + (cp.generator.backend === 'ollama' ? ' · Ollama' : '') + '</span>' : '') + '</div>' +
-    cpBlock(cp, { showWhen: false, more: true, open: cp === newestCp }) +
+    cpBlock(cp, { showWhen: false, more: true, open: cp === newestCp, md: true }) +
     (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>' : '') +
     '</div>').join('')
@@ -1762,8 +1809,12 @@ function onPull(v) {
   const was = state.pulls[v.tag]
   state.pulls[v.tag] = v
   if (state.route && state.route.name === 'settings') {
-    if (v.done && (!was || !was.done) && v.use) { const m = document.getElementById('f-model'); if (m) m.value = v.tag; const sel = document.getElementById('f-mode'); if (sel) sel.value = 'ollama' }
-    paintModels()
+    if (v.done && (!was || !was.done) && v.use) {
+      const m = document.getElementById('f-model'); if (m) m.value = v.tag; const sel = document.getElementById('f-mode'); if (sel) sel.value = 'ollama'
+      // the daemon switched the summarizer itself: that's saved, not a change to save (0.9.5)
+      if (saveUi.base) { saveUi.base.provider = 'ollama'; saveUi.base.model = v.tag; saveUi.base.baseUrl = settingsValues().baseUrl }
+    }
+    paintModels(); paintSave()
   }
   if (v.done && (!was || !was.done)) toast(v.use ? 'Downloaded ' + v.tag + '. Checkpoints now summarize with it.' : 'Downloaded ' + v.tag, 6000)
   if (v.error && (!was || !was.error)) toast('Couldn’t download ' + v.tag + ': ' + v.error, 10000)
@@ -1801,7 +1852,7 @@ async function tryLength() {
   try {
     const cp = await api('POST', '/v1/checkpoints/preview', { sessionId: s.id, length: k })
     box.innerHTML = '<div class="ex-head">Your session · ' + esc(s.title || 'Untitled') + ' <span class="faint">' + esc(k) + (cp.generator && cp.generator.by ? ' · by ' + esc(cp.generator.by) + (cp.generator.model ? ' / ' + esc(cp.generator.model) : '') + (cp.generator.backend === 'ollama' ? ' · Ollama' : '') : '') + ' · not saved</span></div>' +
-      cpBlock(cp, { showWhen: false }) + (hasExtras(cp) ? '<div class="cpx">' + cpExtras(cp) + '</div>' : '')
+      cpBlock(cp, { showWhen: false, md: true }) + (hasExtras(cp) ? '<div class="cpx">' + cpExtras(cp) + '</div>' : '')
   } catch (e) { box.innerHTML = lengthExample(k); toast('Couldn’t write it: ' + e.message) }
 }
 
@@ -2161,6 +2212,63 @@ function phonePane(relay, remote, unavailable) {
   return any + advanced('phone', adv.join('') + '<div class="section">Over Tailscale</div>' + ts)
 }
 
+// Settings → Save (0.9.5): Save is on only while the form differs from what was
+// last saved (ui/settings-dirty.js), so a missed "Saved" toast can't leave you
+// guessing. The values are exactly what Save sends.
+const saveUi = { base: null, saving: false, timer: null }
+function settingsValues() {
+  const $ = (id) => document.getElementById(id)
+  const val = (id) => { const el = $(id); return el && el.value != null ? String(el.value) : '' }
+  const on = (id) => { const el = $(id); return !!(el && el.checked) }
+  const prov = val('f-mode') || 'auto'
+  const f = PROVIDER_FIELDS[prov] || PROVIDER_FIELDS.auto
+  const ra = $('f-remote-answers')
+  return {
+    provider: prov,
+    model: (f.model && (val('f-model-other').trim() || val('f-model').trim())) || 'haiku',
+    baseUrl: (f.base && val('f-base').trim()) || null,
+    key: f.key ? val('f-key').trim() : '',
+    dormantAfterMin: Number(val('f-dormant')),
+    minGapMin: Number(val('f-gap')),
+    digest: {
+      time: val('f-time') || null,
+      days: [...document.querySelectorAll('.days .day[aria-pressed="true"]')].map((b) => b.dataset.day),
+      skipEmpty: on('f-skip'),
+      timeZone: val('f-tz') || null,
+    },
+    length: ((document.querySelector('input[name="f-length"]:checked') || {}).value) || 'informative',
+    updates: on('f-updates'),
+    notify: on('f-notify'),
+    remoteAnswers: ra && !ra.disabled ? ra.checked : null,
+  }
+}
+const settingsChanged = () => saveUi.base && document.getElementById('settingsForm') ? changedKeys(saveUi.base, settingsValues()) : []
+// Where each value lives, to name the sections with unsaved changes.
+const SAVE_FIELD = { provider: 'f-mode', model: 'f-model', baseUrl: 'f-base', key: 'f-key', dormantAfterMin: 'f-dormant', minGapMin: 'f-gap', digest: 'f-time', length: 'f-length-example', updates: 'f-updates', notify: 'f-notify', remoteAnswers: 'f-remote-answers' }
+function paintSave() {
+  const box = document.getElementById('setSave')
+  const btn = box && box.querySelector('button[type=submit]')
+  if (!btn) return
+  const keys = settingsChanged()
+  const dirty = keys.length > 0
+  btn.disabled = !dirty || saveUi.saving
+  btn.setAttribute('aria-disabled', String(btn.disabled))
+  btn.title = dirty ? '' : 'Nothing to save'
+  box.classList.toggle('dirty', dirty)
+  const note = document.getElementById('setSaveNote')
+  if (!note) return
+  const secs = []
+  for (const k of keys) {
+    const el = document.getElementById(SAVE_FIELD[k] || '')
+    const pane = el && el.closest('.set-pane')
+    const sec = pane && SETTINGS.find((x) => x.key === pane.dataset.sec)
+    if (sec && !secs.includes(sec.label)) secs.push(sec.label)
+  }
+  note.textContent = saveUi.saving ? 'Saving…' : dirty ? 'Unsaved changes' + (secs.length ? ' in ' + secs.join(', ') : '') : 'Everything’s saved'
+}
+// After the click/key that changed something has done its work (a model card, a day button).
+function queueSave() { clearTimeout(saveUi.timer); saveUi.timer = setTimeout(paintSave, 0) }
+
 async function viewSettings() {
   const [c, , remote, sync, peers, st, , , relay, gh] = await Promise.all([api('GET', '/v1/config'), spacesLoad(), api('GET', '/v1/remote').catch(() => null), api('GET', '/v1/sync').catch(() => null), api('GET', '/v1/peers').catch(() => null), api('GET', '/v1/syncthing').catch(() => null), refreshHealth().catch(() => null), agentsLoad(), api('GET', '/v1/relay').catch(() => null), api('GET', '/v1/gh').catch(() => null)])
   state.relay = relay
@@ -2221,7 +2329,7 @@ async function viewSettings() {
     '<div class="set-main"><div class="set-head"><a class="set-back" href="#/settings">' + icon('chevron-left') + 'Settings</a><h2 id="setTitle"></h2><div class="sub" id="setSub"></div></div>' +
       '<form class="form" id="settingsForm" autocomplete="off">' +
       SETTINGS.map((x) => '<section class="set-pane" data-sec="' + x.key + '" aria-label="' + esc(x.label) + '" hidden>' + panes[x.key] + '</section>').join('') +
-      '<div class="full set-save" id="setSave"><span class="faint">Saves every section to config.json in your Leftoff folder.</span><button class="btn primary" type="submit">' + icon('check') + 'Save</button></div></form></div></div>'
+      '<div class="full set-save" id="setSave"><span class="faint" id="setSaveNote">Saves every section to config.json in your Leftoff folder.</span><button class="btn primary" type="submit" disabled aria-disabled="true">' + icon('check') + 'Save</button></div></form></div></div>'
   showSettingsSection(r)
   paintSettingsDots()
   syncProviderFields()
@@ -2251,6 +2359,10 @@ async function viewSettings() {
     if (ev.key === 'Escape' && f.value) { ev.preventDefault(); f.value = ''; settingsUi.q = ''; settingsFilter() }
     if (ev.key === 'Enter') { ev.preventDefault(); const k = settingsFilter(); if (k) location.hash = '#/settings/' + k }
   })
+  // 0.9.5: what's on screen now is what's saved; Save comes on with the first change.
+  saveUi.base = settingsValues(); saveUi.saving = false; paintSave()
+  const form = document.getElementById('settingsForm')
+  for (const t of ['input', 'change', 'click', 'keyup']) form.addEventListener(t, queueSave)
 }
 
 // ------------------------------------------------------------ sync and other machines (v0.5.2)
@@ -3166,7 +3278,7 @@ function searchGroups(q, r) {
     if ((r.lists || []).length) groups.push(['Lists', r.lists.slice(0, 4).map((l) => ({ href: listHref(l.ref), title: l.name, sub: [l.repo, l.progress].filter(Boolean).join(' · '), icon: 'list-checks' }))])
     if ((r.todos || []).length) groups.push(['To-dos', r.todos.slice(0, 4).map((t) => ({ href: t.sessionId ? '#/s/' + encodeURIComponent(t.sessionId) : '#/waiting', title: t.text, sub: t.sessionTitle || '', icon: 'circle-check' }))])
     if ((r.files || []).length) groups.push(['Files', r.files.slice(0, 5).map((f) => ({ href: '#/s/' + encodeURIComponent(f.sessionId), title: f.name, sub: f.sessionTitle || '', icon: 'file-text' }))])
-    if (r.checkpoints.length) groups.push(['Checkpoints', r.checkpoints.slice(0, 4).map((cp) => ({ href: '#/s/' + encodeURIComponent(cp.sessionId), title: cp.doing || cp.next || 'Checkpoint', sub: [cp.sessionTitle || 'Untitled', cp.createdAt ? clock(cp.createdAt) : ''].filter(Boolean).join(' · '), icon: 'check' }))])
+    if (r.checkpoints.length) groups.push(['Checkpoints', r.checkpoints.slice(0, 4).map((cp) => ({ href: '#/s/' + encodeURIComponent(cp.sessionId), title: plainCp(cp.doing || cp.next) || 'Checkpoint', sub: [cp.sessionTitle || 'Untitled', cp.createdAt ? clock(cp.createdAt) : ''].filter(Boolean).join(' · '), icon: 'check' }))])
   }
   if (acts.length) groups.push(['Actions', acts.slice(0, low ? 4 : 5)])
   if (sets.length) groups.push(['Settings', sets.slice(0, 5)])
@@ -3508,7 +3620,7 @@ document.addEventListener('click', async (ev) => {
       if (btn.dataset.needsDl) { toast('Download it first: press Download & use'); return }
       document.getElementById('f-model').value = btn.dataset.tag
       const o = document.getElementById('f-model-other'); if (o) o.value = ''
-      return paintModels()
+      paintModels(); return paintSave()
     }
     if (action === 'ollama-start') {
       btn.disabled = true; btn.textContent = 'Starting…'
@@ -3528,11 +3640,11 @@ document.addEventListener('click', async (ev) => {
     if (action === 'day-toggle') {
       const on = btn.getAttribute('aria-pressed') === 'true'
       if (on && document.querySelectorAll('.days .day[aria-pressed="true"]').length === 1) { toast('Pick at least one day'); return }
-      btn.setAttribute('aria-pressed', String(!on)); return
+      btn.setAttribute('aria-pressed', String(!on)); return paintSave()
     }
     if (action === 'days-preset') {
       const want = btn.dataset.days === 'weekdays' ? ['mon', 'tue', 'wed', 'thu', 'fri'] : DAY_KEYS.map(([k]) => k)
-      document.querySelectorAll('.days .day').forEach((b) => b.setAttribute('aria-pressed', String(want.includes(b.dataset.day)))); return
+      document.querySelectorAll('.days .day').forEach((b) => b.setAttribute('aria-pressed', String(want.includes(b.dataset.day)))); return paintSave()
     }
     if (action === 'repo-all') {
       state.moreOpen = false
@@ -3628,17 +3740,29 @@ document.addEventListener('click', async (ev) => {
       const cmd = s ? s.resumeCommand : (await api('GET', '/v1/sessions/' + encodeURIComponent(id))).resumeCommand
       if (await copy(cmd) && btn.classList.contains('copy-resume')) copiedMark(btn)
     } else if (action === 'checkpoint') {
-      // 0.9.2: any length (data-length), and another Mac's session too: its Leftoff writes it
+      // 0.9.2: any length (data-length), and another Mac's session too: its Leftoff writes it.
+      // 0.9.5: "Writing checkpoint…" stays on the card and the session page until it lands or fails.
       const length = btn.dataset.length || null
       const away = s && !s.isLocal ? s.machine : null
-      const was = btn.innerHTML
-      btn.disabled = true; btn.textContent = 'Writing…'
-      if (!btn.isConnected || btn.classList.contains('palette-proxy') || !btn.closest('.split')) toast('Writing ' + (length ? lengthLabel(length).toLowerCase() + ' ' : 'a ') + 'checkpoint' + (away ? ' on ' + away : '') + '…', 40000) // from a menu (closed) or ⌘K
-      let cp
-      try { cp = await api('POST', '/v1/sessions/' + encodeURIComponent(id) + '/checkpoints', { trigger: 'manual', generate: true, ...(length ? { length } : {}) }) }
-      catch (e) { toast(e.message, 6000); if (btn.isConnected) { btn.disabled = false; btn.innerHTML = was } return }
-      toast('Checkpoint saved' + (cp.peer ? ' on ' + cp.peer : '') + ' · Next: ' + cp.next)
+      if (isWriting(state.writing, id)) { toast('Already writing a checkpoint for this session'); return }
+      beginWriting(state.writing, id, { length: length || defaultLength(), lastCpId: (s && s.lastCheckpointId) || null, machine: away })
+      const req = api('POST', '/v1/sessions/' + encodeURIComponent(id) + '/checkpoints', { trigger: 'manual', generate: true, ...(length ? { length } : {}) }).then((cp) => ({ cp }), (e) => ({ e }))
+      await render()
+      // nothing on screen shows it (⌘K from another page): say it once
+      if (![...document.querySelectorAll('[data-writing]')].some((el) => el.dataset.writing === id)) toast('Writing ' + (length ? lengthLabel(length).toLowerCase() + ' ' : 'a ') + 'checkpoint' + (away ? ' on ' + away : '') + '…', 40000)
+      const { cp, e } = await req
+      if (e && e.code === 'peer_slow') {
+        settleWriting(state.writing, id, { slow: true })
+        setTimeout(() => { if (state.writing[id] && !busy() && state.route && /^(board|s)$/.test(state.route.name || 'board')) render() }, WRITING_SYNC_MS + 300)
+        return render()
+      }
+      if (e) { settleWriting(state.writing, id, { error: e.message }); toast(e.message, 6000); return render() }
+      settleWriting(state.writing, id, { ok: true })
+      state.cpFresh[cp.id] = Date.now()
+      toast('Checkpoint saved' + (cp.peer ? ' on ' + cp.peer : '') + ' · Next: ' + plainCp(cp.next))
       render()
+    } else if (action === 'writing-dismiss') {
+      dismissWriting(state.writing, btn.dataset.id || id); render()
     } else if (action === 'cp-lengths') {
       ev.preventDefault(); return openLengthMenu(btn, id)
     } else if (action === 'peer-recheck') {
@@ -4014,33 +4138,27 @@ document.addEventListener('submit', async (ev) => {
     location.hash = it ? it.href : q ? '#/search?q=' + encodeURIComponent(q) : location.hash
   } else if (ev.target.id === 'settingsForm') {
     ev.preventDefault()
+    // 0.9.5: nothing to save while the form matches what's saved (Save is off then too)
+    if (saveUi.saving || !settingsChanged().length) return
+    saveUi.saving = true; paintSave()
     try {
-      const prov = document.getElementById('f-mode').value
-      const f = PROVIDER_FIELDS[prov] || PROVIDER_FIELDS.auto
+      const v = settingsValues()
+      const prov = v.provider
       const prev = (state.cfg && state.cfg.summarizer) || {}
       const changed = String(prev.provider || 'auto').toLowerCase() !== prov
-      const summarizer = {
-        provider: prov,
-        model: (f.model && (((document.getElementById('f-model-other') || {}).value || '').trim() || document.getElementById('f-model').value.trim())) || 'haiku',
-        baseUrl: (f.base && document.getElementById('f-base').value.trim()) || null,
-      }
+      const summarizer = { provider: prov, model: v.model, baseUrl: v.baseUrl }
       // A key setting from another provider must not follow the switch.
       if (changed) { summarizer.apiKeyEnv = null; summarizer.apiKeyFile = null }
-      const key = f.key ? document.getElementById('f-key').value.trim() : ''
-      if (key) await api('PUT', '/v1/config/keys/' + f.key, { key })
+      const key = v.key
+      if (key) await api('PUT', '/v1/config/keys/' + (PROVIDER_FIELDS[prov] || PROVIDER_FIELDS.auto).key, { key })
       await api('PATCH', '/v1/config', {
-        dormantAfterMin: Number(document.getElementById('f-dormant').value),
-        minGapMin: Number(document.getElementById('f-gap').value),
-        digest: {
-          time: document.getElementById('f-time').value || null,
-          days: [...document.querySelectorAll('.days .day[aria-pressed="true"]')].map((b) => b.dataset.day),
-          skipEmpty: document.getElementById('f-skip').checked,
-          timeZone: document.getElementById('f-tz').value || null,
-        },
+        dormantAfterMin: v.dormantAfterMin,
+        minGapMin: v.minGapMin,
+        digest: v.digest,
         summarizer,
-        summary: { length: ((document.querySelector('input[name="f-length"]:checked') || {}).value) || 'informative' },
-        updates: { check: document.getElementById('f-updates').checked },
-        notify: { needsYou: document.getElementById('f-notify').checked },
+        summary: { length: v.length },
+        updates: { check: v.updates },
+        notify: { needsYou: v.notify },
         ...(() => {
           const el = document.getElementById('f-remote-answers')
           if (!el || el.disabled || el.checked === !!(state.cfg.remote && state.cfg.remote.allowAnswers)) return {}
@@ -4048,11 +4166,15 @@ document.addEventListener('submit', async (ev) => {
           return { remote: { allowAnswers: el.checked } }
         })(),
       })
+      // Saved: what's on screen is now what's saved, so Save goes off until the next edit.
+      const kf = document.getElementById('f-key'); if (kf) kf.value = ''
+      saveUi.base = settingsValues()
       toast(key ? 'Saved · key stored in .secret/' : 'Saved'); render(); refreshHealth()
-    } catch (e) { toast(e.message) }
+    } catch (e) { toast(e.message) } finally { saveUi.saving = false; paintSave() }
   }
 })
 
+
 // Live updates over SSE; re-render the current view, at most every 800 ms.
 let pending = null
 const busy = () => !!document.querySelector('.doc-viewer:not([hidden]), .lo-menu, .title input, .repomore[open], .need .deny-form:not([hidden])') || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.addform') && document.activeElement.value) || !!(document.activeElement && document.activeElement.closest && document.activeElement.closest('.need') && /^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName))

package/ui/cp-text.js

@@ -0,0 +1,43 @@
+// 0.9.5: a checkpoint's text can be markdown (a model's write-up kept as it
+// came, see salvageCheckpointReply in mod/hooks/core.js). The session page
+// renders it; cards, the digest and one-line previews show it as plain text,
+// without the ### or ** marks. Shared by the board and the daemon.
+
+// Does this read as markdown (headings, lists, bold, links, fences)?
+export function looksMd(s) {
+  return /(^|\n)\s{0,3}(#{1,6}\s|[-*+]\s+\S|\d{1,3}[.)]\s+\S|>\s|```)|\*\*[^*\n]+\*\*|__[^_\n]+__|\[[^\]\n]+\]\([^)\s]+\)/.test(String(s == null ? '' : s))
+}
+
+// Markdown → one plain line: headings end with ":", list items start with "•",
+// emphasis and link syntax go, `code` stays (the board shows it as code).
+export function stripMd(s) {
+  const text = String(s == null ? '' : s).replace(/\r\n?/g, '\n')
+  const out = []
+  let fence = false
+  for (const raw of text.split('\n')) {
+    let line = raw.trim()
+    if (/^(```|~~~)/.test(line)) { fence = !fence; continue }
+    if (!line) continue
+    if (!fence) {
+      if (/^([-*_])(\s*\1){2,}$/.test(line)) continue // a rule
+      let m
+      if ((m = line.match(/^#{1,6}\s+(.*?)\s*#*$/))) { line = inline(m[1]); if (line && !/[.:!?…]$/.test(line)) line += ':'; out.push(line); continue }
+      line = line.replace(/^>\s?/, '')
+      if ((m = line.match(/^[-*+]\s+(.*)$/))) line = '• ' + m[1]
+    }
+    out.push(fence ? line : inline(line))
+  }
+  return out.join(' ').replace(/\s+/g, ' ').trim()
+}
+function inline(t) {
+  return t
+    .replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1')
+    .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+    .replace(/\*\*([^*]+)\*\*/g, '$1').replace(/__([^_]+)__/g, '$1')
+    .replace(/(^|[^\w*])\*([^*\s][^*]*?)\*(?![\w*])/g, '$1$2').replace(/(^|[^\w])_([^_\s][^_]*?)_(?!\w)/g, '$1$2')
+    .replace(/~~([^~]+)~~/g, '$1')
+    .trim()
+}
+
+// For one-line places: plain when it reads as markdown, as it was otherwise.
+export const plainCp = (s) => (looksMd(s) ? stripMd(s) : String(s == null ? '' : s))

package/ui/handoffs.js

@@ -19,7 +19,7 @@ export function todoRow(t, { agoFn = null, mayEdit = true } = {}) {
 }
 
 export function todoAddForm(sessionId = '') {
-  return '<form class="todo-add addform" data-todo-add="' + esc(sessionId || '-') + '" autocomplete="off"><input type="text" name="todo" maxlength="200" placeholder="Add a to-do" aria-label="Add a to-do" enterkeyhint="done"><button type="submit" class="btn sm">Add</button></form>'
+  return '<form class="todo-add addform sess-add" data-todo-add="' + esc(sessionId || '-') + '" autocomplete="off"><input type="text" name="todo" maxlength="200" placeholder="Add a to-do" aria-label="Add a to-do" enterkeyhint="done"><button type="submit" class="btn sm">Add</button></form>'
 }
 
 // Open to-dos grouped by session (your own, with no session, last).