@leftoff/cli 0.9.18-beta.9 → 0.9.18

package/ui/semdiff.js

@@ -371,11 +371,25 @@ function fileMapHtml(data, { esc, icon, cur }) {
   return h + '<div class="wt-fm-k"><span class="kbd">j</span><span class="kbd">k</span> next step</div></nav>'
 }
 
+// 2026-11-06 every PR the session has is its own range ('pr:<owner/repo>#<n>'): up to PR_CHIPS of them are
+// chips; more fold into one "PRs" chip that opens a menu (the one picked shows its number)
+export const PR_CHIPS = 2
+export const isPrKey = (k) => k === 'pr' || /^pr:/.test(String(k || ''))
+const PR_WORD = { merged: 'merged', closed: 'closed', draft: 'draft' }
+export function prScopeTip(x) { return [x.title, x.repo, x.state ? (x.state === 'open' ? 'Open' : x.state[0].toUpperCase() + x.state.slice(1)) : ''].filter(Boolean).join(' · ') }
 function scopesHtml(data, scope, { esc, icon, sid }) {
   const sc = (data && data.scopes) || [{ key: 'checkpoint', label: SCOPE_WORDS.checkpoint, available: false }, { key: 'session', label: SCOPE_WORDS.session, available: true }]
-  return '<div class="wt-seg" role="group" aria-label="What to walk through">' + sc.map((x) =>
-    '<button type="button" data-action="wt-scope" data-id="' + esc(sid) + '" data-scope="' + esc(x.key) + '" aria-pressed="' + (x.key === scope ? 'true' : 'false') + '"' + (x.available === false ? ' disabled data-tip="No checkpoint yet"' : '') + '>' +
-    (x.key === 'pr' ? icon('git-pull-request') : '') + '<span>' + esc(x.label) + '</span></button>').join('') + '</div>'
+  const prs = sc.filter((x) => isPrKey(x.key)), rest = sc.filter((x) => !isPrKey(x.key))
+  const chip = (x) => '<button type="button" data-action="wt-scope" data-id="' + esc(sid) + '" data-scope="' + esc(x.key) + '" aria-pressed="' + (x.key === scope ? 'true' : 'false') + '"' + (x.available === false ? ' disabled data-tip="No checkpoint yet"' : isPrKey(x.key) && prScopeTip(x) ? ' data-tip="' + esc(prScopeTip(x)) + '"' : '') + '>' +
+    (isPrKey(x.key) ? icon('git-pull-request') : '') + '<span>' + esc(x.label) + (PR_WORD[x.state] ? ' · ' + PR_WORD[x.state] : '') + '</span></button>'
+  let h = rest.map(chip).join('')
+  if (prs.length <= PR_CHIPS) h += prs.map(chip).join('')
+  else {
+    const cur = prs.find((x) => x.key === scope)
+    h += '<button type="button" data-action="wt-prs" data-id="' + esc(sid) + '" aria-pressed="' + (cur ? 'true' : 'false') + '" aria-haspopup="menu" aria-expanded="false" aria-label="' + esc(cur ? cur.label + ', pick another of ' + prs.length + ' PRs' : 'Pick one of ' + prs.length + ' PRs') + '"' + (cur && prScopeTip(cur) ? ' data-tip="' + esc(prScopeTip(cur)) + '"' : '') + '>' +
+      icon('git-pull-request') + '<span>' + esc(cur ? cur.label + (PR_WORD[cur.state] ? ' · ' + PR_WORD[cur.state] : '') : 'PRs · ' + prs.length) + '</span>' + icon('chevron-down', 'ic wt-seg-chev') + '</button>'
+  }
+  return '<div class="wt-seg" role="group" aria-label="What to walk through">' + h + '</div>'
 }
 
 // 2026-10-30 (asked: "the left side file list should be somewhat collapsible"): folded to a
@@ -395,7 +409,7 @@ function railHtml(data, big, { esc, icon }) {
 }
 
 // 2026-10-30 Next spot: in the toolbar (not the step's footer, where Mark reviewed & next is)
-export const SPOT_TIP = 'Jump to the next spot worth a real look (n)'
+export const SPOT_TIP = 'Next spot: a line worth a real look, from where you are. The walkthrough flagged it, or it is a risky kind of change (removed logic, auth, config, error handling) · n, Shift+N back'
 function spotBtnHtml(n, cur, { icon }) {
   if (!n) return ''
   return '<button type="button" class="btn wt-spot" data-action="wt-spot" data-tip="' + SPOT_TIP + '" aria-label="Next spot to look at, ' + spotCountWords(n, cur) + '">' + icon('crosshair') + '<span class="wt-spot-l">Next spot</span><span class="wt-spot-n" id="wtSpotN">' + spotCountWords(n, cur) + '</span></button>'
@@ -421,12 +435,12 @@ function staleBarHtml(st, { esc, icon, sid, loading }) {
     '<button type="button" class="linkish wt-upd" data-action="wt-update" data-id="' + esc(sid) + '"' + (loading ? ' disabled' : '') + '>' + icon('refresh-cw') + (loading ? 'Updating…' : 'Update') + '</button></p>'
 }
 
-// Download .html / Copy as Markdown: always in the header (icons on a desktop, words on a phone);
+// Save as HTML (was Download .html) / Copy as Markdown: always in the header (icons on a desktop, words on a phone);
 // with nothing to export yet they stay, dimmed, and their tip says why
 function exportsHtml(ok, ui, { icon }) {
   const why = ui.loading ? 'Still reading the change' : ui.error ? 'Nothing to export: the walkthrough didn’t load' : 'Nothing to export yet'
   const b = (action, ic, label, tip) => '<button type="button" class="btn wt-exp-b" data-action="' + action + '" aria-label="' + label + '" data-tip="' + (ok ? tip : why) + '"' + (ok ? '' : ' aria-disabled="true"') + '>' + icon(ic) + '<span class="wt-exp-l">' + label + '</span></button>'
-  return '<span class="wt-exp">' + b('wt-export-html', 'download', 'Download .html', 'Download .html · one file, opens offline anywhere') + b('wt-export-md', 'copy', 'Copy as Markdown', 'Copy as Markdown · for a PR description') + '</span>'
+  return '<span class="wt-exp">' + b('wt-export-html', 'download', 'Save as HTML', 'Save as HTML · one file, opens offline anywhere') + b('wt-export-md', 'copy', 'Copy as Markdown', 'Copy as Markdown · for a PR description') + '</span>'
 }
 
 // The whole walkthrough. ui: { scope, view: 'story'|'files', filter, open: Set(step ids with code shown), groups: Set(kinds open), cur, loading, error, ask }
@@ -449,7 +463,9 @@ export function walkthroughHtml({ s, data, ui, reviewed = new Set(), esc, icon,
     '<button type="button" class="wt-x" data-action="wt-close" data-id="' + esc(sid) + '" aria-label="Close the walkthrough">' + icon('x') + '</button></div>'
   // 2026-10-30 the reading tools, a slim second row of the toolbar (the first stays one row): Next spot, Unified / Split
   // 2026-11-03 This session · Whole folder, at the top of the story and the Files list alike
-  const tools = fileScopeSegHtml(data && data.fileScope, { esc, icon, action: 'wt-files', busy: !!ui.loading }) + spotBtnHtml(ok && view === 'story' ? spotsFor(data, readingOrder(data.steps, data)).length : 0, ui.spot, { icon }) +
+  // 2026-11-06 Next spot lives in the bar under the reading (Joel: "should probably always be visible as you scroll")
+  const nSpots = ok && view === 'story' ? spotsFor(data, readingOrder(data.steps, data)).length : 0
+  const tools = fileScopeSegHtml(data && data.fileScope, { esc, icon, action: 'wt-files', busy: !!ui.loading }) +
     modeSegHtml(ok || (data && Array.isArray(data.files) && data.files.length), ui.split)
   if (tools) h += '<div class="wt-r2" role="toolbar" aria-label="Which changes and reading tools">' + tools + '</div>'
   // which model wrote it (Settings → Models → Walk me through it picks it)
@@ -464,7 +480,7 @@ export function walkthroughHtml({ s, data, ui, reviewed = new Set(), esc, icon,
   if (ui.loading) h += '<p class="wt-sum wt-loading" role="status"><span class="wt-spin" aria-hidden="true"></span><span>Reading the change' + (data && data.status === 'ok' ? '' : '…') + '</span><button type="button" class="linkish wt-stop" data-action="wt-stop" data-id="' + esc(sid) + '">Stop</button></p>'
   if (ui.error) h += '<p class="wt-note" role="alert">' + icon('circle-alert') + '<span>' + esc(ui.error) + '</span></p>'
   if (data && !ui.loading && data.status !== 'ok' && data.message) {
-    const msg = data.status === 'empty' && scope === 'session' ? 'No changes in this session yet.' : data.status === 'empty' && scope === 'pr' ? 'No changes in this PR yet.' : data.message
+    const msg = data.status === 'empty' && scope === 'session' ? 'No changes in this session yet.' : data.status === 'empty' && isPrKey(scope) ? 'No changes in this PR yet.' : data.message
     h += '<p class="wt-note">' + icon('info') + '<span>' + esc(msg) + (data.status === 'no_model' ? ' <a href="#/settings/summaries">Settings</a>' : '') + '</span></p>'
     h += unreadableHtml(data, { esc, icon }) // 2026-10-29 a repo that couldn't be read says so
     // a fallback says why (the first reason; the model's whole reply: leftoff walkthrough debug)
@@ -473,7 +489,7 @@ export function walkthroughHtml({ s, data, ui, reviewed = new Set(), esc, icon,
     if (data.status === 'fallback' && data.small) h += '<p class="faint wt-small">' + icon('info') + '<span>Small local models struggle here. Try Claude or qwen2.5-coder 7B in <a href="#/settings/models">Settings</a>.</span></p>'
   }
   // 2026-11-03 switched to the other scope with nothing written for it: never a model run on its own; Write it is one tap
-  if (data && !ui.loading && data.status === 'none' && view === 'story') h += '<p class="wt-stale" role="status"><i class="wt-chg-g" aria-hidden="true"></i><span>' + (data.fileScope && data.fileScope.key === 'folder' ? 'No walkthrough of the whole folder yet.' : 'No walkthrough of this session’s changes yet.') + ' The files are under Files.</span><button type="button" class="linkish wt-upd" data-action="wt-update" data-id="' + esc(sid) + '">' + icon('refresh-cw') + 'Write it</button></p>'
+  if (data && !ui.loading && data.status === 'none' && view === 'story') h += '<p class="wt-stale" role="status"><i class="wt-chg-g" aria-hidden="true"></i><span>' + (isPrKey(ui.scope) ? 'No walkthrough of this PR yet.' : data.fileScope && data.fileScope.key === 'folder' ? 'No walkthrough of the whole folder yet.' : 'No walkthrough of this session’s changes yet.') + ' The files are under Files.</span><button type="button" class="linkish wt-upd" data-action="wt-update" data-id="' + esc(sid) + '">' + icon('refresh-cw') + 'Write it</button></p>'
   const deck = ok && view === 'story' && ui.deck !== false && (data.steps || []).length > 0 // 0.9.18 the slideshow
   if (ok && view === 'story' && !deck) {
     const steps = data.steps || []
@@ -531,12 +547,12 @@ export function walkthroughHtml({ s, data, ui, reviewed = new Set(), esc, icon,
   }
   const fm = big ? fileMapHtml(data, { esc, icon, cur: ui.cur }) : fl
   const dock = '<div class="wt-refs" id="wtRefs" role="list" aria-label="Lines you picked" hidden></div><button type="button" class="wt-askl" id="wtAskL" data-action="wt-ask-lines" hidden>' + icon('message-square') + '<span>Ask about these lines</span></button>' + '<form class="wt-ask" data-action-form="wt-ask" data-id="' + esc(sid) + '"><label class="lo-vh" for="wtAsk">Ask about this change</label><input id="wtAsk" class="wt-ask-in" type="text" autocomplete="off" placeholder="Ask about this change…" value="' + esc(ui.ask || '') + '"><button type="submit" class="wt-ask-b" aria-label="Put the question in the chat" data-tip="Into the chat box">' + icon('arrow-up') + '</button></form>'
-  const pnav = ok && view === 'story' && (data.steps || []).length ? '<div class="wt-pnav"><button type="button" class="btn" data-action="wt-step" data-dir="-1">' + icon('chevron-left') + 'Back</button><span class="faint" id="wtPnavN">' + stepPos(data.steps, ui) + '</span><button type="button" class="btn" data-action="wt-step" data-dir="1">Next' + icon('chevron-right') + '</button></div>' : ''
+  const pnav = ok && view === 'story' && (data.steps || []).length ? '<div class="wt-pnav"><button type="button" class="btn" data-action="wt-step" data-dir="-1">' + icon('chevron-left') + 'Back</button><span class="faint" id="wtPnavN">' + stepPos(data.steps, ui) + '</span>' + spotBtnHtml(nSpots, ui.spot, { icon }) + '<button type="button" class="btn" data-action="wt-step" data-dir="1">Next' + icon('chevron-right') + '</button></div>' : ''
   const dk = deck ? deckSlides(data, ui) : null
   return '<div class="wt' + (big ? ' wt-big' : fl ? ' wt-fls' : '') + (deck ? ' wt-deckmode' : '') + '" id="wt" data-sid="' + esc(sid) + '" role="region" aria-labelledby="wtTitle"><div class="wt-grab" aria-hidden="true"></div>' +
     (deck ? '<div class="wt-dprog" aria-hidden="true"><i id="wtDprog" data-p="' + Math.round(((dk.cur + 1) / dk.slides.length) * 1000) / 10 + '"></i></div>' : '') +
     // 0.9.18 (Joel): with a file list on the left, the list and the reading each scroll on their own
-    (fm ? '<div class="wt-2p' + (ui.rail ? ' rail' : '') + '" id="wt2p">' + railHtml(data, big, { esc, icon }) + fm + '<div class="wt-rz" role="separator" aria-orientation="vertical" aria-label="Resize the file list" tabindex="0" data-tip="Drag to resize · [ hides the list"></div>' : '') + '<div class="wt-scroll" id="wtScroll"><div class="wt-hw"><div class="wt-in">' + h + body + '</div></div></div>' + (fm ? '</div>' : '') + (deck ? deckNavHtml(dk, { esc, icon, reviewed }) : pnav) + dock + '</div>'
+    (fm ? '<div class="wt-2p' + (ui.rail ? ' rail' : '') + '" id="wt2p">' + railHtml(data, big, { esc, icon }) + fm + '<div class="wt-rz" role="separator" aria-orientation="vertical" aria-label="Resize the file list" tabindex="0" data-tip="Drag to resize · [ hides the list"></div>' : '') + '<div class="wt-scroll" id="wtScroll"><div class="wt-hw"><div class="wt-in">' + h + body + '</div></div></div>' + (fm ? '</div>' : '') + (deck ? deckNavHtml(dk, { esc, icon, reviewed, spots: nSpots, spot: ui.spot }) : pnav) + dock + '</div>'
 }
 
 // 0.9.18 the walkthrough as slides (Joel: "almost a slide show, each slide was
@@ -562,11 +578,14 @@ function deckHtml(data, ui, { esc, icon, reviewed, sid }) {
   let h = '<div class="wt-deck" id="wtDeck" data-cur="' + cur + '" data-n="' + total + '" tabindex="-1" aria-roledescription="slideshow" aria-label="Walkthrough slides">'
   // the overview
   const st = data.stats || {}
-  const scope = SCOPE_WORDS[ui.scope] || ''
+  const scope = SCOPE_WORDS[ui.scope] || (((data.scopes || []).find((x) => x.key === ui.scope) || {}).label) || ''
   const pm = Array.isArray(data.files) && data.files.length ? data.files.reduce((a, f) => ({ add: a.add + (f.add || 0), del: a.del + (f.del || 0) }), { add: 0, del: 0 }) : null
   let o = '<p class="wt-sum big"><b>' + esc(data.headline) + '</b></p>' + (data.summary ? '<p class="wt-sum md-in">' + walkInlineLinks(data.summary) + '</p>' : '')
   o += '<div class="wt-meta">' + (scope ? '<span>' + icon('git-compare') + esc(scope) + '</span>' : '') + '<span>' + plural(st.files || 0, 'file') + (pm ? ' <b class="wt-pl">+' + n0(pm.add) + '</b> <b class="wt-mi">−' + n0(pm.del) + '</b>' : '') + '</span><span>' + plural(steps.length, 'step') + '</span><span id="wtProg">' + steps.filter((x) => reviewed.has(x.id)).length + ' of ' + steps.length + ' reviewed</span></div>'
   o += barHtml(st, { esc })
+  // 2026-11-06 the finish: "& finish" lands here, and this says it's done (app.js wtMarks keeps it current)
+  const allRev = steps.length > 0 && steps.every((x) => reviewed.has(x.id))
+  o += '<p class="wt-alldone" id="wtAllDone" role="status"' + (allRev ? '' : ' hidden') + '>' + icon('circle-check') + '<span>All ' + plural(steps.length, 'step') + ' reviewed</span></p>'
   if (data.passes > 1) o += '<p class="wt-note">' + icon('info') + '<span>Too big for one pass, so it was read in two: each folder on its own (' + plural(data.folders, 'folder') + '), then the changes ranked across all of them. Lockfiles and generated files were never sent.</span></p>'
   const cnt = (k) => steps.reduce((a, x) => a + x.callouts.filter((c) => c.kind === k).length, 0)
   const chip = (k, label, ic, n) => '<button type="button" class="wt-fc" data-action="wt-filter" data-filter="' + k + '" aria-pressed="' + ((ui.filter || 'all') === k) + '">' + (ic ? icon(ic) : '') + '<span>' + label + '</span>' + (n != null ? '<b>' + n + '</b>' : '') + '</button>'
@@ -596,29 +615,40 @@ function deckHtml(data, ui, { esc, icon, reviewed, sid }) {
   })
   return h + '</div>'
 }
-// the bar under the slides: ← Prev · the current title · numbered dots · 3 / 12 · Next →
+// the bar under the slides: ← Prev · the current title · numbered dots · 3 / 12 · Next spot · Next →
 // 0.9.19 (Joel: "the walk through should have 2 next buttons. One that marks as
 // viewed"): on a step's slide, a primary "Mark reviewed & next" beside the plain
-// Next; on the last step it reads "& finish" and goes back to the overview (the
-// summary with the reviewed count). Not shown on the overview or Safe to skip.
+// Next. Not shown on the overview or Safe to skip.
+// 2026-11-06 (Joel: "when you mark the last step as reviewed and next you just go back
+// to the beginning"): on the last step it goes to the first step still unreviewed
+// ("& step 2"); only when every step is reviewed does it read "& finish", and the
+// overview it lands on says they all are.
 export const NEXT_TIP = 'Next, without marking (→)'
 export const REVNEXT_TIP = 'Mark this step reviewed and go to the next (Shift+→ or Enter)'
-export const REVFINISH_TIP = 'Mark this step reviewed and finish: back to the overview (Shift+→ or Enter)'
-// slides: [{ step }] in deck order -> { show, last, to } (to: the slide it goes to)
-export function revNextState(slides, cur) {
+export const REVFINISH_TIP = 'Mark this step reviewed and finish: every step is then reviewed (Shift+→ or Enter)'
+export const revBackTip = (n) => 'Mark this step reviewed and go back to step ' + n + ', not reviewed yet (Shift+→ or Enter)'
+// slides: [{ step }] in deck order (step: an id, or { id, n }), reviewed: the step ids already
+// reviewed -> { show, last, to, back } (to: the slide it goes to; back: the step number it
+// goes back to, when the last step leaves one unreviewed)
+export function revNextState(slides, cur, reviewed = new Set()) {
   const s = slides[cur]
-  if (!s || !s.step) return { show: false, last: false, to: cur + 1 }
+  if (!s || !s.step) return { show: false, last: false, to: cur + 1, back: null }
   let lastStep = -1
   slides.forEach((x, i) => { if (x.step) lastStep = i })
-  const last = cur === lastStep
-  return { show: true, last, to: last ? 0 : cur + 1 }
-}
-export function revNextLabel(last) { return last ? ['Mark reviewed & finish', 'Reviewed & finish'] : ['Mark reviewed & next', 'Reviewed & next'] }
+  if (cur !== lastStep) return { show: true, last: false, to: cur + 1, back: null }
+  const id = (x) => (x && typeof x === 'object' ? x.id : x)
+  const left = slides.findIndex((x, i) => i !== cur && x.step && !reviewed.has(id(x.step)))
+  if (left < 0) return { show: true, last: true, to: 0, back: null }
+  const st = slides[left].step
+  return { show: true, last: false, to: left, back: (st && typeof st === 'object' && st.n) || left }
+}
+export function revNextLabel(last, back = null) { return back != null ? ['Mark reviewed & step ' + back, 'Reviewed & step ' + back] : last ? ['Mark reviewed & finish', 'Reviewed & finish'] : ['Mark reviewed & next', 'Reviewed & next'] }
+export const revNextTip = (st) => (st.back != null ? revBackTip(st.back) : st.last ? REVFINISH_TIP : REVNEXT_TIP)
 function revNextHtml(st, { icon }) {
-  const [l, sh] = revNextLabel(st.last)
-  return '<button type="button" class="btn primary wt-drev" id="wtDrev" data-action="wt-revnext" aria-label="' + l.replace('&', '&amp;') + '" data-tip="' + (st.last ? REVFINISH_TIP : REVNEXT_TIP) + '"' + (st.show ? '' : ' hidden') + '>' + icon('check') + '<span class="wt-dl"><span class="wt-dl-l">' + l.replace('&', '&amp;') + '</span><span class="wt-dl-s">' + sh.replace('&', '&amp;') + '</span></span></button>'
+  const [l, sh] = revNextLabel(st.last, st.back)
+  return '<button type="button" class="btn primary wt-drev" id="wtDrev" data-action="wt-revnext" aria-label="' + l.replace('&', '&amp;') + '" data-tip="' + revNextTip(st) + '"' + (st.show ? '' : ' hidden') + '>' + icon('check') + '<span class="wt-dl"><span class="wt-dl-l">' + l.replace('&', '&amp;') + '</span><span class="wt-dl-s">' + sh.replace('&', '&amp;') + '</span></span></button>'
 }
-export function deckNavHtml({ slides, cur }, { esc, icon, reviewed = new Set() }) {
+export function deckNavHtml({ slides, cur }, { esc, icon, reviewed = new Set(), spots = 0, spot = -1 }) {
   const dot = (s, i) => '<button type="button" class="wt-dot' + (i === cur ? ' cur' : '') + (s.step && reviewed.has(s.step.id) ? ' done' : '') + '" data-action="wt-slide" data-slide="' + i + '"' + (s.step ? ' data-step="' + esc(s.step.id) + '"' : '') +
     ' aria-label="' + esc((i === 0 ? 'Overview' : s.step ? 'Step ' + s.step.n + ': ' + mdPlain(s.title) : s.title) + (s.step && reviewed.has(s.step.id) ? ', reviewed' : '')) + '" data-tip="' + esc(i === 0 ? 'Overview' : s.step ? 'Step ' + s.step.n + ': ' + mdPlain(s.title) : s.title) + '"' + (i === cur ? ' aria-current="step"' : '') + '>' +
     (i === 0 ? icon('route') : s.step ? '<span class="wt-dot-n">' + s.step.n + '</span>' : icon('layers')) + '<span class="wt-dot-ok" aria-hidden="true">' + icon('check') + '</span></button>'
@@ -627,7 +657,8 @@ export function deckNavHtml({ slides, cur }, { esc, icon, reviewed = new Set() }
     '<span class="wt-dnow" id="wtDnow">' + esc(mdPlain(slides[cur].title)) + '</span>' +
     '<div class="wt-dots" id="wtDots" role="group" aria-label="Go to a slide">' + slides.map(dot).join('') + '</div>' +
     '<span class="wt-dcount" id="wtDcount" aria-live="polite">' + (cur + 1) + ' / ' + slides.length + '</span>' +
-    revNextHtml(revNextState(slides, cur), { icon }) +
+    spotBtnHtml(spots, spot, { icon }) +
+    revNextHtml(revNextState(slides.map((x) => ({ step: x.step ? { id: x.step.id, n: x.step.n } : null })), cur, reviewed), { icon }) +
     '<button type="button" class="btn wt-dnext" data-action="wt-dstep" data-dir="1" aria-label="Next slide, without marking" data-tip="' + NEXT_TIP + '"' + (cur === slides.length - 1 ? ' disabled' : '') + '><span class="wt-dl">Next</span>' + icon('chevron-right') + '</button></nav>'
 }
 export function stepPos(steps, ui) {

package/ui/session-title.js

@@ -0,0 +1,88 @@
+// 2026-11-05 session titles: one helper for the name a session goes by
+// everywhere (session header, full screen's bar, cards, tabs, pickers).
+// Line one says what the session is doing; where it runs (folder@branch) is a
+// muted second line, never glued to the front of the name. Pure and
+// deterministic (no model call): a prompt used as a name is tidied the way a
+// person would write it as a title.
+
+export const TITLE_MAX = 60
+
+// "cube_cloud@me/some-branch · Please check…": where it runs, glued to the front
+// of a name by whatever named it. The folder and branch have a line of their own.
+const WHERE_GLUED = /^\s*[\w.~-]+@[\w./~+-]+\s*(?:·|•|\||—|–|:|-)\s+/
+// Words in front of a request that a title doesn't need.
+const FILLER = /^(?:(?:please|pls|plz|hey|hi|hello|yo|ok(?:ay)?|so|alright|now)\b[\s,!.:;-]*|(?:can|could|would|will) (?:you|u)(?: please| pls)?\s+|(?:i(?:'d| would) like you to|i (?:want|need) you to)\s+)/i
+// A title doesn't end on a word that leads into the next one.
+const DANGLING = /[\s,;:–—-]+(?:and|or|but|nor|the|a|an|to|of|for|with|without|in|on|at|from|by|into|onto|about|then|so|that|this|these|those|is|are|was|be|as|if|when|while|because|my|your|our|its|&|\+)$/i
+const URL_RE = /\bhttps?:\/\/[^\s<>()]+/gi
+const LONG_PATH = /(^|\s)(?:~|\.{1,2})?(?:\/[\w.@+-]+){3,}\/?/g
+
+const repoOf = (s) => (s && (s.repoLabel || s.repoName || (s.repo && s.repo.name))) || ''
+const branchOf = (s) => (s && (s.branch || (s.repo && s.repo.branch))) || ''
+
+// Where a session runs, as one short line: "folder@branch" (the folder alone
+// when the branch says the same or there is none). '' when unknown.
+export function whereLine(s, repo = repoOf(s)) {
+  const b = branchOf(s)
+  if (!repo) return b || ''
+  return b && b !== repo ? repo + '@' + b : repo
+}
+
+// A pasted link, as the few words it stands for: a GitHub pull request or issue
+// is "PR 408" / "issue 12", anything else its host.
+function urlWords(u) {
+  const m = u.match(/^https?:\/\/(?:www\.)?github\.com\/[^/\s]+\/[^/\s]+\/(pull|issues)\/(\d+)/i)
+  if (m) return (m[1].toLowerCase() === 'pull' ? 'PR ' : 'issue ') + m[2]
+  try { return new URL(u).host.replace(/^www\./, '') } catch { return '' }
+}
+
+// Cut at a word boundary: never mid-word, never on a dangling "and"/"the"/"to".
+// Text with no spaces to cut at (CJK, one long token) is cut by character.
+export function cutTitle(text, max = TITLE_MAX) {
+  let t = String(text == null ? '' : text).replace(/\s+/g, ' ').trim()
+  let cut = false
+  if (t.length > max) {
+    const room = t.slice(0, max)
+    const sp = room.lastIndexOf(' ')
+    t = /\s/.test(t[max]) ? room : sp > 0 ? room.slice(0, sp) : t.slice(0, max - 1)
+    cut = true
+  }
+  for (let i = 0; i < 4; i++) {
+    const before = t
+    t = t.replace(DANGLING, '').replace(/[\s,;:(\[{–—-]+$/, '')
+    if (t === before) break
+    cut = true
+  }
+  if (!t) return ''
+  return cut ? t.replace(/[.…]+$/, '') + '…' : t
+}
+
+// A first prompt as a title: its first real line, no greeting or "please",
+// links as what they point at, a capital first letter, cut cleanly.
+//   "Please checkout the PR 408 and then…" -> "Check out the PR 408…"
+export function promptTitleText(text, max = TITLE_MAX) {
+  let t = String(text == null ? '' : text).split('\n').map((l) => l.trim()).find(Boolean) || ''
+  t = t.replace(URL_RE, (u) => ' ' + urlWords(u) + ' ').replace(LONG_PATH, (m, pre) => pre + m.trim().split('/').filter(Boolean).pop())
+  t = t.replace(/\s+/g, ' ').trim()
+  for (let i = 0; i < 4; i++) { const n = t.replace(FILLER, ''); if (n === t || !n.trim()) break; t = n.trim() }
+  t = t.replace(/^checkout\s+(?=the\b|pr\b|#|branch\b)/i, 'Check out ')
+  t = t.replace(/^[\s,.:;!?–—-]+/, '')
+  t = cutTitle(t, max)
+  return t && !/^\S+\.\S/.test(t) ? t.charAt(0).toUpperCase() + t.slice(1) : t // a bare host stays as written
+}
+
+// A stored name, tidied for showing: where it runs comes off the front (it has
+// its own line). A name that came from a prompt (or carried a where prefix,
+// which only automatic names do) is tidied like a prompt; a name you or Claude
+// gave it is kept as written, only cut at a word if it is very long.
+export function displayTitle(title, { source = null, max = TITLE_MAX } = {}) {
+  let t = String(title == null ? '' : title).replace(/\s+/g, ' ').trim()
+  const glued = WHERE_GLUED.test(t) && t.replace(WHERE_GLUED, '').trim()
+  if (glued) t = glued
+  if (glued || source === 'prompt' || source === 'fallback') return promptTitleText(t, max) || t
+  return t.length > 2 * max ? cutTitle(t, 2 * max) : t
+}
+
+// Is this stored name only an automatic stand-in (where it runs + the first
+// prompt's words)? Then a generated name may replace it, as for a prompt name.
+export function isPlaceholderTitle(title) { return WHERE_GLUED.test(String(title || '')) }

package/ui/settings-nav.js

@@ -3,7 +3,7 @@
 // unit tests read it too (test/unit/settings-nav.test.mjs).
 export const SETTINGS = [
   { key: 'general', label: 'General', icon: 'sliders-horizontal', sub: 'Checkpoints, notifications and theme.', words: 'dormant gap checkpoint notify notification needs you macos theme appearance light dark system pr cards pull request github gh', save: true },
-  { key: 'digest', label: 'Digest', icon: 'newspaper', sub: 'When the daily digest is written.', words: 'time days weekdays every day quiet skip empty time zone schedule morning automatic', save: true },
+  { key: 'digest', label: 'Digest', icon: 'newspaper', sub: 'When the daily digest is written.', words: 'time days weekdays every day quiet skip empty time zone schedule morning automatic versions mcp claude codex search notes', save: true },
   { key: 'spaces', label: 'Spaces', icon: 'layers', sub: 'Work, Personal or your own names, per Mac and per repo.', words: 'work personal repo override mac default standup agent feed' },
   { key: 'sync', label: 'Sync', icon: 'folder-sync', sub: 'One folder, every machine.', words: 'syncthing pair pairing join code icloud dropbox folder move backup other macs machines install accept rename retire merge reinstall' },
   { key: 'agents', label: 'Agents', icon: 'bot', sub: 'Work from AI assistants outside Claude Code.', words: 'tab feed agent key url host hosting add refresh remove' },

package/ui/sglyph.js

@@ -109,14 +109,14 @@ export const countsAsWaiting = (s, offline = false) => !!s && !(offline && s.isL
 //   hidden  inside a control that already names the state: aria-hidden, no role
 //   closed  a closed session's quiet ring is fainter
 //   arrive  the page-clock time the new-reply dot appeared (it pulses once from then)
-export function glyphHtml(state, { esc = escDefault, tip = '', quiet = false, hidden = false, closed = false, arrive = null, cls = '' } = {}) {
+export function glyphHtml(state, { esc = escDefault, tip = '', quiet = false, hidden = false, closed = false, arrive = null, cls = '', noTip = false } = {}) {
   if (!GLYPHS.includes(state)) state = 'quiet'
   if (state === 'quiet' && !quiet) return ''
   const label = GLYPH_LABEL[state]
   const inner = state === 'waiting' ? '<span class="sg-in" aria-hidden="true">!</span>' : state === 'offline' ? '<span class="sg-in" aria-hidden="true"></span><span class="sg-slash" aria-hidden="true"></span>' : '<span class="sg-in" aria-hidden="true"></span>'
   const c = 'sg sg-' + state + (state === 'quiet' && closed ? ' sg-closed' : '') + (state === 'unseen' && arrive != null ? ' sg-arrive' : '') + (cls ? ' ' + cls : '')
   const a11y = hidden ? ' aria-hidden="true"' : ' role="img" aria-label="' + esc(tip || label) + '"'
-  return '<span class="' + c + '" data-sg="' + state + '"' + a11y + ' data-tip="' + esc(tip || label) + '"' + (state === 'unseen' && arrive != null ? ' data-arrive="' + Math.round(Number(arrive) || 0) + '"' : '') + '>' + inner + '</span>'
+  return '<span class="' + c + '" data-sg="' + state + '"' + a11y + (noTip ? '' : ' data-tip="' + esc(tip || label) + '"') + (state === 'unseen' && arrive != null ? ' data-arrive="' + Math.round(Number(arrive) || 0) + '"' : '') + '>' + inner + '</span>'
 }
 
 // The words for a glyph in a control's own label (", waiting on you").

package/ui/slash-commands.js

@@ -0,0 +1,89 @@
+// Claude Code slash commands the board can send into a session (Live box).
+// Shared by the daemon (src/live-link.js: what it lets through) and the board
+// (ui/slash.js: the "/" suggestions and the /model and /effort pickers).
+//
+// Checked against Claude Code's own command table (2.1.300, the `claude -p`
+// build on npm; /model and /effort run again on 2.1.319): each of these has a non-interactive form (supportsNonInteractive),
+// so in a session Leftoff runs (`claude -p`, stream-json) "/effort high" written
+// as a user message runs as the command, locally, and its output comes back as
+// the turn's result and as a local_command line in the transcript. In a terminal
+// session the mod runs it with $.command.run, the way it already runs /rename,
+// except a command whose terminal form saves your default (saves, below).
+// Bare /model and /effort open a picker in the terminal, so the board asks for
+// the choice itself. /status and the bare pickers need Claude Code's terminal UI
+// and are left out; anything not listed here is refused.
+
+export const SLASH_MAX = 500
+
+// arg: 'required' | 'optional' | 'none'. choices: what the board's picker offers
+// (Claude Code's own list); strict: only those. tui: false when the terminal's
+// form opens a panel (so the mod path refuses it rather than leave a panel open).
+// saves: the terminal's form also writes it into ~/.claude/settings.json as your
+// default for new sessions (checked on 2.1.319: "Set model to Haiku 5.5 and saved
+// as your default for new sessions"; `claude -p` says "for this session only").
+// Leftoff never writes ~/.claude, so these go only to sessions Leftoff runs.
+export const SLASH_COMMANDS = [
+  { name: 'model', arg: 'required', hint: '<model>', what: 'Switch the model',
+    choices: ['default', 'opus', 'sonnet', 'haiku', 'fable', 'best', 'opus[1m]', 'sonnet[1m]', 'opusplan'], saves: true },
+  { name: 'effort', arg: 'required', hint: '<level>', what: 'Set how hard Claude thinks',
+    choices: ['low', 'medium', 'high', 'xhigh', 'max', 'auto'], strict: true, saves: true },
+  { name: 'compact', arg: 'optional', hint: '[instructions]', what: 'Summarize the conversation to free up context' },
+  { name: 'clear', arg: 'none', hint: '', what: 'Start over with empty context (the old one stays resumable)' },
+  { name: 'context', arg: 'none', hint: '', what: 'Show how full the context is' },
+  { name: 'usage', aliases: ['cost'], arg: 'none', hint: '', what: 'Show session cost and plan usage', tui: false },
+]
+
+const BY_NAME = new Map()
+for (const c of SLASH_COMMANDS) { BY_NAME.set(c.name, c); for (const a of c.aliases || []) BY_NAME.set(a, c) }
+
+export function slashCommand(name) { return BY_NAME.get(String(name || '').toLowerCase()) || null }
+export function isSlashText(text) { return /^\s*\//.test(String(text == null ? '' : text)) }
+export function slashNames() { return SLASH_COMMANDS.map((c) => '/' + c.name) }
+export function allowedText() { return slashNames().join(', ') }
+
+const MODEL_RE = /^[A-Za-z0-9][A-Za-z0-9._:\-[\]]{0,79}$/
+// eslint-disable-next-line no-control-regex
+const CONTROL_RE = /[\u0000-\u001f\u007f\u2028\u2029]/
+
+function bad(message) { const e = new Error(message); e.status = 400; e.code = 'bad_command'; throw e }
+
+// "/effort high" -> { name: 'effort', args: 'high', line: '/effort high', cmd }.
+// One command on one line; leading and trailing spaces are fine; the name is
+// the command's own (an alias becomes it: /cost -> /usage). Throws (400,
+// bad_command) with a message that says what is allowed.
+export function parseSlash(text) {
+  const raw = String(text == null ? '' : text)
+  const t = raw.replace(/^[ \t]+|[ \t]+$/g, '')
+  if (!t.startsWith('/')) bad('a command starts with “/”')
+  if (/[\r\n]/.test(t.trim())) bad('one command a message, on one line')
+  const s = t.trim()
+  if (CONTROL_RE.test(s)) bad('the command has a control character in it')
+  if (s.length > SLASH_MAX) bad('the command is over ' + SLASH_MAX + ' characters')
+  const m = /^\/([A-Za-z][\w-]*)(?:[ \t]+([\s\S]*))?$/.exec(s)
+  if (!m) bad('the board can send ' + allowedText())
+  const c = slashCommand(m[1])
+  if (!c) bad('/' + m[1] + ' can’t be sent from the board. It can send ' + allowedText())
+  const args = (m[2] || '').replace(/[ \t]+/g, ' ').trim()
+  if (c.arg === 'none' && args) bad('/' + c.name + ' takes nothing after it')
+  if (c.arg === 'required' && !args) bad('/' + c.name + ' needs a choice: ' + c.choices.join(', '))
+  if (args.startsWith('/')) bad('one command a message')
+  if (c.name === 'model' && !MODEL_RE.test(args)) bad('/model needs one model name, like ' + c.choices.slice(1, 4).join(', '))
+  if (c.strict && !c.choices.includes(args.toLowerCase())) bad('/' + c.name + ' takes one of ' + c.choices.join(', '))
+  const a = c.strict ? args.toLowerCase() : args
+  return { name: c.name, args: a, line: '/' + c.name + (a ? ' ' + a : ''), cmd: c }
+}
+
+// The "/" suggestions for what's typed so far ("/ef" -> [effort]).
+export function slashMatches(text) {
+  const m = /^\s*\/([\w-]*)$/.exec(String(text == null ? '' : text))
+  if (!m) return []
+  const q = m[1].toLowerCase()
+  return SLASH_COMMANDS.filter((c) => c.name.startsWith(q) || (c.aliases || []).some((a) => a.startsWith(q)))
+}
+
+// A bare "/model" or "/effort" (nothing after it): the board shows its picker.
+export function needsPicker(text) {
+  const m = /^\s*\/([\w-]+)\s*$/.exec(String(text == null ? '' : text))
+  const c = m && slashCommand(m[1])
+  return c && c.arg === 'required' && c.choices ? c : null
+}

package/ui/slash.js

@@ -0,0 +1,82 @@
+// The Live composer's "/" menu (slash commands from the board). Pure functions
+// here, shared with the unit tests; app.js wires them to the page. What can be
+// sent, and the words for it, is ui/slash-commands.js (the daemon checks it too).
+//
+// Typing "/" lists the commands ("/ef" narrows to /effort); picking one fills
+// it in. A command that takes a choice (/model, /effort) then lists its
+// choices ("/effort h" narrows to high). Picking never sends: Enter sends once
+// the menu has nothing more to offer (an exact command or choice closes it).
+// In a terminal session /model and /effort show, disabled, with why: Claude
+// Code's terminal saves them as your default for new sessions.
+
+import { slashCommand, slashMatches } from './slash-commands.js'
+
+const escS = (s) => String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')
+
+export const SAVES_WHY = 'In a terminal session this also changes your default for new sessions, so the board doesn’t send it. Type it in the terminal.'
+
+// Where commands go for this session: 'headless' (Leftoff runs it: every
+// command, for this session only), 'terminal' (the mod runs it: not /model or
+// /effort), or null (Codex, or nothing to run it: no menu).
+export function slashTarget(s) {
+  if (!s || s.codingAgent === 'codex' || s.capture === 'codex' || s.endedAt) return null
+  if (s.headless) return 'headless'
+  if (s.capture === 'mod') return 'terminal'
+  return null
+}
+
+// text -> null (no menu) or { kind: 'commands' | 'choices', cmd?, items: [{ value, label, hint, what, off }] }.
+// value: the composer's text after a pick. off: why it can't be picked here (null when it can).
+export function slashMenu(text, { target = 'headless' } = {}) {
+  if (!target) return null
+  const t = String(text == null ? '' : text)
+  const offFor = (c) => (target === 'terminal' && c.saves ? SAVES_WHY : null)
+  const m = /^\s*\/([\w-]*)$/.exec(t)
+  if (m) {
+    const list = slashMatches(t)
+    if (!list.length) return null
+    // an exact command that takes nothing: the menu has nothing to add, Enter sends it
+    const exact = slashCommand(m[1])
+    if (exact && exact.arg === 'none' && list.length === 1 && (exact.name === m[1].toLowerCase() || (exact.aliases || []).includes(m[1].toLowerCase()))) return null
+    return { kind: 'commands', items: list.map((c) => ({ value: '/' + c.name + (c.arg === 'none' ? '' : ' '), label: '/' + c.name, hint: c.hint || '', what: c.what, off: offFor(c) })) }
+  }
+  const a = /^\s*\/([\w-]+)[ \t]+(\S*)$/.exec(t)
+  const c = a && slashCommand(a[1])
+  if (!c || !c.choices) return null
+  if (offFor(c)) return { kind: 'choices', cmd: c.name, items: [{ value: t, label: '/' + c.name, hint: '', what: c.what, off: offFor(c) }] }
+  const q = a[2].toLowerCase()
+  const items = c.choices.filter((x) => x.toLowerCase().startsWith(q))
+  if (!items.length || (items.length === 1 && items[0].toLowerCase() === q)) return null // nothing to pick, or already picked
+  return { kind: 'choices', cmd: c.name, items: items.map((x) => ({ value: '/' + c.name + ' ' + x, label: x, hint: '', what: '', off: null })) }
+}
+
+// The highlighted item after a key: ArrowDown / ArrowUp wrap, skipping disabled ones. -> index or -1
+export function slashMove(menu, active, key) {
+  const items = (menu && menu.items) || []
+  const ok = items.map((x, i) => (x.off ? -1 : i)).filter((i) => i >= 0)
+  if (!ok.length) return -1
+  const at = ok.indexOf(active)
+  if (key === 'ArrowDown') return ok[at < 0 ? 0 : (at + 1) % ok.length]
+  if (key === 'ArrowUp') return ok[at < 0 ? ok.length - 1 : (at - 1 + ok.length) % ok.length]
+  return at < 0 ? ok[0] : active
+}
+
+// What a key does with the menu open: 'move' | 'pick' | 'close' | null (the composer's own).
+export function slashKey(ev) {
+  if (!ev || ev.isComposing || ev.keyCode === 229) return null
+  if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') return ev.altKey || ev.metaKey || ev.ctrlKey ? null : 'move'
+  if ((ev.key === 'Enter' && !ev.shiftKey && !ev.metaKey && !ev.ctrlKey && !ev.altKey) || (ev.key === 'Tab' && !ev.shiftKey)) return 'pick'
+  if (ev.key === 'Escape') return 'close'
+  return null
+}
+
+// The listbox, above the composer. id: the listbox's id (the textarea's aria-controls);
+// each option's id is id + '-' + index (aria-activedescendant).
+export function slashMenuHtml(menu, { active = -1, id = 'slashMenu', esc = escS } = {}) {
+  if (!menu || !menu.items.length) return ''
+  const head = menu.kind === 'choices' ? '<div class="slash-h" aria-hidden="true">' + esc('/' + menu.cmd) + '</div>' : ''
+  return '<div class="slash-menu" role="listbox" id="' + esc(id) + '" aria-label="' + esc(menu.kind === 'choices' ? 'Choices for /' + menu.cmd : 'Commands') + '">' + head +
+    menu.items.map((x, i) => '<div class="slash-opt' + (x.off ? ' off' : '') + '" role="option" id="' + esc(id + '-' + i) + '" data-i="' + i + '" data-value="' + esc(x.value) + '" aria-selected="' + (i === active ? 'true' : 'false') + '"' + (x.off ? ' aria-disabled="true" data-tip="' + esc(x.off) + '"' : '') + '>' +
+      '<span class="slash-l">' + esc(x.label) + (x.hint ? ' <span class="slash-hint">' + esc(x.hint) + '</span>' : '') + '</span>' +
+      (x.what ? '<span class="slash-w">' + esc(x.off ? 'Not in a terminal session' : x.what) + '</span>' : '') + '</div>').join('') + '</div>'
+}

package/ui/subagents-view.js

@@ -0,0 +1,41 @@
+// 2026-11-06 subagents working, on the board (src/subagents.js reads them): the session's status says
+// "2 subagents working" instead of looking idle, and Live shows a line with what the newest one is
+// doing ("Bash: pnpm test"). Words and a shape (the spinner), never color alone.
+
+export function subCount(s) { const n = s && s.subagents ? Number(s.subagents.n) || 0 : 0; return n > 0 ? n : 0 }
+export function subLabel(sub) {
+  const n = sub ? Number(sub.n) || 0 : 0
+  return n > 0 ? n + (n === 1 ? ' subagent working' : ' subagents working') : ''
+}
+export function subStep(sub) {
+  const l = sub && sub.latest
+  if (!l) return ''
+  return String(l.tool ? l.tool + (l.detail ? ': ' + l.detail : '') : l.detail || '').replace(/\s+/g, ' ').trim().slice(0, 160)
+}
+const who = (a) => (a && (a.label || (a.type ? a.type + ' agent' : ''))) || 'a subagent'
+export function subTip(sub) {
+  const list = (sub && Array.isArray(sub.agents) ? sub.agents : []).map((a) => who(a) + (a && a.bg ? ' (background)' : ''))
+  const step = subStep(sub)
+  return (list.length ? list.join('\n') : subLabel(sub)) + (step ? '\nNow: ' + step : '')
+}
+// The status pill while subagents work (a session in a turn or with background work)
+export function subPillHtml(s, esc) {
+  const sub = s && s.subagents
+  const label = subLabel(sub)
+  if (!label) return ''
+  const tip = subTip(sub)
+  return '<span class="pill s-active sub-pill" tabindex="0" data-tip="' + esc(tip) + '" aria-label="' + esc(label + ': ' + tip.replace(/\n/g, ', ')) + '"><span class="sub-spin" aria-hidden="true"></span>' + esc(label) + '</span>'
+}
+// Live's line under the thread
+export function subStripHtml(sub, esc, { now = Date.now() } = {}) {
+  const label = subLabel(sub)
+  if (!label) return ''
+  const step = subStep(sub)
+  const at = sub.latest && sub.latest.at ? Number(sub.latest.at) : 0
+  const ago = at ? Math.max(0, Math.round((now - at) / 1000)) : null
+  const when = ago == null ? '' : ago < 5 ? 'just now' : ago < 90 ? ago + 's ago' : Math.round(ago / 60) + 'm ago'
+  return '<div class="lv-subs" role="status" data-tip="' + esc(subTip(sub)) + '"><span class="sub-spin" aria-hidden="true"></span><span class="lv-subs-what"><b>' + esc(label) + '</b>' +
+    (step ? '<span class="lv-subs-step">' + esc(step) + '</span>' : '') + '</span>' + (when ? '<span class="faint lv-subs-when">' + esc(when) + '</span>' : '') + '</div>'
+}
+// What Live's refetch compares, beside the thread's own signature
+export function subSig(sub) { return sub && sub.n > 0 ? sub.n + ':' + (sub.latest ? sub.latest.at + (sub.latest.tool || '') + (sub.latest.detail || '') : '') : '' }

package/ui/summary-examples.js

@@ -40,7 +40,7 @@ export const SUMMARY_EXAMPLES = {
 }
 export const LENGTH_CHOICES = [
   { key: 'short', label: 'Short', approx: '~300 tokens', blurb: 'Doing, Stopped at, Next. Three lines.' },
-  { key: 'informative', label: 'Informative', approx: '~700 tokens', blurb: 'Adds key decisions, open questions, files touched and why, and what didn’t work.', recommended: true },
+  { key: 'informative', label: 'Informative', approx: '~700 tokens', blurb: 'Adds approach notes, open questions, files touched and why, and what didn’t work.', recommended: true },
   { key: 'long', label: 'Long', approx: '~1500 tokens', blurb: 'Adds a narrative recap and the next 3 steps.' },
 ]
 

package/ui/tabs.js

@@ -222,6 +222,13 @@ export function stateMark(v, esc) {
 // 0.9.17 the walkthrough's Look-closely count: a small eye and a number, as quiet as the
 // status word (not a badge), only when there's something; the words in the tip.
 const EYE = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>'
+// 0.9.18 the strip: a closable tab's shape sits in the ×'s place (the × shows on hover or focus),
+// so a busy strip keeps room for titles; the word is in the tab's tip and its label. A pinned tab
+// (no ×) and a touch screen (no hover) keep the shape beside the title. Shapes differ per state.
+export function slotMark(v, esc) {
+  const st = stateOf(v)
+  return st !== 'quiet' ? glyphHtml(st, { esc, hidden: true, noTip: true, cls: 'tab-sg tab-xsg' }) : ''
+}
 export function lookMark(v, esc) {
   const n = Number(v && v.look) || 0
   if (n <= 0) return ''
@@ -240,12 +247,12 @@ export function stripHtml(views, activeId, onBoard, esc) {
   const tabs = views.map((v) => {
     const on = v.id === activeId
     return '<div class="tab-cell' + (on ? ' on' : '') + (v.preview ? ' preview' : '') + (v.pinned ? ' pinned' : '') + '" data-tab-id="' + esc(v.id) + '">' +
-      '<a class="tab tab-s' + (on ? ' on' : '') + (v.preview ? ' preview' : '') + '" href="' + esc(v.href) + '" data-tab="' + esc(v.id) + '"' + (on ? ' aria-current="true"' : '') + ' data-tip="' + esc(v.title + (v.pinned ? ' · pinned' : '') + (v.preview ? ' · preview: double-click to keep it open' : '')) + '" aria-label="' + esc((v.pinned ? 'Pinned: ' : '') + label(v)) + '" aria-keyshortcuts="Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" draggable="false">' +
-      (v.pinned ? PIN_GLYPH : '') + '<span class="tab-t">' + esc(v.title) + '</span>' + stateMark(v, esc) + lookMark(v, esc) + '</a>' +
+      '<a class="tab tab-s' + (on ? ' on' : '') + (v.preview ? ' preview' : '') + '" href="' + esc(v.href) + '" data-tab="' + esc(v.id) + '"' + (on ? ' aria-current="true"' : '') + ' data-tip="' + esc(v.title + (SHORT[stateOf(v)] ? ' · ' + SHORT[stateOf(v)] : '') + (v.pinned ? ' · pinned' : '') + (v.preview ? ' · preview: double-click to keep it open' : '')) + '" aria-label="' + esc((v.pinned ? 'Pinned: ' : '') + label(v)) + '" aria-keyshortcuts="Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" draggable="false">' +
+      (v.pinned ? PIN_GLYPH : '') + '<span class="tab-t">' + esc(v.title) + '</span>' + '<span class="tab-st' + (v.pinned ? '' : ' tab-st-touch') + '">' + slotMark(v, esc) + '</span>' + lookMark(v, esc) + '</a>' +
       (v.preview
         ? '<button type="button" class="tab-x tab-keep" data-tab-keep="' + esc(v.id) + '" data-tip="Keep open" aria-label="' + esc('Keep ' + v.title + ' open') + '">' + PIN + '</button>'
         : '') +
-      (v.pinned ? '' : '<button type="button" class="tab-x" data-tab-close="' + esc(v.id) + '" data-tip="Close tab" aria-label="' + esc('Close ' + v.title) + '">' + X + '</button>') + // a pinned tab stays: Unpin is on its right-click
+      (v.pinned ? '' : '<button type="button" class="tab-x' + (slotMark(v, esc) ? ' has-st' : '') + '" data-tab-close="' + esc(v.id) + '" data-tip="Close tab" aria-label="' + esc('Close ' + v.title) + '">' + slotMark(v, esc) + X + '</button>') + // a pinned tab stays: Unpin is on its right-click
       '</div>'
   }).join('')
   // 0.9.16: + New session right after the open tabs