@leftoff/cli 0.9.6 → 0.9.8-beta.1

package/ui/wizard.js

@@ -0,0 +1,158 @@
+// The board's first-run setup wizard (0.9.7): #/setup. Shown once on a Mac's
+// board (GET /v1/setup says whether it was seen), reachable later from
+// Settings → Updates & about → "Run setup again". Every step is skippable and
+// nothing here is a new setting: it shows what Leftoff already knows, the exact
+// command for anything left, a Test for the summarizer and a test notification.
+// Closing it (✕, Esc, "Open the board") marks it seen.
+// wizardHtml() is pure (test/unit/wizard-097.test.mjs reads it); mountWizard() wires it up.
+
+const ESC = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c])
+
+// The steps you move through; the last one is the summary.
+export function wizardSteps(state) { return (state && Array.isArray(state.steps) ? state.steps : []) }
+
+function fixHtml(fix, esc) {
+  if (!fix || !fix.cmd) return ''
+  return '<div class="wz-fix"><div class="wz-fix-what">' + esc(fix.what) + '</div><div class="wz-cmdrow"><code class="wz-cmd">' + esc(fix.cmd) + '</code>' +
+    '<button type="button" class="btn wz-copy" data-action="copy-cmd" data-cmd="' + esc(fix.cmd) + '" aria-label="Copy: ' + esc(fix.cmd) + '">Copy</button></div></div>'
+}
+function statusHtml(st, esc) {
+  const mark = st.status === 'done' ? '✓' : st.status === 'todo' ? '!' : 'i'
+  const word = st.status === 'done' ? 'Done' : st.status === 'todo' ? 'To do' : 'Optional'
+  return '<div class="wz-status s-' + esc(st.status) + '"><span class="wz-mark" aria-hidden="true">' + mark + '</span><div><div class="wz-title"><span class="sr-only">' + word + ': </span>' + esc(st.title) + '</div>' +
+    (st.detail ? '<div class="wz-detail">' + esc(st.detail) + '</div>' : '') + '</div></div>'
+}
+
+function bodyHtml(st, ui, esc) {
+  let h = statusHtml(st, esc)
+  if (st.key === 'claude') {
+    h += '<p class="wz-p">Leftoff reads your Claude Code sessions through its mod. In any session, <code>/cp</code> makes a checkpoint and <code>/leftoff</code> lists every open session.</p>'
+  } else if (st.key === 'summaries') {
+    const o = st.ollama
+    if (o) h += '<ul class="wz-list"><li><span class="wz-dot ' + (o.running ? 'up' : 'down') + '" aria-hidden="true"></span>Ollama ' + (o.running ? 'is running' + (o.version ? ' (' + esc(o.version) + ')' : '') : o.installed ? 'is installed but not running' : 'isn’t installed') + '</li>' +
+      (o.running ? '<li><span class="wz-dot ' + (o.models.length ? 'up' : 'down') + '" aria-hidden="true"></span>' + (o.models.length ? 'Models: ' + esc(o.models.slice(0, 6).join(', ')) + (o.models.length > 6 ? ' and ' + (o.models.length - 6) + ' more' : '') : 'No models downloaded yet') + '</li>' : '') + '</ul>'
+    if (st.mayTest) {
+      h += '<div class="wz-actions"><button type="button" class="btn" data-wz="test-summary"' + (ui.testing ? ' disabled' : '') + '>' + (ui.testing ? 'Testing…' : 'Test') + '</button><span class="wz-hint">Writes one checkpoint of a sample session. Nothing is saved.</span></div>'
+      const t = ui.testResult
+      if (t && t.ok) h += '<div class="wz-result ok" role="status"><div><b>Doing</b> ' + esc(t.doing) + '</div><div><b>Stopped at</b> ' + esc(t.stoppedAt) + '</div><div><b>Next</b> ' + esc(t.next) + '</div><div class="wz-hint">' + esc((t.generator && t.generator.by) || '') + (t.ms != null ? ' · ' + (t.ms / 1000).toFixed(1) + ' s' : '') + '</div></div>'
+      else if (t) h += '<div class="wz-result bad" role="alert">The test didn’t work: ' + esc(t.error || 'no answer') + '</div>'
+    } else h += '<p class="wz-hint">Test it on the Mac’s own board.</p>'
+    h += '<p class="wz-p"><a href="#/settings/models">Models &amp; summaries</a> has every choice.</p>'
+  } else if (st.key === 'macs') {
+    if (st.peers && st.peers.length) h += '<ul class="wz-list">' + st.peers.map((p) => '<li><span class="wz-dot ' + (p.reachable ? 'up' : p.reachable === false ? 'down' : '') + '" aria-hidden="true"></span>' + esc(p.machine) + ' <span class="wz-hint">' + (p.reachable ? 'reachable' : p.reachable === false ? 'not reachable' + (p.lastError ? ': ' + esc(p.lastError) : '') : 'not checked yet') + '</span></li>').join('') + '</ul>'
+    h += '<p class="wz-p">Your Macs share one folder (Syncthing, iCloud Drive or Dropbox). Leftoff links them directly, without Tailscale.</p>'
+  } else if (st.key === 'phone') {
+    if (st.boardUrl) h += '<p class="wz-p"><a href="' + esc(st.boardUrl) + '" target="_blank" rel="noopener noreferrer">' + esc(st.boardUrl.replace(/^https:\/\//, '').replace(/\/$/, '')) + ' ↗</a></p>'
+    h += '<p class="wz-p">The pairing QR code is in <a href="#/settings/phone">Settings → Phone &amp; remote</a>. The hosted relay is a free beta.</p>'
+  } else if (st.key === 'notifications') {
+    if (st.events && st.events.length) h += '<ul class="wz-list">' + st.events.map((e) => '<li><span class="wz-chip ' + (e.on ? 'on' : 'off') + '">' + (e.on ? 'On' : 'Off') + '</span>' + esc(e.label) + '</li>').join('') + '</ul>'
+    if (st.mayTest) {
+      h += '<div class="wz-actions"><button type="button" class="btn" data-wz="test-notification"' + (ui.notifying ? ' disabled' : '') + '>' + (ui.notifying ? 'Sending…' : 'Send a test notification') + '</button></div>'
+      const n = ui.notifyResult
+      if (n && n.ok) h += '<div class="wz-result ok" role="status">Sent to ' + esc(n.machine || 'this Mac') + '. It should appear at the top right of the screen.</div>'
+      else if (n) h += '<div class="wz-result bad" role="alert">Not sent: ' + esc(n.skipped || n.error || 'unknown') + '</div>'
+    }
+    h += '<p class="wz-p">Change it in <a href="#/settings/general">Settings → General</a>.</p>'
+  }
+  if (st.key !== 'summary') h += fixHtml(st.fix, esc)
+  return h
+}
+
+function summaryHtml(state, ui, esc) {
+  const steps = wizardSteps(state).filter((s) => s.key !== 'summary')
+  let h = '<ul class="wz-sumlist">' + steps.map((s) => {
+    const skipped = ui.skipped && ui.skipped.has(s.key) && s.status !== 'done'
+    const cls = s.status === 'done' ? 'wz-done' : s.status === 'todo' ? 'wz-todo' : 'wz-info'
+    return '<li class="' + cls + '"><span class="wz-mark" aria-hidden="true">' + (s.status === 'done' ? '✓' : s.status === 'todo' ? '!' : 'i') + '</span><span><b>' + esc(s.label) + '</b> ' + esc(s.title) + (skipped ? ' <span class="wz-hint">(skipped)</span>' : '') + '</span></li>'
+  }).join('') + '</ul>'
+  const out = state.outstanding || []
+  if (out.length) {
+    h += '<h3 class="wz-h3">' + out.length + (out.length === 1 ? ' step' : ' steps') + ' outstanding</h3>'
+    h += out.map((o) => fixHtml(o, esc)).join('')
+  } else h += '<p class="wz-p wz-allset">All set.</p>'
+  return h
+}
+
+// -> the whole wizard's HTML for step i (0-based). ui: { testing, testResult, notifying, notifyResult, skipped:Set }
+export function wizardHtml(state, i = 0, ui = {}, { esc = ESC } = {}) {
+  const steps = wizardSteps(state)
+  if (!steps.length) return '<section class="wz"><div class="empty">Setup isn’t available.</div></section>'
+  const n = Math.max(0, Math.min(steps.length - 1, i))
+  const st = steps[n]
+  const real = steps.length - 1 // the summary isn't counted
+  const isSummary = st.key === 'summary'
+  const bar = '<ol class="wz-bar" aria-label="Setup steps">' + steps.map((s, k) => {
+    const cls = [k === n ? 'on' : '', s.status === 'done' && s.key !== 'summary' ? 'done' : '', ui.skipped && ui.skipped.has(s.key) ? 'skipped' : ''].filter(Boolean).join(' ')
+    const mark = s.status === 'done' && s.key !== 'summary' ? '✓' : String(k + 1)
+    return '<li class="' + cls + '"><button type="button" data-wz-go="' + k + '"' + (k === n ? ' aria-current="step"' : '') + '><span class="wz-num" aria-hidden="true">' + mark + '</span><span class="wz-lbl">' + esc(s.label) + '</span></button></li>'
+  }).join('') + '</ol>'
+  const count = isSummary ? 'Summary' : 'Step ' + (n + 1) + ' of ' + real
+  const nav = '<div class="wz-nav">' +
+    (n > 0 ? '<button type="button" class="btn wz-back" data-wz="back">Back</button>' : '<span></span>') +
+    '<div class="wz-nav-r">' + (isSummary ? '<button type="button" class="btn primary" data-wz="finish">Open the board</button>'
+      : '<button type="button" class="btn wz-skip" data-wz="skip">Skip</button><button type="button" class="btn primary" data-wz="next">Continue</button>') + '</div></div>'
+  return '<section class="wz" aria-labelledby="wzTitle">' +
+    '<div class="wz-top"><div><h1 id="wzTitle" class="wz-h1">Set up Leftoff</h1><div class="wz-count" aria-live="polite">' + count + '</div></div>' +
+    '<button type="button" class="btn wz-close" data-wz="close" aria-label="Close setup">Close</button></div>' + bar +
+    '<div class="wz-card" tabindex="-1" id="wzCard"><h2 class="wz-step">' + esc(isSummary ? 'Summary' : st.label) + '</h2>' + (isSummary ? summaryHtml(state, ui, esc) : bodyHtml(st, ui, esc)) + '</div>' + nav +
+    (state.local === false ? '<p class="wz-hint wz-remote">Tests run on the Mac’s own board.</p>' : '') + '</section>'
+}
+
+// Wire it into el. deps: { api(method, path, body, opts), esc, onDone() }
+export async function mountWizard(el, { api, esc = ESC, onDone = () => { location.hash = '#/' } } = {}) {
+  if (el._wzOff) el._wzOff()
+  const ui = { skipped: new Set(), testing: false, testResult: null, notifying: false, notifyResult: null }
+  let state = await api('GET', '/v1/setup')
+  let i = 0
+  const paint = (focus) => {
+    el.innerHTML = wizardHtml(state, i, ui, { esc })
+    if (focus) { const c = el.querySelector('#wzCard'); if (c) c.focus({ preventScroll: true }); window.scrollTo(0, 0) }
+  }
+  const done = async (how) => {
+    off()
+    try { await api('POST', '/v1/setup/seen', { how }) } catch {}
+    onDone()
+  }
+  const onKey = (ev) => { if (ev.key === 'Escape' && !document.querySelector('.menu.open, dialog[open]')) { ev.preventDefault(); done('closed') } }
+  document.addEventListener('keydown', onKey)
+  // Leaving #/setup any other way also counts as seen.
+  const onHash = () => { if (!/^#\/setup/.test(location.hash)) { off(); api('POST', '/v1/setup/seen', { how: 'closed' }).catch(() => {}) } }
+  window.addEventListener('hashchange', onHash)
+  const onClick = async (ev) => {
+    const go = ev.target.closest('[data-wz-go]')
+    if (go) { i = Number(go.dataset.wzGo); return paint(true) }
+    const b = ev.target.closest('[data-wz]')
+    if (!b) return
+    const steps = wizardSteps(state)
+    const a = b.dataset.wz
+    if (a === 'back') { i = Math.max(0, i - 1); return paint(true) }
+    if (a === 'next' || a === 'skip') {
+      if (a === 'skip') ui.skipped.add(steps[i].key)
+      i = Math.min(steps.length - 1, i + 1)
+      if (steps[i] && steps[i].key === 'summary') { try { state = await api('GET', '/v1/setup') } catch {} }
+      return paint(true)
+    }
+    if (a === 'close') return done('closed')
+    if (a === 'finish') return done('finished')
+    if (a === 'test-summary') {
+      ui.testing = true; ui.testResult = null; paint()
+      try { ui.testResult = await api('POST', '/v1/setup/test-summary', {}, { timeoutMs: 120000 }) } catch (e) { ui.testResult = { ok: false, error: e.message } }
+      ui.testing = false; return paint()
+    }
+    if (a === 'test-notification') {
+      ui.notifying = true; ui.notifyResult = null; paint()
+      try { ui.notifyResult = await api('POST', '/v1/setup/test-notification', {}) } catch (e) { ui.notifyResult = { ok: false, error: e.message } }
+      ui.notifying = false; return paint()
+    }
+  }
+  el.addEventListener('click', onClick)
+  const off = () => { el.removeEventListener('click', onClick); document.removeEventListener('keydown', onKey); window.removeEventListener('hashchange', onHash); el._wzOff = null }
+  el._wzOff = off
+  paint(true)
+}
+
+// Should the board open the wizard by itself? Once, on a Mac's own board, from
+// the board view, when the daemon says so (auto: a real `leftoff serve`, not a test board).
+export function shouldAutoOpen(state, routeName) {
+  return !!state && state.auto === true && state.seen === false && state.local !== false && (!routeName || routeName === 'board')
+}