@leftoff/cli 0.6.3 → 0.6.5

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

@@ -1,6 +1,6 @@
 {
   "name": "leftoff",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "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

@@ -27,7 +27,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.6.3' // keep in step with .claude-plugin/plugin.json
+const MOD_VERSION = '0.6.5' // keep in step with .claude-plugin/plugin.json
 
 const st = {
   internal: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftoff/cli",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "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

@@ -510,6 +510,23 @@ h2 .count { color: var(--faint); font-weight: 500; }
 }
 .tabs a { white-space: nowrap; }
 .recent .hint { color: var(--muted); font-size: 12px; margin-top: 4px; }
+/* Dismiss a need (0.6.5): a 44px target in the card's top-right corner. */
+.need { position: relative; }
+.need:has(.need-dismiss) > .need-head { padding-right: 34px; }
+.need-dismiss { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; border-radius: 10px; cursor: pointer; padding: 0; }
+.need-dismiss:hover { color: var(--text); background: var(--subtle); }
+.need-dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
+.toast.has-action { pointer-events: auto; display: flex; align-items: center; gap: 14px; }
+.toast-undo { border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 700; padding: 10px 6px; margin: -10px -6px; min-height: 44px; cursor: pointer; }
+.dismissed { margin-top: 14px; }
+.dismissed summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 10px 0; }
+.dismissed ul { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 6px; }
+.dismissed li { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
+.dismissed .dl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+.dismissed .dl-title { font-weight: 600; }
+.dismissed .dl-line { color: var(--text2); overflow-wrap: anywhere; }
+.dismissed .dl-at { color: var(--muted); font-size: 12px; }
+.dismissed li .btn { min-height: 44px; }
 
 /* ---------------------------------------------------------------- v0.4.6 */
 /* Safe areas (viewport-fit=cover): notches and the home indicator, in the
@@ -750,6 +767,10 @@ html { background: var(--bg); }
 .chip.warn { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 45%, transparent); background: var(--tint-yellow); }
 .chip .ico, .okbox .ico { width: 13px; height: 13px; }
 .joinline code.cmd { font-family: var(--mono); font-size: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; overflow-wrap: anywhere; min-width: 0; }
+.ghbox { display: contents; }
+.ghcell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.ghrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
+.ghrow .ghwhat { color: var(--text2); min-width: 0; flex: 1 1 200px; }
 .btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, transparent); }
 .wizard { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--subtle); display: flex; flex-direction: column; gap: 12px; min-width: 0; width: 100%; }
 .form .full .wizard { justify-content: flex-start; }
@@ -1280,3 +1301,55 @@ body.pairpage { background: var(--bg); color: var(--text); margin: 0; }
   .card .title input { padding: 2px 6px; }
   .standup-out textarea { line-height: 1.4; }
 }
+
+/* Needs you: context (0.6.4). What Claude said just before it asked, the
+   branch and how long ago, "Show more" with the last turns, the branch's open
+   PR and tap-to-send quick replies. Long code scrolls sideways, never the page. */
+.need-ctx { display: grid; gap: 6px; min-width: 0; }
+.ctx-lines { display: grid; gap: 3px; color: var(--text2); font-size: 13.5px; line-height: 1.45; border-left: 3px solid var(--line-strong); padding: 1px 0 1px 10px; min-width: 0; }
+.ctx-lines p { margin: 0; overflow-wrap: anywhere; }
+.ctx-lines code, .turn-text code { font-size: 12px; background: var(--field); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; }
+.ctx-lines a, .turn-text a { color: var(--accent); }
+.ctx-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; color: var(--muted); font-size: 12px; min-width: 0; }
+.ctx-meta .mono { font-size: 12px; overflow-wrap: anywhere; }
+.linkbtn { background: none; border: 0; padding: 6px 2px; margin-left: auto; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; min-height: 32px; }
+.linkbtn:hover { text-decoration: underline; }
+.linkbtn:focus-visible { outline: 2px solid var(--focus); border-radius: 4px; }
+.need-turns { border-top: 1px solid var(--line); padding-top: 8px; min-width: 0; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }
+.turns { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
+.turn { display: grid; gap: 4px; min-width: 0; }
+.turn-who { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
+.turn.you .turn-who { color: var(--accent); }
+.turn.you .turn-text { background: var(--subtle); border-radius: 8px; padding: 6px 9px; }
+.turn-text { font-size: 13.5px; line-height: 1.45; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
+.turn-text p { margin: 0 0 6px; }
+.turn-text p:last-child { margin-bottom: 0; }
+.turn-asked { font-size: 12px; color: var(--muted); font-style: italic; }
+.turn.asked-only { gap: 0; }
+.turn-text .th { font-weight: 700; }
+.turn-text ul, .turn-text ol { margin: 0 0 6px; padding-left: 20px; }
+.turn-text pre.tcode { margin: 0 0 6px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: var(--mono); font-size: 12px; line-height: 1.45; white-space: pre; overflow-wrap: normal; }
+.turn-text pre.tcode code { background: none; border: 0; padding: 0; font-size: inherit; }
+.tchips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
+.tchip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--text2); background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
+.tchip.err { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
+.need-pr { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; text-decoration: none; color: var(--text); background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; min-width: 0; }
+a.need-pr:hover { border-color: var(--line-strong); }
+.need-pr .pr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; min-width: 0; }
+.need-pr .pr-num { font-weight: 700; font-family: var(--mono); }
+.need-pr .pr-state { font-weight: 600; color: var(--green); }
+.need-pr .pr-state.draft { color: var(--muted); }
+.need-pr .pr-checks { color: var(--muted); }
+.need-pr .pr-checks.pass { color: var(--green); }
+.need-pr .pr-checks.fail { color: var(--red); }
+.need-pr .pr-checks.pending { color: var(--yellow); }
+.need-pr .pr-title { grid-column: 1; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
+.need-pr .pr-go { grid-column: 2; grid-row: 1 / span 2; color: var(--muted); }
+.quick-replies { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
+.quick-replies .qr { font: inherit; font-size: 13px; color: var(--text); background: var(--card2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; min-height: 34px; cursor: pointer; max-width: 100%; text-align: left; }
+.quick-replies .qr:hover:not(:disabled) { border-color: var(--accent); }
+.quick-replies .qr:focus-visible { outline: 2px solid var(--focus); }
+.quick-replies .qr.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card2)); }
+.quick-replies .qr:disabled { opacity: .55; cursor: default; }
+@media (hover: none), (max-width: 700px) { .quick-replies .qr { min-height: 40px; font-size: 14px; } .linkbtn { min-height: 40px; } }
+.need-ctx.open .ctx-lines { display: none; }

package/ui/app.js

@@ -4,12 +4,12 @@ import { goWithFeedback, goState, GIVE_UP_MS } from './go.js'
 import { icon } from './icons.js'
 import { selectHtml, comboHtml, closeMenu } from './picker.js'
 import { SETTINGS, settingsKeyFor } from './settings-nav.js'
-import { repoChips, applyFilter, readFilter, saveRepos, filterHash, toggleRepo, chipSelected, splitChips, repoMatches } from './repos.js'
-import { needsItems, needsStrip, needPanel, agentNeedPanel, httpsOnly, agentReplyButton, agentChipHtml, cardBadge, questionAnswer } from './needs.js'
+import { inStatus, repoChips, applyFilter, readFilter, saveRepos, filterHash, toggleRepo, chipSelected, splitChips, repoMatches } 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'
 import { mdInline, renderSection } from './changelog-md.js'
 const $app = document.getElementById('app')
-const state = { sessions: [], health: null, cfg: null, route: null, machine: localStorage.getItem('cp.machine') || '', drafts: {}, pendingAsk: {}, mayAnswer: true }
+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)
 const agentNames = () => [...new Set(((state.health && state.health.agents) || []).map((a) => a.display || a.name))]
 
@@ -74,10 +74,25 @@ function clock(iso) { return iso ? new Date(iso).toLocaleString(undefined, { mon
 function toast(msg, ms = 2600) {
   const t = document.getElementById('toast')
   t.textContent = msg
+  t.classList.remove('has-action')
   t.classList.add('show')
   clearTimeout(toast.t)
   toast.t = setTimeout(() => t.classList.remove('show'), ms)
 }
+// A toast with an Undo button (0.6.5, dismissing a need): about 5 s.
+function toastUndo(msg, onUndo, ms = 5000) {
+  const t = document.getElementById('toast')
+  t.innerHTML = ''
+  const span = document.createElement('span')
+  span.textContent = msg
+  const b = document.createElement('button')
+  b.type = 'button'; b.className = 'toast-undo'; b.textContent = 'Undo'
+  b.onclick = () => { t.classList.remove('show', 'has-action'); clearTimeout(toast.t); onUndo() }
+  t.append(span, b)
+  t.classList.add('show', 'has-action')
+  clearTimeout(toast.t)
+  toast.t = setTimeout(() => t.classList.remove('show', 'has-action'), ms)
+}
 async function copy(text) {
   try { await navigator.clipboard.writeText(text); toast('Copied: ' + text) } catch { prompt('Copy this:', text) }
 }
@@ -376,7 +391,7 @@ async function viewBoard() {
   const allShown = shown
   const inSpace = sp ? shown.filter((s) => s.space === sp) : shown
   const inRepos = applyFilter(inSpace, { repos: f.repos })
-  const count = (k) => inRepos.filter((s) => FILTERS[k].statuses.includes(s.status)).length
+  const count = (k) => inRepos.filter((s) => inStatus(s, k)).length
   const list = applyFilter(inSpace, f)
   let html = '<div class="pagehead"><div><h1>Sessions</h1><div class="sub">Every Claude Code session on ' + (multi() ? 'your machines' : 'this machine') + (agentNames().length ? ', plus ' + esc(agentNames().join(' and ')) : '') + ', grouped by what needs you.</div></div>' +
     '<div class="actions">' + (multi() || agentNames().length ? selectHtml({ id: 'machineFilter', cls: 'btn', label: 'Machine', value: state.machine,
@@ -484,7 +499,13 @@ async function viewWaiting() {
       (r.where ? '<span class="where">' + esc(r.where) + '</span>' : '') + '</li>').join('') + '</ul>'
       : '<div class="nocp">Nothing yet since the daemon started.</div>') +
     '<div class="hint">Board answers are also written to each session’s answers.md. This list is kept since the daemon last started.</div></details>'
+  html += dismissedHtml(needs.dismissed || [], { open: !!state.dismissedOpen, agoFn: ago })
   $app.innerHTML = banners() + html
+  // Open/closed survives live repaints (0.6.5).
+  const dz = $app.querySelector('details.dismissed')
+  if (dz) dz.addEventListener('toggle', () => { state.dismissedOpen = dz.open })
+  const rc = $app.querySelector('details.recent')
+  if (rc) rc.addEventListener('toggle', () => { state.recentOpen = rc.open })
 }
 
 // The nav's count, the page title and the favicon dot: visible from a background tab.
@@ -507,7 +528,7 @@ function paintNeedsCount(n) {
 
 const IS_MAC = /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent)
 function needOpts(extra = {}) {
-  return { mayAnswer: state.mayAnswer, drafts: state.drafts, pending: state.pendingAsk, goButton: (s) => goButton(s), agoFn: ago, kbd: IS_MAC ? '⌘↵' : 'Ctrl↵', ...extra }
+  return { mayAnswer: state.mayAnswer, drafts: state.drafts, pending: state.pendingAsk, expanded: state.needOpen, turns: state.needTurns, goButton: (s) => goButton(s), agoFn: ago, kbd: IS_MAC ? '⌘↵' : 'Ctrl↵', ...extra }
 }
 
 // ⌘↵ (Ctrl+↵ off a Mac) in a Needs-you text box (the Deny note, a question's
@@ -1424,9 +1445,26 @@ function showSettingsSection(r) {
   if (!wideSettings() || wrap.getBoundingClientRect().top < 0) window.scrollTo(0, 0)
 }
 
+// Settings → General → PR cards (0.6.5): is GitHub's gh installed and signed
+// in on this Mac, and the one-line fix to copy. Nothing installs from here.
+const GH_LABEL = { missing: 'Missing', 'signed-out': 'Signed out', ready: 'Ready' }
+function ghSection(g) {
+  let h = '<label>PR cards</label>'
+  if (!g || !g.status) return h + '<div class="hint">Couldn’t check for gh on this Mac.</div>'
+  const ok = g.status === 'ready'
+  h += '<div class="ghcell"><div class="ghrow"><span class="chip ' + (ok ? 'ok' : 'warn') + '">' + esc(GH_LABEL[g.status] || g.status) + '</span>' +
+    '<span class="ghwhat">' + (ok ? 'gh is signed in' + (g.account ? ' as <b>' + esc(g.account) + '</b>' : '') + '. Cards that need you show the branch’s pull request.' : g.status === 'signed-out' ? 'gh is installed but not signed in to GitHub.' : 'GitHub’s gh isn’t installed on this Mac.') + '</span>' +
+    '<button type="button" class="linkish" data-action="gh-check">Check again</button></div>'
+  if (g.fix && g.fix.cmd) h += '<div class="joinline ghfix"><code class="cmd">' + esc(g.fix.cmd) + '</code><button type="button" class="btn sm" data-action="copy-cmd" data-cmd="' + esc(g.fix.cmd) + '">Copy</button></div>'
+  h += '</div>'
+  if (!ok) h += '<div class="hint">' + (g.fix && g.fix.url ? 'Optional. Install gh from <a href="' + esc(g.fix.url) + '" target="_blank" rel="noopener">cli.github.com</a>, then run this in Terminal.' : 'Optional. Run this in Terminal on this Mac.') + ' Without gh, cards just skip the pull request.</div>'
+  return h
+}
+
 async function viewSettings() {
-  const [c, , remote, sync, peers, st, , , relay] = 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)])
+  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
+  state.gh = gh
   syncUi.data = sync; syncUi.peers = peers; if (st) stUi.data = st
   state.cfg = c
   const sm = c.summarizer || {}
@@ -1443,6 +1481,7 @@ async function viewSettings() {
       '<div class="section">Needs you</div>' +
       '<label for="f-notify">Notify me</label><label class="check"><input id="f-notify" type="checkbox"' + (c.notify && c.notify.needsYou === false ? '' : ' checked') + '><span>Show a macOS notification when a session has waited on a permission prompt or question for ' + esc((c.notify && c.notify.delaySec != null) ? c.notify.delaySec : 10) + ' seconds</span></label>' +
       '<div class="hint">Answered sooner (in the terminal or here), no notification. With <code>terminal-notifier</code> installed (<code>brew install terminal-notifier</code>), clicking the notification jumps to the session.</div>' +
+      '<div id="ghBox" class="ghbox">' + ghSection(gh) + '</div>' +
       '<div class="section">Appearance</div>' +
       '<label>Theme</label><div class="theme" role="group" aria-label="Theme">' + ['light', 'dark', 'system'].map((t) => '<button type="button" data-theme-set="' + t + '" aria-pressed="' + (pref === t) + '">' + THEME_ICONS[t] + (t === 'system' ? 'System' : t[0].toUpperCase() + t.slice(1)) + '</button>').join('') + '</div>',
     digest: digestSettings(c),
@@ -2452,6 +2491,13 @@ document.addEventListener('click', async (ev) => {
   const s = state.sessions.find((x) => x.id === id)
   try {
     if (action === 'copy-cmd') { await copy(btn.dataset.cmd); return }
+    if (action === 'gh-check') {
+      btn.disabled = true
+      try { state.gh = await api('GET', '/v1/gh?fresh=1') } catch { state.gh = null }
+      const box = document.getElementById('ghBox')
+      if (box) box.innerHTML = ghSection(state.gh)
+      return
+    }
     // Use from anywhere (v0.6.0)
     if (action === 'relay-toggle') {
       const on = btn.checked
@@ -2460,6 +2506,7 @@ document.addEventListener('click', async (ev) => {
       try { await api('POST', on ? '/v1/relay/enable' : '/v1/relay/disable', on ? { user } : undefined); toast(on ? 'Use from anywhere is on: connecting to ' + user + '.leftoff.dev' : 'Use from anywhere is off for this Mac') }
       catch (e) { btn.checked = !on; toast(e.message, 5000); return }
       setTimeout(() => { if (state.route && state.route.name === 'settings') render() }, 1200)
+      refreshHealth().catch(() => {})
       return render()
     }
     if (action === 'relay-user') {
@@ -2684,6 +2731,15 @@ document.addEventListener('click', async (ev) => {
     }
     if (action === 'ask-answer' || action === 'ask-pick-send') return answerClick(btn, action)
     if (action === 'reply-send') return replyClick(btn)
+    if (action === 'quick-reply') return quickReplyClick(btn)
+    if (action === 'need-more') return needMoreClick(btn)
+    if (action === 'need-dismiss') return needDismissClick(btn)
+    if (action === 'need-restore' || action === 'need-restore-all') {
+      btn.disabled = true
+      state.dismissedOpen = true
+      try { await api('POST', '/v1/needs/restore', action === 'need-restore-all' ? { all: true } : { key: btn.dataset.need }); toast(action === 'need-restore-all' ? 'Restored' : 'Restored to Needs you') } catch (e) { toast(e.message, 5000); btn.disabled = false; return }
+      return render()
+    }
     if (action === 'go') return goClick(btn, id, s)
     if (action && action.startsWith('st-')) return stAction(action, btn)
     if (action && action.startsWith('sync-') || action === 'peer-trust') return syncAction(action, btn)
@@ -2784,6 +2840,65 @@ async function replyClick(btn) {
   } catch (e) { toast(e.message, 4200) } finally { render() }
 }
 
+// A quick reply (0.6.4): the chip's words go in the answer box and are sent
+// by its own button, exactly as if typed: same request, same checks.
+function quickReplyClick(btn) {
+  const need = btn.closest('.need')
+  if (!need) return
+  const text = btn.dataset.text || ''
+  const box = need.querySelector('.reply-text') || need.querySelector('.qother')
+  const send = need.querySelector('[data-action="reply-send"]') || need.querySelector('[data-action="ask-answer"][data-choice="answer"]')
+  if (!box || !send || send.disabled) return
+  box.value = text
+  if (box.dataset.draft) state.drafts[box.dataset.draft] = text
+  need.querySelectorAll('.quick-replies .qr').forEach((b) => { b.disabled = true; b.classList.toggle('on', b === btn) })
+  return send.dataset.action === 'reply-send' ? replyClick(send) : answerClick(send, 'ask-answer')
+}
+
+// "Show more" on a Needs-you card (0.6.4): the session's last ~20 turns,
+// fetched when opened (through the relay when that's how the board is open).
+async function needMoreClick(btn) {
+  const id = btn.dataset.id
+  const panels = () => document.querySelectorAll('.need[data-id="' + (window.CSS && CSS.escape ? CSS.escape(id) : id) + '"] .need-ctx')
+  const paint = () => panels().forEach((ctx) => {
+    const open = !!state.needOpen[id]
+    const b = ctx.querySelector('.need-more')
+    if (b) { b.textContent = open ? 'Show less' : 'Show more'; b.setAttribute('aria-expanded', String(open)) }
+    let box = ctx.querySelector('.need-turns')
+    const t = state.needTurns[id]
+    // Open, the turns replace the three lines (the last turn ends with them).
+    ctx.classList.toggle('open', open && !!t && !t.error)
+    if (!open) { if (box) box.remove(); return }
+    if (!box) { box = document.createElement('div'); box.className = 'need-turns'; ctx.appendChild(box) }
+    box.innerHTML = !t ? '<div class="need-note">Loading the last turns…</div>' : t.error ? '<div class="need-note warn">' + esc(t.error) + '</div>' : turnsHtml(t.turns, { need: needsItems(state.sessions).find((n) => n.session && n.session.id === id) })
+  })
+  if (state.needOpen[id]) { delete state.needOpen[id]; return paint() }
+  state.needOpen[id] = true
+  if (!state.needTurns[id] || state.needTurns[id].error) delete state.needTurns[id]
+  paint()
+  try {
+    const r = await api('GET', '/v1/sessions/' + encodeURIComponent(id) + '/turns?limit=20')
+    state.needTurns[id] = { turns: r.turns || [], at: Date.now() }
+  } catch (e) { state.needTurns[id] = { error: 'Couldn’t load this session’s turns: ' + e.message } }
+  paint()
+}
+
+// Dismiss a need (0.6.5): gone from every card and count at once, kept on
+// the daemon (so your other devices and the relay see it too), Undo for 5 s.
+async function needDismissClick(btn) {
+  const key = btn.dataset.need
+  if (!key) return
+  const cards = [...document.querySelectorAll('.need[data-need="' + (window.CSS && CSS.escape ? CSS.escape(key) : key) + '"]')]
+  cards.forEach((c) => { c.hidden = true })
+  for (const s of state.sessions || []) if (s.needsYou && s.needsYou.key === key) s.needsYou = null
+  try { await api('POST', '/v1/needs/dismiss', { key }) } catch (e) { cards.forEach((c) => { c.hidden = false }); toast('Couldn’t dismiss it: ' + e.message, 5000); return }
+  toastUndo('Dismissed', async () => {
+    try { await api('POST', '/v1/needs/restore', { key }) } catch (e) { toast(e.message, 5000) }
+    render(); refreshHealth().catch(() => {})
+  })
+  render(); refreshHealth().catch(() => {})
+}
+
 // Go: "Switching…" at once, a note if it's slow, the result (with timings when slow) after.
 function goClick(btn, id, s) {
   return goWithFeedback({