@ucsandman/legcli 0.10.0 → 0.12.0

package/src/board/sessions.js

@@ -23,6 +23,14 @@
   }
   const WIN_WORDS = { '5h': '5 hour', '7d': '7 day' }
   const IDS = ['claude', 'codex', 'agy', 'grok', 'fake']
+  // Mirrors MODEL_ALIASES and ALL_HANDOFF_AGENTS in src/buckets.mjs and
+  // src/preferences.mjs. This file is served to a browser and cannot import
+  // from either, so the lists are copied here and nowhere else on the board; a
+  // new alias is a change to both files in the same commit. The server is still
+  // the authority: it answers a rung it has never heard of with a 400 sentence,
+  // which the editor prints verbatim.
+  const MODEL_ALIASES = { claude: ['fable', 'opus', 'sonnet', 'haiku'], codex: [], agy: [], grok: [] }
+  const LADDER_AGENTS = ['claude', 'codex', 'agy', 'grok']
 
   let view = null
   const NO_BRANCH_BLOCKER = 'this terminal works in the checkout itself: there is no branch of its own to land'
@@ -34,9 +42,16 @@
   const alsoOpen = new Set()
   const actionNotes = new Map()
   const lastTone = new Map()
-  const defaultEditor = { order: null, dirty: false, saving: false, status: '', statusClass: '' }
-
-  function getToken() { return localStorage.getItem('legToken') || localStorage.getItem('batonToken') || '' }
+  const defaultEditor = { ladder: null, climb_back: 'next-handoff', may_spend: false, reserve: {}, dirty: false, saving: false, status: '', statusClass: '' }
+
+  // localStorage THROWS rather than answering null in a browser with site data
+  // blocked, in a partitioned webview and on a board opened from a file. This
+  // read runs inside api(), so an unguarded one takes every fetch on the page
+  // down before it is issued and the board looks exactly like a dead server.
+  // An empty token is already a valid state: the header is only added if (token).
+  function getToken() {
+    try { return localStorage.getItem('legToken') || localStorage.getItem('batonToken') || '' } catch { return '' }
+  }
   async function api(path, opts = {}) {
     const headers = { 'Content-Type': 'application/json' }
     const token = getToken()
@@ -139,8 +154,15 @@
   function optionLabel(a) { return a ? (a.account && a.account !== 'default' ? `${a.agent}/${a.account}` : a.agent) : 'none' }
   function idOf(agent) { return IDS.includes(agent) ? agent : 'fake' }
   const tail = (id) => String(id).split('-').slice(-2).join('-')
+  // `leg#7f3a`: the repo this terminal is in and the short id the row prints,
+  // which is how a human refers to it out loud and in the verdict.
+  const shortId = (s) => tail(s.session_id).replace(new RegExp(`^${s.agent || ''}-`), '')
+  const rowName = (s) => `${s.repo_name || s.agent || 'terminal'}#${shortId(s)}`
   const shared = () => Boolean(view && view.share && view.share.on)
   const isMine = (s) => Boolean(view && view.you && s.owner && view.you.name === s.owner)
+  // the pipeline board belongs to the owner and the operators of the machine;
+  // a guest's End row offers no card (the route answers 403)
+  const canCards = () => !(view && view.you && view.you.role && view.you.role !== 'owner' && view.you.role !== 'operator')
 
   // ---- 6.1 the window rail ----------------------------------------------
   // One state value per account drives the .acct modifier, every rail cell, the
@@ -252,6 +274,319 @@
     ])
   }
 
+  // ---- the binding bucket -------------------------------------------------
+  // The bucket that will actually stop the work: the one the endpoint marked
+  // active, else the highest percentage it reported, else the legacy hottest of
+  // the two windows, which is all an older record or a guest payload carries.
+  // Mirrors binding() in src/usage.mjs; the board cannot import from it.
+  const BUCKET_WORD = { weekly_scoped: 'week', weekly_all: 'week', session: 'session', spend: 'spend', seven_day: '7d', five_hour: '5h' }
+  function bindingOf(a) {
+    const buckets = Array.isArray(a && a.buckets) ? a.buckets.filter((b) => b && Number.isFinite(b.percent)) : []
+    const top = (l) => (l.length ? [...l].sort((x, y) => y.percent - x.percent)[0] : null)
+    const b = top(buckets.filter((x) => x.is_active)) || top(buckets)
+    if (b) return { kind: b.kind, model: b.model || null, percent: b.percent, resets_at: Number.isFinite(b.resets_at) ? b.resets_at : null, scope: b.model ? 'model' : 'account' }
+    const w = worstWindow(a)
+    if (!w || !Number.isFinite(w.pct)) return null
+    return { kind: a && a.seven_day === w ? 'seven_day' : 'five_hour', model: null, percent: w.pct, resets_at: Number.isFinite(w.resets_at) ? w.resets_at : null, scope: 'account' }
+  }
+  // the token's two words: `fable week`, `week`, `session`, `5h`
+  function bucketWord(b) { const word = BUCKET_WORD[b.kind] || b.kind; return b.model ? `${b.model} ${word}` : word }
+  // the same bucket inside a sentence: "63% of its week"
+  function windowPhrase(b) { return b.kind === 'session' ? 'its session' : b.kind === 'five_hour' ? 'its 5 hours' : 'its week' }
+  // the account's own window, ignoring any model bucket: what a same-login
+  // model rung still has to spend, and what an account wall would take away
+  function accountBucket(a) {
+    const flat = (Array.isArray(a && a.buckets) ? a.buckets : []).filter((b) => b && !b.model && Number.isFinite(b.percent))
+    const b = [...flat].sort((x, y) => y.percent - x.percent)[0]
+    if (b) return { kind: b.kind, model: null, percent: b.percent, resets_at: Number.isFinite(b.resets_at) ? b.resets_at : null, scope: 'account' }
+    const legacy = bindingOf(a)
+    return legacy && !legacy.model ? legacy : null
+  }
+  const Model = (m) => (m ? String(m).charAt(0).toUpperCase() + String(m).slice(1) : '')
+  // every model this login has published anything about. A model named by
+  // neither a bucket nor a wall is one Leg has never seen, and it is never
+  // guessed at.
+  function knownModels(a) {
+    const out = []
+    for (const b of (a && a.buckets) || []) if (b && b.model && !out.includes(b.model)) out.push(b.model)
+    for (const m of Object.keys((a && a.walls) || {})) if (!out.includes(m)) out.push(m)
+    return out
+  }
+  function wallFor(a, model) {
+    const w = a && a.walls ? a.walls[model] : null
+    return w && Number.isFinite(w.limited_until) && w.limited_until * 1000 > Date.now() ? w : null
+  }
+  function walledModels(a) { return knownModels(a).filter((m) => wallFor(a, m)) }
+  function openModels(a) { return knownModels(a).filter((m) => !wallFor(a, m)) }
+  function modelBucket(a, model) {
+    return (Array.isArray(a && a.buckets) ? a.buckets : []).find((b) => b && b.model === model && Number.isFinite(b.percent)) || null
+  }
+
+  // ---- the forecast (spec A.5 row 4, E rule 6) -----------------------------
+  // `forecast` rides the binding bucket, computed by `burn()` in src/usage.mjs:
+  // a rate measured inside ONE window, never across a reset, and only past a
+  // gate of three samples spanning ten minutes. Under the gate there is no time
+  // at all, and every time that is printed carries the volume it came from: a
+  // figure with no sample count beside it is a guess wearing an instrument's
+  // clothes, and this one is printed in the largest type on the page.
+  function forecastOf(c) {
+    const f = c && c.forecast
+    return f && Number.isFinite(f.seconds_left) && Number.isFinite(f.samples) && Number.isFinite(f.span_s) ? f : null
+  }
+  // `2h 40m` under a day, `3d 5h` beyond, and spelled-out minutes under ten:
+  // `0h 8m` reads as an instrument, and eight minutes is a sentence.
+  function burnPhrase(secondsLeft) {
+    const m = Math.max(0, Math.round(secondsLeft / 60))
+    if (m < 10) return `${m} minute${m === 1 ? '' : 's'}`
+    if (m < 60) return `${m}m`
+    const h = Math.floor(m / 60)
+    if (h < 24) return `${h}h${m % 60 ? ` ${m % 60}m` : ''}`
+    const d = Math.floor(h / 24)
+    return `${d}d${h % 24 ? ` ${h % 24}h` : ''}`
+  }
+  function burnVolume(f, lead = 'from') { return `${lead} ${f.samples} sample${f.samples === 1 ? '' : 's'} over ${ago(f.span_s * 1000)}` }
+  function andList(xs) { return xs.length < 2 ? xs.join('') : `${xs.slice(0, -1).join(', ')} and ${xs[xs.length - 1]}` }
+
+  // ---- what one terminal is waiting for ------------------------------------
+  // `waiting` carries TWO shapes under one key and they mean opposite things.
+  // `{ type: 'reset', agent, account, resets_at, since }` is the all-out
+  // countdown the runner writes: nobody is being waited on, the child is
+  // already dead. The Notification shapes below are a HUMAN being waited on.
+  // Both carry `type` and `since`, so the shape is told apart by the type and
+  // never by the presence of a field (src/sessions.mjs createSession).
+  const NOTIFY_TYPES = ['permission_prompt', 'idle_prompt', 'agent_needs_input', 'quota_auto_resume']
+  // src/taps/claude.mjs QUOTA_STAND_DOWN, character for character: two waiters
+  // on one terminal is the failure to avoid, so the row says who is waiting.
+  const QUOTA_STAND_DOWN = 'Claude Code is waiting at the limit itself; Leg is not handing this one off.'
+  // Nothing clears `waiting` on the way out: the ended transition in
+  // src/attach.mjs and the lost one in src/sessions.mjs both leave the last
+  // Notification shape on the record. A dead terminal is not waiting on
+  // anybody, so the guard is the one quietPhrase below already keeps: without
+  // it a terminal that exited at a permission prompt said "waiting on you"
+  // forever, held the tab badge and never fell into the Finished ledger.
+  function notifyWait(s) {
+    const w = s && s.waiting
+    return w && s.active && NOTIFY_TYPES.includes(w.type) ? w : null
+  }
+  function resetWait(s) {
+    const w = s && s.waiting
+    return w && !NOTIFY_TYPES.includes(w.type) ? w : null
+  }
+  // A.6 rank 3. The question is printed verbatim, capped at the 160 characters
+  // the hook itself stores: a paraphrase of what an agent asked for is the one
+  // thing a human cannot check against the terminal in front of them.
+  function waitingNote(w) {
+    if (!w) return null
+    const since = Date.parse(w.since || '')
+    const msg = String(w.message || '').slice(0, 160)
+    const asked = Number.isFinite(since) ? `, asked ${ago(Date.now() - since)} ago` : ''
+    if (w.type === 'quota_auto_resume') return { rank: 3, cat: 'standing down', tone: 'warn', text: msg || QUOTA_STAND_DOWN }
+    if (w.type === 'permission_prompt') return { rank: 3, cat: 'waiting on you', tone: 'warn', text: `waiting on you: permission to run ${msg || 'a tool'}${asked}` }
+    if (w.type === 'idle_prompt') return { rank: 3, cat: 'waiting on you', tone: 'warn', text: `waiting on you: idle${Number.isFinite(since) ? ` since ${clockAt(since)}` : ''}` }
+    return { rank: 3, cat: 'waiting on you', tone: 'warn', text: `waiting on you: ${msg || 'it asked for something'}` }
+  }
+
+  // ---- A.4 rows 7 to 9 and 12: the register's data tokens ------------------
+  // Pure data in reading order, so the words can be asserted without a DOM and
+  // the row builder below stays a list of appends.
+  const QUIET_MS = 2 * 60 * 1000
+  // `claude/fable`. The agent alone when the model is unknown: a printed model
+  // nobody chose is a wrong number in disguise, so there is never a default.
+  function modelToken(s) { return s && s.agent ? (s.model ? `${s.agent}/${s.model}` : s.agent) : null }
+  // an observation, not a demand, and printed in the muted tone for every
+  // agent. A row already waiting on a human says that instead.
+  function quietPhrase(s) {
+    if (!s || !s.active || notifyWait(s)) return null
+    const t = Date.parse(s.last_activity || '')
+    if (!Number.isFinite(t)) return null
+    const idle = Date.now() - t
+    return idle >= QUIET_MS ? `quiet ${ago(idle)}` : null
+  }
+  // A.4 row 12: the bucket that will actually stop THIS terminal, which depends
+  // on the model it is running. `capacity` is binding(usage, session.model),
+  // computed per request in src/server.mjs and never persisted.
+  function capacityPhrase(s) {
+    const c = s && s.capacity
+    if (!c || !Number.isFinite(c.percent)) return null
+    const label = s.account && s.account !== 'default' ? `${s.agent}/${s.account}` : s.agent
+    // With a rate the row says the same fact in the unit the reader is actually
+    // deciding in, and carries the volume it was drawn from. Under the gate it
+    // is the percentage again (E rule 6): no time is printed from two readings.
+    const f = forecastOf(c)
+    if (f) return `about ${burnPhrase(f.seconds_left)} of ${c.scope === 'model' && c.model ? c.model : label} left, ${burnVolume(f)}`
+    const pct = Math.round(c.percent)
+    if (c.scope === 'model' && c.model) return `${pct}% of the ${c.model} week`
+    const win = c.kind === 'session' || c.kind === 'five_hour' ? '5-hour window' : 'week'
+    return `${pct}% of the ${label} ${win}`
+  }
+  function registerTokens(s) {
+    const out = []
+    const dirty = Array.isArray(s && s.files_dirty) ? s.files_dirty.length : 0
+    if (dirty) out.push({ kind: 'dirty', text: `dirty ${dirty}` })
+    // `ahead` is a git count the runner polls; an older record does not carry
+    // it, and a count nobody measured is never printed as zero
+    if (Number.isFinite(s && s.ahead) && s.ahead > 0) out.push({ kind: 'ahead', text: `ahead ${s.ahead}` })
+    const model = modelToken(s)
+    if (model) out.push({ kind: 'model', text: model })
+    const quiet = quietPhrase(s)
+    if (quiet) out.push({ kind: 'quiet', text: quiet })
+    return out
+  }
+  // A.6 rank 8.5: said only when the bucket that binds this terminal is at or
+  // past the warning line. Model-scoped, a same-login rung is the answer;
+  // account-scoped, it buys nothing and the sentence says which login is next.
+  function capacityNote(s, account) {
+    const c = s && s.capacity
+    if (!c || !Number.isFinite(c.percent) || c.percent < WARN_PCT) return null
+    const pct = Math.round(c.percent)
+    const label = s.account && s.account !== 'default' ? `${s.agent}/${s.account}` : s.agent
+    if (c.scope === 'model' && c.model) {
+      const alt = account ? openModels(account).filter((m) => m !== c.model)[0] : null
+      return { rank: 8.5, cat: 'near the model wall', tone: 'warn', text: `${c.model} at ${pct}% of its week${alt ? `; Hand off > ${s.agent}/${alt} keeps this terminal` : ''}` }
+    }
+    const next = (s.chain || []).find((x) => x && x.agent !== s.agent)
+    return { rank: 8.5, cat: 'near the login wall', tone: 'warn', text: `${label} at ${pct}%, shared by every model${next ? `; next off ${label}: ${optionLabel(next)}` : ''}` }
+  }
+  function accountOf(s) {
+    const list = (view && view.accounts) || []
+    return list.find((a) => a.agent === s.agent && (a.account || 'default') === (s.account || 'default')) || null
+  }
+
+  // ---- the capacity strip -------------------------------------------------
+  // One 44px band under the verdict, one token per login, and nothing else:
+  // usage is a property of the work now, not a region of its own. The panels
+  // are not rewritten, they move behind the disclosure at the end of the strip.
+  // The token prints the BINDING bucket, because the board printing 47% for a
+  // login whose active bucket is at 63% is the defect this strip exists for.
+  function capFigure(a, b) {
+    // the same two refusals the gauge prints, in the strip's shorter grammar
+    if (a.shared === false) return 'not shared'
+    if (a.loading) return 'reading'
+    if (acctState(a) === 'walled') return Number.isFinite(a.limited_until) ? `back ${until(a.limited_until)}` : 'back when it resets'
+    // agy publishes no percentage, ever; a login that has one and has not
+    // reported it yet is a different fact and says so.
+    if (!b) return a.agent === 'agy' ? 'no figure' : 'no reading'
+    const observed = Date.parse(a.observed_at || a.updated_at || '')
+    // a reading older than the window it describes prints the clock it was
+    // taken at instead of a bucket word: it is a measurement, not a reading now
+    if (a.stale && a.agent !== 'agy' && Number.isFinite(observed)) return `${Math.round(b.percent)}% ${clockAt(observed)}`
+    return `${Math.round(b.percent)}% ${bucketWord(b)}`
+  }
+  // the spoken sentence carries what the visible token cannot: the reset, the
+  // source, the wall and the age of the reading, exactly as the gauges do.
+  function capValueText(a, b) {
+    const parts = []
+    if (a.shared === false) parts.push(`Usage for ${accountLabel(a)} is not shared with guests.`)
+    else if (!b) {
+      parts.push(a.agent === 'agy'
+        ? 'agy publishes no usage percentage, ever. Leg sees the wall when agy hits it.'
+        : `No reading has come back from ${accountLabel(a)} yet.`)
+    } else {
+      parts.push(`${Math.round(b.percent)} percent of ${b.model ? `the ${b.model} ${BUCKET_WORD[b.kind] || b.kind}` : windowPhrase(b)} used.`)
+      if (Number.isFinite(b.resets_at)) parts.push(`Resets at ${until(b.resets_at)}, in ${spoken(b.resets_at * 1000 - Date.now())}.`)
+    }
+    if (acctState(a) === 'walled') parts.push(`${accountLabel(a)} is at its wall until ${until(a.limited_until)}, in ${spoken(a.limited_until * 1000 - Date.now())}.`)
+    for (const m of walledModels(a)) parts.push(`${m} is out until ${until(wallFor(a, m).limited_until)}.`)
+    if (a.source) parts.push(`Source: ${a.source}.`)
+    const observed = Date.parse(a.observed_at || a.updated_at || '')
+    if (a.stale && a.agent !== 'agy' && Number.isFinite(observed)) parts.push(`Read at ${clockAt(observed)}, ${spoken(Date.now() - observed)} ago, stale.`)
+    return parts.join(' ')
+  }
+  function capToken(a) {
+    const id = idOf(a.agent)
+    const b = bindingOf(a)
+    const walled = acctState(a) === 'walled'
+    const pct = b ? Math.max(0, Math.min(100, Math.round(b.percent))) : null
+    const token = el('span', { class: 'cap-token' }, [
+      el('span', { class: `dot id-${id}`, 'aria-hidden': 'true' }),
+      el('span', { class: `cap-name id-${id}` }, [accountLabel(a)]),
+    ])
+    // no number, no instrument. A track with nothing in it is a reading of zero
+    // to anyone glancing at it, which is exactly what agy does not have.
+    if (pct !== null || walled) {
+      const stop = pct !== null && pct > 85 ? `${((85 / pct) * 100).toFixed(2)}%` : null
+      const fill = el('span', {
+        class: 'cap-fill',
+        style: walled ? 'width:100%;background:var(--danger)'
+          : stop ? `width:${pct}%;background:linear-gradient(to right,var(--id-${id}) 0 ${stop},var(--danger) ${stop} 100%)`
+            : `width:${pct}%;background:var(--id-${id})`,
+      })
+      // a walled login with no percentage is not a meter: 100 would be a number
+      // nobody measured. It keeps the track and carries the sentence instead.
+      const semantics = pct === null
+        ? { role: 'img', 'aria-label': `${accountLabel(a)} capacity. ${capValueText(a, b)}` }
+        : { role: 'meter', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': String(pct), 'aria-label': `${accountLabel(a)} capacity`, 'aria-valuetext': capValueText(a, b) }
+      token.appendChild(el('span', { class: 'cap-track', ...semantics }, [fill]))
+    }
+    // with no track the figure carries the whole sentence itself, the way the
+    // gauge's readout does when a window has never been read
+    const quiet = pct === null && !walled ? { role: 'img', 'aria-label': `${accountLabel(a)} capacity. ${capValueText(a, b)}` } : {}
+    token.appendChild(el('span', { class: `cap-figure${walled ? ' is-out' : ''}${pct === null && !walled ? ' cap-figure--none' : ''}`, ...quiet }, [capFigure(a, b)]))
+    return token
+  }
+  function capacityStrip(list) {
+    const box = document.getElementById('capacity-tokens')
+    if (!box) return
+    box.textContent = ''
+    for (const a of list) box.appendChild(capToken(a))
+  }
+
+  // The model rail, on the panel head inside the drawer: one chip per model
+  // this login has published a bucket or a wall for. A walled model says when
+  // it is back, in words, because a wall is attributed from wording and a
+  // percentage is measured, and one must never be printed as the other.
+  function modelRail(a) {
+    const models = knownModels(a)
+    if (!models.length) return null
+    const rail = el('span', { class: 'model-rail', 'aria-label': `${accountLabel(a)} models` })
+    // B.6: an open chip is the one control that turns a figure into a decision,
+    // so it becomes a button that puts that rung at the top of ONE terminal's
+    // ladder: the one open in the detail region, else the first live row on
+    // this login. With no live terminal on the login there is nothing to
+    // re-point and the chip stays what it was, a reading.
+    const target = railTerminal(a)
+    for (const m of models) {
+      const wall = wallFor(a, m)
+      const b = modelBucket(a, m)
+      const text = wall ? `${m} out until ${until(wall.limited_until)}` : b ? `${m} ${Math.round(b.percent)}%` : m
+      const pickable = !wall && target && target.model !== m
+      if (!pickable) {
+        rail.appendChild(el('span', { class: `model-chip${wall ? ' is-out' : ''}${target && target.model === m ? ' is-current' : ''}`, title: wall && wall.evidence ? wall.evidence : null }, [text]))
+        continue
+      }
+      const chip = el('button', {
+        type: 'button', class: 'btn btn-text model-chip model-chip--pick',
+        'data-focus-key': `rail:${a.agent}:${a.account || 'default'}:${m}`,
+        title: `Put ${a.agent} / ${m} at the top of ${rowName(target)}'s ladder`,
+      }, [text])
+      chip.addEventListener('click', () => pickRung(target, { agent: a.agent, account: a.account || 'default', model: m }, chip))
+      rail.appendChild(chip)
+    }
+    return rail
+  }
+  // the terminal a rail chip re-points: the open one if it is on this login,
+  // else the first live row on it
+  function railTerminal(a) {
+    const live = ((view && view.sessions) || []).filter((s) => s.active && !s.hidden && s.agent === a.agent && (s.account || 'default') === (a.account || 'default') && s.can_edit_handoff_order)
+    return live.find((s) => s.session_id === drawer.id) || live[0] || null
+  }
+  // Moving a rung to the top of one terminal's ladder is the same POST the
+  // ladder editor makes, so the two cannot drift: one route, one shape.
+  async function pickRung(s, rung, btn) {
+    btn.disabled = true
+    actionNotes.delete(s.session_id)
+    const rest = (s.handoff_ladder || []).filter((r) => rungKey(r) !== rungKey(rung))
+    const kept = (s.handoff_ladder || []).find((r) => rungKey(r) === rungKey(rung))
+    const ladder = [kept || { ...rung, when: 'always', cost: rung.agent === 'agy' ? 'free' : rung.agent === 'grok' ? 'metered' : 'plan' }, ...rest]
+    try {
+      await api(`/api/sessions/${encodeURIComponent(s.session_id)}/handoff-order`, { method: 'POST', body: { handoff_ladder: ladder } })
+      actionNotes.set(s.session_id, { at: Date.now(), tone: 'ok', text: `${rungLabel(rung)} is the next rung for this terminal` })
+    } catch (err) {
+      actionNotes.set(s.session_id, { at: Date.now(), tone: 'danger', text: err.message })
+    }
+    refresh()
+  }
+
   // A login is a raised object, and how much surface it gets is the design
   // saying how much it matters. The login carrying the terminals gets the wide
   // lit panel with both of its windows drawn; a login with one fact to report
@@ -265,6 +600,8 @@
     panel.appendChild(el('div', { class: 'panel-head' }, [
       el('span', { class: 'who' }, [el('span', { class: `dot id-${id}` }), el('span', { class: `acct-name id-${id}` }, [accountLabel(a)])]),
       el('span', { class: 'who-note' }, [live]),
+      // one chip per model this login has published a bucket or a wall for
+      modelRail(a),
     ]))
 
     if (state === 'notshared' || state === 'loading') {
@@ -310,60 +647,299 @@
   }
 
   // The headline is the one fact that decides what happens next, said as a
-  // sentence. It is never the number that the panel under it already prints:
+  // sentence. It is never the number that the strip under it already prints:
   // the same figure in the two largest slots on the page is one fact taking up
   // two, which is what the rejected head did.
-  function verdictLines(list, sessions) {
-    const liveSessions = (sessions || []).filter((s) => s.active)
-    const withReading = list.filter((a) => worstWindow(a) && Number.isFinite(worstWindow(a).pct))
-    if (!list.length) return { line: 'Reading the logins.', sub: '' }
-
-    const walled = list.filter((a) => acctState(a) === 'walled')
-    const busiest = [...list].sort((x, y) => (y.live || 0) - (x.live || 0))[0]
-    const onOneLogin = liveSessions.length > 0 && new Set(liveSessions.map((s) => s.agent)).size === 1
-    const subject = onOneLogin ? list.find((a) => a.agent === liveSessions[0].agent) || busiest : closestToWall(list)
-    const w = subject ? worstWindow(subject) : null
-    const known = w && Number.isFinite(w.pct)
-    const left = known ? Math.max(0, 100 - Math.round(w.pct)) : null
-
-    let line
-    if (!liveSessions.length) {
-      line = walled.length
-        ? `Nothing is running, and ${walled.map(accountLabel).join(' and ')} ${walled.length === 1 ? 'is' : 'are'} at the wall.`
-        : 'Nothing is running.'
-    } else if (onOneLogin && known) {
-      // C's framing: one login, one point of failure. The number is what is
-      // LEFT, because that is the quantity the reader is deciding against.
-      // One terminal is not "all the terminal": the plural sentence is about
-      // everything riding on one login, and with a single terminal there is no
-      // "all" to make, so it says the plainer thing.
-      line = liveSessions.length === 1
-        ? `Your terminal is on ${accountLabel(subject)}, and ${accountLabel(subject)} has ${left}% left.`
-        : `All ${liveSessions.length} terminals are on ${accountLabel(subject)}, and ${accountLabel(subject)} has ${left}% left.`
-    } else if (known) {
-      line = `${accountLabel(subject)} has ${left}% left, and ${liveSessions.length} terminal${liveSessions.length === 1 ? ' is' : 's are'} working.`
-    } else {
-      line = `${liveSessions.length} terminal${liveSessions.length === 1 ? ' is' : 's are'} working.`
+  //
+  // VERDICT_CH is a MEASUREMENT, not a taste: at 1280 the verdict column is
+  // 26ch (891px) and 300 random sentences per length, drawn from this table's
+  // own vocabulary, still fit two 56.16px lines at 60 characters. 56 is that
+  // ceiling with four characters of slack for a longer login name, and
+  // test/board-verdict.test.mjs holds every branch under it.
+  const VERDICT_CH = 56
+  // the sub is two lines of 17px inside `max-width: 54ch`, which is about 120
+  // characters; clauses are added while they fit and dropped whole after that.
+  const SUB_CH = 120
+  // mirrors WARN_PCT in src/usage.mjs, which the board cannot import from. A
+  // bucket at or past it is close enough to the wall that the row says so.
+  const WARN_PCT = 85
+  // Each headline is written as a preferred form and shorter fallbacks, so a
+  // login called `claude/very-long-account` costs a clause, never a third line.
+  function headline(...forms) {
+    const real = forms.filter(Boolean)
+    for (const f of real) if (f.length <= VERDICT_CH) return f
+    const last = String(real[real.length - 1] || '')
+    const cut = last.slice(0, VERDICT_CH - 1)
+    const space = cut.lastIndexOf(' ')
+    return `${(space > 20 ? cut.slice(0, space) : cut).replace(/[,.;:]$/, '')}.`
+  }
+  function subLine(...parts) {
+    const out = []
+    for (const p of parts.filter(Boolean)) {
+      const next = out.concat(p).join(' ')
+      if (next.length <= SUB_CH) out.push(p)
+    }
+    return out.join(' ')
+  }
+
+  // A.5, top to bottom. A bucket whose state is unknown is never named, and
+  // "Measured Ns ago" appears only when the reading is actually stale.
+  // C.5: the verdict never mentions cards unless one is waiting on a human.
+  // `cards_waiting` on the payload is {count, first:{id,title,station,since}};
+  // an older server sends a bare number and a guest is sent nothing at all, and
+  // neither of those can name a card, so neither prints a sentence about one.
+  function waitingCard(cards) {
+    const first = cards && typeof cards === 'object' ? cards.first : null
+    return first && first.id ? first : null
+  }
+  // `card 3e1c`: the tail of the card id, which is how a card is named on its
+  // own row and out loud.
+  function cardName(id) { return `card ${String(id).split('-').filter(Boolean).slice(-1)[0] || id}` }
+  function verdictLines(list, sessions, cards) {
+    const accounts = (list || []).filter((a) => a && a.agent && !a.loading)
+    if (!accounts.length) return { line: 'Reading the logins.', sub: '' }
+    const live = (sessions || []).filter((s) => s.active)
+    const acctOf = (s) => accounts.find((a) => a.agent === s.agent && (a.account || 'default') === (s.account || 'default'))
+    const liveOn = (a) => live.filter((s) => acctOf(s) === a).length
+    const walled = accounts.filter((a) => acctState(a) === 'walled')
+    const carrying = accounts.filter((a) => liveOn(a) > 0)
+    const subject = (carrying.length ? closestToWall(carrying) : closestToWall(accounts)) || accounts[0]
+    const b = bindingOf(subject)
+    const other = (a) => accounts.filter((x) => x !== a)
+    const openElsewhere = other(subject).filter((a) => acctState(a) !== 'walled')
+    const leftOf = (bb) => Math.max(0, 100 - Math.round(bb.percent))
+    const figure = (a) => { const bb = bindingOf(a); return bb ? (bb.model ? `${accountLabel(a)} is at ${Math.round(bb.percent)}% of the ${Model(bb.model)} week.` : `${accountLabel(a)} is at ${Math.round(bb.percent)}% of ${windowPhrase(bb)}.`) : null }
+    const wallClause = (a) => (Number.isFinite(a.limited_until) ? `${accountLabel(a)} is at its limit until ${until(a.limited_until)}.` : `${accountLabel(a)} is at its limit.`)
+    const otherWalls = () => walled.filter((a) => a !== subject).map(wallClause).join(' ') || null
+    // a reading taken two hours ago with terminals running since is a floor,
+    // not a measurement, and the direction it is wrong in is the whole point
+    const staleClause = (a, bb) => {
+      const observed = Date.parse((a && (a.observed_at || a.updated_at)) || '')
+      if (!a || !a.stale || a.agent === 'agy' || !Number.isFinite(observed) || !bb) return null
+      const n = liveOn(a)
+      if (!n) return `Measured ${ago(Date.now() - observed)} ago.`
+      return `Measured ${ago(Date.now() - observed)} ago. ${n} terminal${n === 1 ? ' runs' : 's run'} on it, so the real figure is higher, never lower.`
     }
 
-    // A's staleness sentence. A reading taken two hours ago with terminals
-    // running since is a floor, not a measurement, and saying which direction
-    // it is wrong in is the whole point of printing the age.
-    const parts = []
-    const observed = subject ? Date.parse(subject.observed_at || subject.updated_at || '') : NaN
-    if (subject && subject.stale && subject.agent !== 'agy' && Number.isFinite(observed) && known) {
-      parts.push(liveSessions.length
-        ? `Measured ${ago(Date.now() - observed)} ago. ${liveSessions.length} terminal${liveSessions.length === 1 ? ' has' : 's have'} been running since, so the real figure is higher than ${Math.round(w.pct)} percent, never lower.`
-        : `Measured ${ago(Date.now() - observed)} ago.`)
+    // 1. a human is blocked. Attention is the scarcer thing, so it outranks
+    // usage. `waiting` carries {type, message, since} from the Notification
+    // hook; the all-out countdown on the same key carries {type: 'reset',
+    // agent, account, resets_at, since} and is not a human being waited on, so
+    // the TYPE is checked and never the presence of `since`. `quota_auto_resume`
+    // is left out here too: nobody asked the human anything, Claude Code is
+    // holding its own turn, and the row says so in its own sentence.
+    const blocked = live
+      .filter((s) => notifyWait(s) && s.waiting.type !== 'quota_auto_resume' && Number.isFinite(Date.parse(s.waiting.since)))
+      .sort((x, y) => Date.parse(x.waiting.since) - Date.parse(y.waiting.since))[0]
+    if (blocked) {
+      const who = rowName(blocked)
+      const waited = spoken(Date.now() - Date.parse(blocked.waiting.since))
+      const others = live.length - 1
+      return {
+        line: headline(`${who} has waited on you for ${waited}.`, `${who} has waited on you for ${ago(Date.now() - Date.parse(blocked.waiting.since))}.`, `${who} is waiting on you.`),
+        sub: subLine(
+          // the question in the words of the thing that asked it, and each
+          // type asks a different question: a permission prompt names a tool,
+          // an idle prompt names a clock, and the third carries its own text
+          blocked.waiting.type === 'permission_prompt' && blocked.waiting.message ? `It asked to run ${String(blocked.waiting.message).slice(0, 80)}.`
+            : blocked.waiting.type === 'idle_prompt' ? `It has had no input since ${clockAt(Date.parse(blocked.waiting.since))}.`
+              : blocked.waiting.message ? `It asked: ${String(blocked.waiting.message).slice(0, 80)}` : null,
+          others > 0 ? `The other ${others === 1 ? 'terminal is' : `${others} terminals are`} still running.` : null,
+        ),
+      }
     }
-    for (const a of walled) {
-      if (a === subject) continue
-      parts.push(Number.isFinite(a.limited_until)
-        ? `${accountLabel(a)} is at the wall until ${until(a.limited_until)}.`
-        : `${accountLabel(a)} is at the wall.`)
+
+    // 1b. the same rule one level down: no terminal is blocked, but a card is,
+    // and a card waiting at a review station is a human being waited on too. It
+    // outranks every usage branch for the reason branch 1 does, and it is the
+    // ONLY thing that puts a card in the verdict (C.5).
+    const card = waitingCard(cards)
+    const cardSince = card ? Date.parse(card.since || '') : NaN
+    if (card) {
+      const who = cardName(card.id)
+      return {
+        line: Number.isFinite(cardSince)
+          ? headline(`${who} has waited on you for ${spoken(Date.now() - cardSince)}.`, `${who} has waited on you for ${ago(Date.now() - cardSince)}.`, `${who} is waiting on you.`)
+          : headline(`${who} is waiting on you.`),
+        sub: subLine(card.station ? `It is at the ${card.station} station.` : null, 'Approve or Reassign on its row.'),
+      }
     }
-    if (!withReading.length && liveSessions.length) parts.push('No login has reported a usage figure yet.')
-    return { line, sub: parts.slice(0, 2).join(' ') }
+
+    // 2. every login at its limit: nothing anywhere can be started, whatever
+    // is running. Said before the per-login branches because it is the whole
+    // board's state, not this login's.
+    if (walled.length === accounts.length && walled.length > 1) {
+      const first = [...walled].sort((x, y) => (x.limited_until || Infinity) - (y.limited_until || Infinity))[0]
+      return {
+        line: headline(`Every login is at its limit; ${accountLabel(first)} is back first.`, `Every login is at its limit.`),
+        sub: subLine(Number.isFinite(first.limited_until) ? `${accountLabel(first)} returns ${until(first.limited_until)}.` : null),
+      }
+    }
+
+    if (live.length) {
+      // 3. an account-scoped bucket binds, and this login has model rungs that
+      // therefore buy nothing. Only said where models are KNOWN: on a login
+      // with no model buckets there is no switch to warn anyone off.
+      if (b && b.scope === 'account' && knownModels(subject).length) {
+        const alt = openModels(subject)[0]
+        // the rung a hand-off off this login would ACTUALLY take, from the
+        // chooser's own answer for a terminal running here, and only the
+        // nearest open login when no live row has one. A login that is open is
+        // not the same fact as a rung that is eligible: a reserve, a cost gate
+        // or a `below N%` rung can rule one out, and the sentence that names it
+        // is the sentence the reader acts on.
+        const eligible = live.filter((s) => acctOf(s) === subject).map((s) => s.eligible_next).find(Boolean)
+        const next = eligible || openElsewhere[0]
+        return {
+          line: headline(`${accountLabel(subject)} has ${leftOf(b)}% left, shared by every model.`, `${accountLabel(subject)} has ${leftOf(b)}% left, for every model.`),
+          sub: subLine(
+            alt ? `Switching to ${alt} buys nothing.` : null,
+            next ? `Next off ${accountLabel(subject)}: ${eligible ? rungLabel(next) : accountLabel(next)}.` : 'Nothing else is open.',
+            staleClause(subject, b),
+          ),
+        }
+      }
+
+      // 4. a model bucket is walled while the account window is open: the one
+      // case where a same-login switch is the answer.
+      const out = acctState(subject) === 'walled' ? [] : walledModels(subject)
+      if (out.length) {
+        const wall = wallFor(subject, out[0])
+        const open = openModels(subject)[0]
+        const acct = accountBucket(subject)
+        return {
+          line: headline(
+            `${Model(out[0])} is out until ${until(wall.limited_until)}; ${open || 'no other model'} is open.`,
+            `${Model(out[0])} is out until ${until(wall.limited_until)}.`,
+          ),
+          sub: subLine(
+            acct ? `${accountLabel(subject)} still has ${leftOf(acct)}% of ${windowPhrase(acct)}.` : null,
+            open ? `Hand off > ${subject.agent}/${open} keeps this terminal.` : null,
+          ),
+        }
+      }
+
+      // 5. a model bucket came back and a terminal is still on the rung Leg
+      // dropped it to. A wall Leg recorded whose clock has run out is the only
+      // evidence that a model returned, and a live row on this login running a
+      // DIFFERENT model is the only evidence anyone is still downshifted; with
+      // neither the sentence is never guessed at.
+      //
+      // Spec A.5 lists this row under "several logins carry work", where it can
+      // never fire: the two branches below return for any login that has a
+      // figure at all. It is a state CHANGE, and it outranks the two branches
+      // that restate a standing percentage (DEVIATIONS.md, step 3).
+      const back = knownModels(subject)
+        .filter((m) => { const w = subject.walls && subject.walls[m]; return w && Number.isFinite(w.limited_until) && w.limited_until * 1000 <= Date.now() && !wallFor(subject, m) })
+        .find((m) => live.some((s) => acctOf(s) === subject && s.model && s.model !== m))
+      if (back) {
+        const down = live.find((s) => acctOf(s) === subject && s.model && s.model !== back)
+        return {
+          line: headline(`${Model(back)} is back; ${rowName(down)} is still on ${down.model}.`, `${Model(back)} is back.`),
+          sub: subLine(`Leg climbs back at the next hand-off.`, `Back to ${back} on the row does it now.`),
+        }
+      }
+
+      // 5.5. the burn rate (A.5 row 4): a time beats a percentage, because the
+      // decision is about the afternoon and not about the number. The rate
+      // rides each session's own `capacity` (binding(usage, model) in
+      // src/server.mjs carries burn()); the accounts payload is buckets, not
+      // rates, so a live row bound to the SAME bucket as the strip's figure is
+      // where the board reads it. A guest payload has no capacity at all, so a
+      // guest board never prints a time, which is the rule the strip follows
+      // already. Placed under the model-came-back branch and above the two
+      // standing-percentage branches: a state CHANGE still outranks a figure.
+      const rate = b
+        ? live.map((s) => ((acctOf(s) === subject && s.capacity && s.capacity.kind === b.kind && (s.capacity.model || null) === (b.model || null)) ? forecastOf(s.capacity) : null)).find(Boolean) || null
+        : null
+      if (rate) {
+        const who = b.model ? Model(b.model) : accountLabel(subject)
+        // which other models this login has published a bucket or a wall for:
+        // said because a Fable figure is NOT the login's figure, and the reader
+        // who takes it for one plans the wrong afternoon. A model nobody has
+        // seen is never named, so a login with one bucket says nothing here.
+        const others = b.model ? knownModels(subject).filter((m) => m !== b.model).map(Model) : []
+        return {
+          line: headline(`About ${burnPhrase(rate.seconds_left)} of ${who} left.`, `About ${burnPhrase(rate.seconds_left)} left.`),
+          sub: subLine(
+            `${burnVolume(rate, 'From')}.`,
+            b.model
+              ? (others.length ? `${andList(others)} ${others.length === 1 ? 'has its own bucket' : 'have their own buckets'}.` : null)
+              : 'Shared by every model.',
+            staleClause(subject, b),
+          ),
+        }
+      }
+
+      // 6. one login carries every live terminal: one login, one point of
+      // failure, and that is what the sentence says.
+      if (carrying.length === 1 && b) {
+        const who = b.model ? Model(b.model) : accountLabel(subject)
+        return {
+          line: headline(
+            `${who} is at ${Math.round(b.percent)}% of ${windowPhrase(b)}, the only login open.`,
+            `${who} is at ${Math.round(b.percent)}% of ${windowPhrase(b)}.`,
+          ),
+          sub: subLine(staleClause(subject, b), otherWalls()),
+        }
+      }
+
+      // 7. several logins carry work: name the one closest to a wall, and the
+      // volume, then put the next login's figure in the sub.
+      if (b) {
+        const second = other(subject).map(figure).filter(Boolean)[0]
+        return {
+          line: headline(
+            `${accountLabel(subject)} has ${leftOf(b)}% left, and ${live.length} terminal${live.length === 1 ? ' is' : 's are'} working.`,
+            `${accountLabel(subject)} has ${leftOf(b)}% left.`,
+          ),
+          sub: subLine(second, staleClause(subject, b), otherWalls()),
+        }
+      }
+
+      // live, and not one login has published a figure. Never a guess.
+      return {
+        line: headline(`${live.length} terminal${live.length === 1 ? ' is' : 's are'} working, and no login has a figure.`, `${live.length} terminal${live.length === 1 ? ' is' : 's are'} working.`),
+        sub: subLine(otherWalls(), 'No login has reported a usage figure yet.'),
+      }
+    }
+
+    // 8 to 11. nothing is running.
+    const bestOpen = openElsewhere.concat(acctState(subject) === 'walled' ? [] : [subject]).map((a) => ({ a, b: bindingOf(a) })).filter((x) => x.b).sort((x, y) => y.b.percent - x.b.percent)[0]
+    const openLine = bestOpen ? `${bestOpen.b.model ? Model(bestOpen.b.model) : accountLabel(bestOpen.a)} is at ${Math.round(bestOpen.b.percent)}% of ${windowPhrase(bestOpen.b)}.` : null
+    if (walled.length) {
+      const first = [...walled].sort((x, y) => (x.limited_until || Infinity) - (y.limited_until || Infinity))[0]
+      return {
+        line: headline(
+          `Nothing is running. ${accountLabel(first)} is back ${until(first.limited_until)}.`,
+          `Nothing is running. ${accountLabel(first)} is at its limit.`,
+        ),
+        sub: subLine(openLine),
+      }
+    }
+    if (bestOpen) return { line: headline(`Nothing is running. ${openLine}`, 'Nothing is running.'), sub: '' }
+    return { line: 'Nothing is running, and no login has a figure.', sub: '' }
+  }
+
+  // The login panels are behind one disclosure now, and whether it is open is
+  // the reader's decision, kept across reloads. localStorage throws in a
+  // private window and on a board opened from a file, so it is never load
+  // bearing: the strip and the panels both render either way.
+  const CAP_KEY = 'legCapacityOpen'
+  let capacityOpen = (() => { try { return localStorage.getItem(CAP_KEY) === '1' } catch { return false } })()
+  function renderCapacityToggle() {
+    const btn = document.getElementById('capacity-toggle')
+    const drawer = document.getElementById('capacity-drawer')
+    if (btn) {
+      btn.setAttribute('aria-expanded', capacityOpen ? 'true' : 'false')
+      btn.textContent = capacityOpen ? 'Hide capacity and models' : 'Capacity and models >'
+    }
+    if (drawer) drawer.hidden = !capacityOpen
+  }
+  function toggleCapacity() {
+    capacityOpen = !capacityOpen
+    try { localStorage.setItem(CAP_KEY, capacityOpen ? '1' : '0') } catch { /* private window: the drawer still opens, it just does not remember */ }
+    renderCapacityToggle()
   }
 
   // 6.1.5, all eight states. The walled state is an ADDITIONAL state of the
@@ -375,11 +951,14 @@
     box.textContent = ''
     const list = accounts || []
 
-    const { line, sub } = verdictLines(list, view ? view.sessions : [])
+    const { line, sub } = verdictLines(list, view ? view.sessions : [], view ? view.cards_waiting : null)
     const h1 = document.getElementById('verdict-line')
     const p = document.getElementById('verdict-sub')
     if (h1) h1.textContent = line
     if (p) p.textContent = sub
+    // the strip is the only usage on screen until the reader opens the drawer
+    capacityStrip(list)
+    renderCapacityToggle()
 
     if (!list.length) return
     // Size encodes importance. The login the terminals are on gets the wide lit
@@ -454,12 +1033,24 @@
         ? `${o.agent} (${tail(o.session_id)}) is changing ${files} in another checkout; whoever lands second rebases`
         : `${o.agent} (${tail(o.session_id)}) is editing ${files} too` })
     }
+    // A.6: a terminal parked at a permission prompt is waiting on a human, and
+    // at rank 3 it raises the row, sorts it and counts it in the region head
+    // through `needsYou` without a second predicate.
+    const waits = waitingNote(notifyWait(s))
+    if (waits) out.push(waits)
     for (const r of s.requests || []) out.push({ rank: 4, cat: 'handoff request', tone: 'warn', text: `${r.by} asked to take this terminal at ${clockAt(Date.parse(r.at))}` })
-    if (s.status === 'waiting' && s.waiting) out.push({ rank: 5, cat: 'waiting', tone: 'warn', text: `waiting for ${optionLabel(s.waiting)} at ${until(s.waiting.resets_at)}` })
+    // the OTHER shape on `waiting`: the all-out countdown, where the child is
+    // already dead and nobody is waiting on a human
+    if (s.status === 'waiting' && resetWait(s)) out.push({ rank: 5, cat: 'waiting', tone: 'warn', text: `waiting for ${optionLabel(s.waiting)} at ${until(s.waiting.resets_at)}` })
     if (s.status === 'handing_off' && s.handoff && s.handoff.to) out.push({ rank: 6, cat: 'handing off', tone: 'warn', text: `handing off to ${optionLabel(s.handoff.to)}, ${s.handoff.reason}${s.handoff.at ? `, ${ago(Date.now() - Date.parse(s.handoff.at))}` : ''}` })
     // rank 8 does not restate the percentage: the head prints it in 30px type a
     // few inches above. It names what the head does not carry, the fallback.
     if (s.warning) out.push({ rank: 8, cat: 'near limit', tone: 'warn', text: `near the ${s.warning.window} wall, next: ${s.chain && s.chain[0] ? optionLabel(s.chain[0]) : 'no eligible fallback'}` })
+    // rank 8.5: the bucket that binds THIS terminal is near its wall. It sorts
+    // under the account's own warning and above the activity fallback, because
+    // it is the more specific of the two: per model, not per login.
+    const cap = capacityNote(s, accountOf(s))
+    if (cap) out.push(cap)
     // rank 10 is a genuine fallback, so a state nobody wrote a fixture for still
     // gets a correct sentence rather than an empty slot.
     out.push({ rank: 10, cat: 'activity', tone: 'muted', text: `turn ${s.turns || 0}${s.last_activity ? `, last activity ${clockAt(Date.parse(s.last_activity))}` : ''}` })
@@ -517,32 +1108,181 @@
     return el('div', { class: 'kv' }, rows)
   }
 
-  function moveOrder(order, index, delta) {
+  // ---- B.3 the fallback ladder, as an editable list -----------------------
+  // A rung is a destination, not an agent: {agent, account, model, when, cost}.
+  // Everything below is pure, so the round trip from a saved ladder to the
+  // controls and back is testable without a DOM.
+  function moveRung(ladder, index, delta) {
     const target = index + delta
-    if (target < 0 || target >= order.length) return [...order]
-    const next = [...order]
+    if (target < 0 || target >= ladder.length) return [...ladder]
+    const next = [...ladder]
     ;[next[index], next[target]] = [next[target], next[index]]
     return next
   }
+  // `claude / opus`, `codex`, `claude/work / sonnet`: the login first, then the
+  // model, and a model is never invented for an agent that published none.
+  function rungLabel(r) {
+    if (!r || !r.agent) return 'none'
+    const login = r.account && r.account !== 'default' ? `${r.agent}/${r.account}` : r.agent
+    return r.model ? `${login} / ${r.model}` : login
+  }
+  const rungKey = (r) => `${r.agent}--${r.account || 'default'}--${r.model || ''}`
+  // What a rung spends, in words. `plan` is the subscription already paid for,
+  // which is why it is the only cost that reads as nothing extra.
+  const COST_WORDS = { free: 'free', plan: 'on the plan', credits: 'spends usage credits', metered: 'spends metered credits' }
+  function costWord(cost) { return COST_WORDS[cost] || COST_WORDS.plan }
+
+  // B.6, one option in the Hand off picker. Three fields, always in this order:
+  // the rung, what taking it does to the conversation, and what it costs you
+  // right now. A rung that cannot be taken carries the SERVER'S reason
+  // verbatim, never a board paraphrase: that sentence is the one the chooser
+  // itself would print in the ledger, and two wordings for one refusal is how a
+  // greyed row starts lying. The separator is a middot because a browser
+  // collapses runs of spaces inside an <option>.
+  function handoffOptionText(t) {
+    const mode = t.keeps_conversation ? 'same terminal, keeps the conversation' : 'new agent, from the bundle'
+    let state
+    if (!t.available) state = `${t.reason || 'not available right now'}${Number.isFinite(t.resets_at) ? ` until ${until(t.resets_at)}` : ''}`
+    else if (t.reason) state = t.reason
+    else state = ['credits', 'metered'].includes(t.cost) ? `ready, ${costWord(t.cost)}` : 'ready'
+    return [rungLabel(t), mode, state].join(' · ')
+  }
+  // A destination is a rung, so it is remembered as one. The index is still the
+  // option's value (an account name is not ours to parse), but an index is a
+  // position in a list the poll rewrites, and the pick has to outlive that.
+  function pickKey(t) { return t && t.agent ? `${t.agent}/${t.account || 'default'}/${t.model || ''}` : null }
+  function pickIndex(targets, key) {
+    if (!key) return ''
+    const at = (targets || []).findIndex((t) => pickKey(t) === key)
+    return at < 0 ? '' : String(at)
+  }
+  // `when` is one string on the record and two controls on screen.
+  function whenKind(when) { return String(when || 'always').startsWith('below:') ? 'below' : (when === 'walled-only' ? 'walled-only' : 'always') }
+  // The server's own range is 0 to 100 (WHEN_RE in src/preferences.mjs), and
+  // what is stored is what is shown: a zero is a reading, so a rung saved as
+  // `below:0` renders as 0 and carries its consequence (whenFlag) rather than
+  // being redrawn as a 50 nobody chose. Only a `below:` with no number at all
+  // falls back.
+  function whenPct(when) {
+    const n = Number(String(when || '').slice('below:'.length))
+    return Number.isFinite(n) && n >= 0 && n <= 100 && String(when || '').slice('below:'.length).trim() !== '' ? n : 50
+  }
+  function whenString(kind, pct) {
+    if (kind === 'walled-only') return 'walled-only'
+    if (kind !== 'below') return 'always'
+    const n = Math.max(0, Math.min(100, Math.round(Number(pct) || 0)))
+    return `below:${n}`
+  }
+  // An empty box is not a percentage. Clearing the number to type a new one and
+  // tabbing away used to store `below:1`, a rung that is never taken; the rung
+  // goes back to `always`, which is the rule with no number in it.
+  function whenFromBox(value) {
+    const raw = String(value === null || value === undefined ? '' : value).trim()
+    return raw === '' ? 'always' : whenString('below', raw)
+  }
+  // A stored number the editor would never produce is shown with what it does,
+  // never rewritten: both ends of the server's range are legal and neither is
+  // a percentage anybody means.
+  function whenFlag(when) {
+    if (whenKind(when) !== 'below') return null
+    const n = whenPct(when)
+    if (n === 0) return 'below 0% is never true: this rung is never taken'
+    if (n === 100) return 'below 100% is always true: this rung is taken like always'
+    return null
+  }
+  const WHEN_WORDS = [['always', 'always'], ['below', 'below N%'], ['walled-only', 'walled only']]
 
-  function orderRows(order, onMove, scope) {
+  // The editor. Numbered rows, one select and one optional number per rung, and
+  // three buttons that survive a rebuild by data-focus-key the way the order
+  // editor's did. No drag: a list this short is faster with two buttons, and a
+  // drag has no keyboard.
+  function ladderRows(ladder, onChange, scope) {
     const box = el('div', {})
-    order.forEach((agent, index) => {
-      const attrs = (direction) => ({
-        'data-order-scope': scope,
-        'data-order-agent': agent,
-        'data-order-direction': direction,
-        'data-focus-key': `order:${scope}:${agent}:${direction}`,
-      })
-      const up = el('button', { type: 'button', class: 'btn btn-secondary', 'aria-label': `Move ${agent} earlier`, disabled: index === 0 ? '' : null, ...attrs('up') }, ['Up'])
-      const down = el('button', { type: 'button', class: 'btn btn-secondary', 'aria-label': `Move ${agent} later`, disabled: index === order.length - 1 ? '' : null, ...attrs('down') }, ['Down'])
-      up.addEventListener('click', () => onMove(index, -1))
-      down.addEventListener('click', () => onMove(index, 1))
-      box.appendChild(el('div', { class: 'order-row' }, [el('span', { class: `order-row-name chip-id-${idOf(agent)}` }, [`${index + 1}. ${agent}`]), up, down]))
+    ladder.forEach((r, index) => {
+      const key = rungKey(r)
+      const label = rungLabel(r)
+      const row = el('div', { class: 'ladder-row' })
+      row.appendChild(el('span', { class: 'ladder-num' }, [`${index + 1}.`]))
+      row.appendChild(el('span', { class: `dot id-${idOf(r.agent)}`, 'aria-hidden': 'true' }))
+      row.appendChild(el('span', { class: `ladder-name chip-id-${idOf(r.agent)}` }, [label]))
+
+      const kind = whenKind(r.when)
+      const whenId = `ladder-when-${scope}-${key}`
+      const when = el('select', { id: whenId, class: 'ladder-when', 'aria-label': `When to take ${label}`, 'data-focus-key': `ladder:${scope}:${key}:when` })
+      for (const [value, text] of WHEN_WORDS) {
+        const opt = el('option', { value }, [text])
+        if (value === kind) opt.setAttribute('selected', 'selected')
+        when.appendChild(opt)
+      }
+      when.value = kind
+      when.addEventListener('change', () => onChange(ladder.map((x, i) => (i === index ? { ...x, when: whenString(when.value, whenPct(r.when)) } : x))))
+      // one cell for the rule and its number, so the selects line up in a
+      // column whether or not a rung carries a percentage
+      const rule = el('span', { class: 'ladder-rule' }, [when])
+      row.appendChild(rule)
+      if (kind === 'below') {
+        const pct = el('input', {
+          type: 'number', min: '0', max: '100', class: 'ladder-pct', value: String(whenPct(r.when)),
+          'aria-label': `Take ${label} only under this percent`, 'data-focus-key': `ladder:${scope}:${key}:pct`,
+        })
+        pct.addEventListener('change', () => onChange(ladder.map((x, i) => (i === index ? { ...x, when: whenFromBox(pct.value) } : x))))
+        rule.appendChild(pct)
+        rule.appendChild(el('span', { class: 'ladder-cost' }, ['%']))
+        const flag = whenFlag(r.when)
+        if (flag) rule.appendChild(el('span', { class: 'ladder-flag tone-warn' }, [flag]))
+      }
+      row.appendChild(el('span', { class: 'ladder-cost ladder-costcol' }, [costWord(r.cost)]))
+
+      const up = el('button', { type: 'button', class: 'btn btn-secondary', 'aria-label': `Move ${label} earlier`, disabled: index === 0 ? '' : null, 'data-focus-key': `ladder:${scope}:${key}:up` }, ['Up'])
+      const down = el('button', { type: 'button', class: 'btn btn-secondary', 'aria-label': `Move ${label} later`, disabled: index === ladder.length - 1 ? '' : null, 'data-focus-key': `ladder:${scope}:${key}:down` }, ['Down'])
+      const drop = el('button', { type: 'button', class: 'btn btn-secondary', 'aria-label': `Remove ${label} from the ladder`, disabled: ladder.length < 2 ? '' : null, 'data-focus-key': `ladder:${scope}:${key}:remove` }, ['Remove'])
+      up.addEventListener('click', () => onChange(moveRung(ladder, index, -1)))
+      down.addEventListener('click', () => onChange(moveRung(ladder, index, 1)))
+      drop.addEventListener('click', () => onChange(ladder.filter((_, i) => i !== index)))
+      row.append(up, down, drop)
+      box.appendChild(row)
     })
     return box
   }
 
+  // `[+ Add a rung]`: an agent and one of its models, or `default` for the
+  // model the CLI picks itself. An agent Leg knows no model names for offers
+  // `default` alone rather than a guess.
+  // A dead control is worse than none: pressing Add on a rung the ladder
+  // already carries used to do nothing at all, with no row, no sentence and no
+  // hover reason, so the reader pressed it again. It names the rung it found
+  // and where it already is.
+  function duplicateRung(ladder, rung) {
+    const at = (ladder || []).findIndex((r) => rungKey(r) === rungKey(rung))
+    return at < 0 ? null : `${rungLabel(rung)} is already rung ${at + 1}.`
+  }
+  function addRungRow(ladder, onChange, scope, onRefuse) {
+    const row = el('div', { class: 'ladder-add' })
+    const agentId = `ladder-add-agent-${scope}`
+    const modelId = `ladder-add-model-${scope}`
+    const agent = el('select', { id: agentId, class: 'ladder-when', 'aria-label': 'Agent for the new rung', 'data-focus-key': `ladder:${scope}:add:agent` })
+    for (const a of LADDER_AGENTS) agent.appendChild(el('option', { value: a }, [a]))
+    agent.value = LADDER_AGENTS[0]
+    const model = el('select', { id: modelId, class: 'ladder-when', 'aria-label': 'Model for the new rung', 'data-focus-key': `ladder:${scope}:add:model` })
+    const fillModels = () => {
+      model.textContent = ''
+      model.appendChild(el('option', { value: '' }, ['default']))
+      for (const m of MODEL_ALIASES[agent.value] || []) model.appendChild(el('option', { value: m }, [m]))
+      model.value = ''
+    }
+    fillModels()
+    agent.addEventListener('change', fillModels)
+    const add = el('button', { type: 'button', class: 'btn btn-secondary', 'data-focus-key': `ladder:${scope}:add:go` }, ['+ Add a rung'])
+    add.addEventListener('click', () => {
+      const rung = { agent: agent.value, account: 'default', model: model.value || null, when: 'always', cost: agent.value === 'agy' ? 'free' : agent.value === 'grok' ? 'metered' : 'plan' }
+      const already = duplicateRung(ladder, rung)
+      if (already) { if (onRefuse) onRefuse(already); return }
+      onChange([...ladder, rung])
+    })
+    row.append(el('label', { for: agentId }, ['Add']), agent, el('label', { for: modelId }, ['model']), model, add)
+    return row
+  }
+
   // Every region on this page is wiped and rebuilt on a timer, so a control the
   // reader had tabbed to is a different element three seconds later and focus
   // lands back on <body>. Controls that survive a rebuild by identity carry a
@@ -592,8 +1332,52 @@
 
   // Absolute priority, not a rotation: the saved list decides, minus the agent
   // already running here, so an agent placed last stays last.
-  function agentsAfter(current, order) {
-    return order.filter((agent) => agent !== current)
+  // The rungs below the one a terminal is on: what it would try next, in order.
+  function rungsAfter(current, ladder) {
+    return ladder.filter((r) => !(r.agent === current.agent && (r.account || 'default') === (current.account || 'default') && (r.model || null) === (current.model || null)))
+  }
+
+  // B.6 `Back to fable`. Two conditions, both of which must be KNOWN true from
+  // data this page already has: the row is running a model below the top rung
+  // of its own login's ladder, and that top rung is open. "Open" means no
+  // active wall on the model, no wall on the login, and either no bucket for it
+  // at all or a bucket under 100. A login this board has no record for is not
+  // "open", it is unknown, and an unknown destination gets no button: the whole
+  // point of the control is that it will work when pressed.
+  function topRungFor(s) {
+    const ladder = Array.isArray(s && s.handoff_ladder) ? s.handoff_ladder : []
+    return ladder.find((r) => r.agent === s.agent && (r.account || 'default') === (s.account || 'default')) || null
+  }
+  function climbTarget(s, accounts) {
+    if (!s || !s.active || !s.model || s.hidden) return null
+    const top = topRungFor(s)
+    if (!top || !top.model || top.model === s.model) return null
+    const names = MODEL_ALIASES[s.agent] || []
+    const best = names.indexOf(top.model)
+    const here = names.indexOf(s.model)
+    if (best < 0 || here < 0 || here <= best) return null
+    const acct = (accounts || []).find((x) => x.agent === s.agent && (x.account || 'default') === (s.account || 'default'))
+    if (!acct || acctState(acct) === 'walled' || wallFor(acct, top.model)) return null
+    const b = modelBucket(acct, top.model)
+    if (b && b.percent >= 100) return null
+    return top
+  }
+
+  // B.5: the one sentence beside the checkbox, and the one that replaces it on
+  // a login whose credits are off, where there is nothing to spend and so no
+  // decision to offer. A dead control is worse than none.
+  const MAY_SPEND_SENTENCE = 'A rung that spends usage credits or metered balance may be taken by an automatic hand-off.'
+  const NO_CREDITS_SENTENCE = 'Usage credits are off, so there is nothing to spend through the wall.'
+  // B.7, printed under the choice because it is not one: killing a working
+  // agent to save budget loses the turn.
+  const CLIMB_RULE = 'Leg never interrupts a running turn to climb.'
+  const CLIMB_WORDS = {
+    'next-handoff': 'Leg climbs back to the top rung at the next hand-off.',
+    never: 'Stay on the lower rung until you press Back to fable.',
+  }
+  function creditsOff(v) {
+    const a = ((v && v.accounts) || []).find((x) => x.agent === 'claude' && (x.account || 'default') === 'default')
+    return Boolean(a && a.extra_usage && a.extra_usage.enabled === false)
   }
 
   function renderDefaultOrder(v) {
@@ -601,19 +1385,93 @@
     if (!field) return
     field.hidden = !v.preferences
     if (!v.preferences) return
-    if (!defaultEditor.order || (!defaultEditor.dirty && !defaultEditor.saving)) defaultEditor.order = [...v.preferences.handoff_order]
-    const list = document.getElementById('default-order-list')
-    const focus = takeFocus(document)
-    list.textContent = ''
-    list.appendChild(orderRows(defaultEditor.order, (index, delta) => {
-      defaultEditor.order = moveOrder(defaultEditor.order, index, delta)
+    const fresh = !defaultEditor.ladder || (!defaultEditor.dirty && !defaultEditor.saving)
+    if (fresh) {
+      defaultEditor.ladder = (v.preferences.handoff_ladder || []).map((r) => ({ ...r }))
+      defaultEditor.climb_back = v.preferences.climb_back || 'next-handoff'
+      defaultEditor.may_spend = Boolean(v.preferences.may_spend)
+      defaultEditor.reserve = { ...(v.preferences.reserve || {}) }
+    }
+    const touch = (next) => {
+      if (next) defaultEditor.ladder = next
       defaultEditor.dirty = true
       defaultEditor.status = ''
       renderDefaultOrder(view)
-    }, 'default'))
+    }
+    const focus = takeFocus(document)
+
+    const list = document.getElementById('default-order-list')
+    list.textContent = ''
+    list.appendChild(ladderRows(defaultEditor.ladder, touch, 'default'))
+    list.appendChild(addRungRow(defaultEditor.ladder, touch, 'default', (msg) => {
+      defaultEditor.status = msg
+      defaultEditor.statusClass = 'bad'
+      renderDefaultOrder(view)
+    }))
+
+    // may_spend
+    const spend = document.getElementById('ladder-spend')
+    if (spend) {
+      spend.textContent = ''
+      const box = el('input', { type: 'checkbox', id: 'ladder-may-spend', 'aria-label': 'Let an automatic hand-off spend', 'data-focus-key': 'ladder:default:may-spend' })
+      if (defaultEditor.may_spend) box.setAttribute('checked', 'checked')
+      box.checked = defaultEditor.may_spend
+      box.addEventListener('change', () => { defaultEditor.may_spend = Boolean(box.checked); touch(null) })
+      spend.appendChild(el('label', { class: 'notify-toggle', for: 'ladder-may-spend' }, [box, ' Let an automatic hand-off spend']))
+      spend.appendChild(el('p', { class: 'field-help' }, [MAY_SPEND_SENTENCE]))
+      // B.5: with credits off and `can_toggle` false there is nothing to turn
+      // on from here, so this states the fact and offers no button. A control
+      // that cannot do anything is worse than none.
+      if (creditsOff(v)) spend.appendChild(el('p', { class: 'field-help' }, [NO_CREDITS_SENTENCE]))
+    }
+
+    // climb back
+    const climb = document.getElementById('ladder-climb')
+    if (climb) {
+      climb.textContent = ''
+      climb.appendChild(el('legend', {}, ['Climbing back']))
+      for (const [value, sentence] of Object.entries(CLIMB_WORDS)) {
+        const id = `ladder-climb-${value}`
+        const radio = el('input', { type: 'radio', name: 'ladder-climb-back', id, value, 'aria-label': sentence, 'data-focus-key': `ladder:default:climb:${value}` })
+        if (defaultEditor.climb_back === value) radio.setAttribute('checked', 'checked')
+        radio.checked = defaultEditor.climb_back === value
+        radio.addEventListener('change', () => { defaultEditor.climb_back = value; touch(null) })
+        climb.appendChild(el('label', { class: 'notify-toggle', for: id }, [radio, ` ${sentence}`]))
+      }
+      climb.appendChild(el('p', { class: 'field-help' }, [CLIMB_RULE]))
+    }
+
+    // reserve, one number per login
+    const reserve = document.getElementById('ladder-reserve')
+    if (reserve) {
+      reserve.textContent = ''
+      const logins = []
+      for (const r of defaultEditor.ladder) if (!logins.includes(r.agent)) logins.push(r.agent)
+      for (const agent of logins) {
+        const id = `ladder-reserve-${agent}`
+        const n = el('input', {
+          type: 'number', min: '0', max: '100', class: 'ladder-pct', id,
+          value: Number.isFinite(Number(defaultEditor.reserve[agent])) ? String(defaultEditor.reserve[agent]) : '0',
+          'aria-label': `Keep this percent of ${agent} for your own terminals`,
+          'data-focus-key': `ladder:default:reserve:${agent}`,
+        })
+        n.addEventListener('change', () => {
+          const pct = Math.max(0, Math.min(100, Math.round(Number(n.value) || 0)))
+          if (pct > 0) defaultEditor.reserve[agent] = pct
+          else delete defaultEditor.reserve[agent]
+          touch(null)
+        })
+        reserve.appendChild(el('div', { class: 'ladder-row' }, [
+          el('label', { for: id }, [`Keep`]), n,
+          el('span', { class: 'ladder-cost' }, [`% of ${agent} for your own terminals`]),
+        ]))
+      }
+      reserve.appendChild(el('p', { class: 'field-help' }, ['0 keeps nothing back. An automatic hand-off skips a rung past the floor; a hand-off you press yourself still takes it, and the picker says so.']))
+    }
+
     const save = document.getElementById('default-order-save')
     save.disabled = defaultEditor.saving || !defaultEditor.dirty
-    save.textContent = defaultEditor.saving ? 'Saving…' : 'Save default'
+    save.textContent = defaultEditor.saving ? 'Saving…' : 'Save ladder'
     const status = document.getElementById('default-order-status')
     status.textContent = defaultEditor.status
     status.className = `field-status ${defaultEditor.statusClass}`
@@ -625,13 +1483,22 @@
     defaultEditor.status = ''
     renderDefaultOrder(view)
     try {
-      const data = await api('/api/settings', { method: 'PATCH', body: { handoff_order: defaultEditor.order } })
+      const data = await api('/api/settings', {
+        method: 'PATCH',
+        body: {
+          handoff_ladder: defaultEditor.ladder,
+          climb_back: defaultEditor.climb_back,
+          may_spend: defaultEditor.may_spend,
+          reserve: defaultEditor.reserve,
+        },
+      })
       if (view) view.preferences = data.preferences
-      defaultEditor.order = [...data.preferences.handoff_order]
+      defaultEditor.ladder = (data.preferences.handoff_ladder || []).map((r) => ({ ...r }))
       defaultEditor.dirty = false
-      defaultEditor.status = 'Saved for new terminals.'
+      defaultEditor.status = `Saved for new terminals. Order off the ladder: ${(data.preferences.handoff_order || []).join(', ')}.`
       defaultEditor.statusClass = 'ok'
     } catch (err) {
+      // the server's own sentence, verbatim: it is the one that names the rung
       defaultEditor.status = err.message
       defaultEditor.statusClass = 'bad'
     } finally {
@@ -661,8 +1528,9 @@
         sysMessage('removed the Leg record; the worktree and the branch are kept', 'ok')
       } else {
         await api(`/api/sessions/${encodeURIComponent(id)}/${action}`, { method: 'POST', body })
-        if (action === 'handoff') actionNotes.set(id, { at: Date.now(), tone: 'warn', text: 'hand-off requested; this terminal switches agents in a few seconds' })
+        if (action === 'handoff') actionNotes.set(id, { at: Date.now(), tone: 'warn', text: body && body.agent ? `hand-off to ${rungLabel(body)} requested; this terminal switches agents in a few seconds` : 'hand-off requested; this terminal switches agents in a few seconds' })
         else if (action === 'end') actionNotes.set(id, { at: Date.now(), tone: 'warn', text: 'end requested; the agent stops after its current turn' })
+        else if (action === 'end-as-card') actionNotes.set(id, { at: Date.now(), tone: 'ok', text: 'ended; a background card continues the task: in this checkout when the terminal had one of its own, else in a checkout of its own with the uncommitted work carried over. It is under Background, and Take over on it brings the work back to a terminal.' })
         else if (action === 'land/fix') actionNotes.set(id, { at: Date.now(), tone: 'ok', text: 'applied fix' })
       }
       refresh()
@@ -680,54 +1548,111 @@
     // `now: codex · then · claude`, a five-item list with two items called
     // "then". The agent names keep their identity colour inside it.
     const sequence = el('div', { class: 'chain-rail', 'aria-label': 'Terminal handoff sequence' })
-    const chain = el('span', { class: 'chip' }, ['now: ', el('span', { class: `chip-id-${idOf(s.agent)}` }, [optionLabel(s)])])
+    const chain = el('span', { class: 'chip' }, ['now: ', el('span', { class: `chip-id-${idOf(s.agent)}` }, [rungLabel(s)])])
     // the fonts carry no arrow glyph, so the word does the arrow's job
-    for (const next of s.chain || []) chain.append(document.createTextNode(', then '), el('span', { class: `chip-id-${idOf(next.agent)}` }, [optionLabel(next)]))
+    for (const next of s.chain || []) chain.append(document.createTextNode(', then '), el('span', { class: `chip-id-${idOf(next.agent)}` }, [rungLabel(next)]))
     sequence.appendChild(chain)
     wrap.appendChild(sequence)
-    const preferred = optionLabel(s.preferred_next)
-    const eligible = optionLabel(s.eligible_next)
+    // the rung, not just the login: `claude / opus` and `claude / sonnet` are
+    // two destinations and the sequence above already names both
+    const preferred = s.preferred_next ? rungLabel(s.preferred_next) : 'none'
+    const eligible = s.eligible_next ? rungLabel(s.eligible_next) : 'none'
     if (!s.handoff_availability_known) wrap.appendChild(el('p', { class: 'sentence tone-muted' }, [`preferred: ${preferred}, and current eligibility is unavailable for this older terminal`]))
     else if (!s.eligible_next) wrap.appendChild(el('p', { class: 'sentence tone-warn' }, [`preferred: ${preferred}. No fallback is eligible now; Leg waits if every account is at its limit.`]))
     else if (eligible !== preferred) wrap.appendChild(el('p', { class: 'sentence tone-muted' }, [`preferred: ${preferred}, first eligible now: ${eligible}`]))
     else wrap.appendChild(el('p', { class: 'sentence tone-muted' }, [`first eligible now: ${eligible}`]))
     wrap.appendChild(el('p', { class: 'blocker' }, ['Used after a usage limit or Hand off now. A normal exit ends this terminal.']))
 
+    // The picker. The Hand off now button on the panel stays the one-click
+    // path (it takes the order); this names a destination instead. An option
+    // that cannot be picked carries the reason in its own label, so nothing is
+    // greyed out without saying why.
+    const targets = Array.isArray(s.handoff_targets) ? s.handoff_targets : []
+    if (s.active && targets.length) {
+      const pick = el('div', { class: 'form-row' })
+      const selectId = `handoff-to-${s.session_id}`
+      pick.appendChild(el('label', { for: selectId }, ['Hand off now to']))
+      const select = el('select', { id: selectId, 'aria-label': 'Hand off now to' })
+      select.appendChild(el('option', { value: '' }, ['the next option in the order']))
+      targets.forEach((t, i) => {
+        // the index is the value: an account name is not ours to parse
+        select.appendChild(el('option', { value: String(i), disabled: t.available ? null : 'disabled' }, [handoffOptionText(t)]))
+      })
+      // The drawer rebuilds itself every 3 seconds, and a destination chosen
+      // four seconds ago was silently back to "the next option in the order"
+      // while the confirm row still said the rung's name. The pick is held on
+      // `drawer`, beside turnCap and expanded, and it is keyed by the RUNG, not
+      // by the index: the poll can reorder the rows under it.
+      select.value = pickIndex(targets, drawer.pick)
+      if (drawer.pick && select.value === '') drawer.pick = null
+      select.addEventListener('change', () => {
+        const at = select.value === '' ? null : targets[Number(select.value)]
+        drawer.pick = at ? pickKey(at) : null
+      })
+      const go = el('button', { type: 'button', class: 'btn btn-secondary' }, ['Hand off'])
+      go.addEventListener('click', () => {
+        const t = select.value === '' ? null : targets[Number(select.value)]
+        // the confirm row names the destination and says whether the
+        // conversation survives, because those are the two things that differ
+        // between one rung and the next and neither is guessable from the row
+        pendingConfirm = {
+          id: s.session_id,
+          question: t
+            ? `Hands off to ${rungLabel(t)}. ${t.keeps_conversation ? 'Same terminal, and the conversation is kept.' : 'A new agent starts in this terminal, primed from the bundle.'}`
+            : 'Hands off to the first open rung of this terminal\'s ladder. The current turn stops.',
+          verb: 'Hand off',
+          action: 'handoff',
+          body: t ? { agent: t.agent, account: t.account, ...(t.model ? { model: t.model } : {}) } : null,
+        }
+        renderSessions(view)
+      })
+      pick.appendChild(el('div', { class: 'chain-rail' }, [select, go]))
+      if (!targets.some((t) => t.available)) {
+        pick.appendChild(el('p', { class: 'field-help' }, ['Every destination is at its limit or not installed; a hand-off now waits for the first reset.']))
+      }
+      wrap.appendChild(pick)
+    }
+
     const editableNow = ['starting', 'running', 'warning', 'limit', 'waiting'].includes(s.status)
     if (!s.hidden && editableNow) {
       let state = sessionEditors.get(s.session_id)
-      const sourceOrder = s.can_edit_handoff_order ? s.handoff_order : (view?.preferences?.handoff_order ?? s.handoff_order)
+      // this terminal's own ladder, else the machine default it would take on
+      // its next launch. A terminal that cannot be edited in place still shows
+      // the list it is about to inherit, so the save below means something.
+      const source = (s.can_edit_handoff_order ? s.handoff_ladder : (view?.preferences?.handoff_ladder ?? s.handoff_ladder)) || []
+      const copy = () => source.map((r) => ({ ...r }))
       if (!state) {
-        state = { open: false, order: [...sourceOrder], dirty: false, saving: false, status: '', statusClass: '' }
+        state = { open: false, ladder: copy(), dirty: false, saving: false, status: '', statusClass: '' }
         sessionEditors.set(s.session_id, state)
-      } else if (!state.dirty && !state.saving) state.order = [...sourceOrder]
-      const change = el('button', { type: 'button', class: 'btn btn-secondary', 'aria-expanded': state.open ? 'true' : 'false', 'data-focus-key': `order-toggle:${s.session_id}` }, [state.open ? 'Close order editor' : 'Change order'])
+      } else if (!state.dirty && !state.saving) state.ladder = copy()
+      const change = el('button', { type: 'button', class: 'btn btn-secondary', 'aria-expanded': state.open ? 'true' : 'false', 'data-focus-key': `order-toggle:${s.session_id}` }, [state.open ? 'Close ladder editor' : 'Change the ladder'])
       change.addEventListener('click', () => { state.open = !state.open; renderDrawer() })
       wrap.appendChild(change)
       if (state.open) {
         const editor = el('div', { class: 'detail-section' })
         editor.appendChild(el('p', { class: 'blocker' }, [s.can_edit_handoff_order
-          ? 'Move agents to set the priority for this terminal. All three stay available; the agent running now is skipped, and the rest keep this order.'
-          : 'This terminal started before order changes were available. Save this order for the next terminal, then restart when ready.']))
-        editor.appendChild(orderRows(state.order, (index, delta) => {
-          state.order = moveOrder(state.order, index, delta)
-          state.dirty = true
-          state.status = ''
+          ? 'Each rung is an agent, a login and a model. Leg walks down from the top and takes the first rung that is open; the rung this terminal is already on is skipped.'
+          : 'This terminal started before ladder changes were available. Save this ladder as the default, then restart when ready.']))
+        const touch = (next) => { state.ladder = next; state.dirty = true; state.status = ''; renderDrawer() }
+        editor.appendChild(ladderRows(state.ladder, touch, s.session_id))
+        editor.appendChild(addRungRow(state.ladder, touch, s.session_id, (msg) => {
+          state.status = msg
+          state.statusClass = 'bad'
           renderDrawer()
-        }, s.session_id))
-        editor.appendChild(el('p', { class: 'blocker' }, [`Draft priority after ${s.agent}: ${agentsAfter(s.agent, state.order).join(', then ')}`]))
+        }))
+        editor.appendChild(el('p', { class: 'blocker' }, [`Draft ladder after ${rungLabel(s)}: ${rungsAfter(s, state.ladder).map(rungLabel).join(', then ') || 'nothing left'}`]))
         const status = el('span', { class: `field-status ${state.statusClass}`, 'aria-live': 'polite' }, [state.status])
         const save = el('button', { type: 'button', class: 'btn btn-secondary', disabled: state.saving || !state.dirty ? '' : null, 'data-focus-key': `order-save:${s.session_id}` }, [state.saving ? 'Saving…' : s.can_edit_handoff_order ? 'Save for this terminal' : 'Save as default for next launch'])
         save.addEventListener('click', async () => {
           state.saving = true; state.status = ''; renderDrawer()
           try {
             if (s.can_edit_handoff_order) {
-              await api(`/api/sessions/${encodeURIComponent(s.session_id)}/handoff-order`, { method: 'POST', body: { handoff_order: state.order } })
+              await api(`/api/sessions/${encodeURIComponent(s.session_id)}/handoff-order`, { method: 'POST', body: { handoff_ladder: state.ladder } })
               state.status = 'Saved for this terminal.'
             } else {
-              const data = await api('/api/settings', { method: 'PATCH', body: { handoff_order: state.order } })
+              const data = await api('/api/settings', { method: 'PATCH', body: { handoff_ladder: state.ladder } })
               if (view) view.preferences = data.preferences
-              defaultEditor.order = [...data.preferences.handoff_order]
+              defaultEditor.ladder = (data.preferences.handoff_ladder || []).map((r) => ({ ...r }))
               defaultEditor.dirty = false
               state.status = 'Saved as the default. Restart this terminal when ready.'
             }
@@ -735,6 +1660,7 @@
             state.statusClass = 'ok'
             await refresh()
           } catch (err) {
+            // the 409 or the 400 in the server's own words
             state.status = err.message
             state.statusClass = 'bad'
           } finally {
@@ -771,6 +1697,13 @@
       statusMark(s.status, s.session_id, urgent ? 'waiting on you' : null),
       el('span', { class: 'term-where', title: s.cwd || null }, [`${s.repo_name || s.cwd || 'unknown repo'}${branch ? ` on ${branch}` : ''}`]),
     ])
+    // A.4 rows 7 to 9, in reading order and on the SAME line: what changed,
+    // which model actually answered, and whether it has gone quiet. The model
+    // token is the agent and the model it resolved to, never a default.
+    for (const t of registerTokens(s)) {
+      if (t.kind === 'model') register.appendChild(el('span', { class: `term-model chip-id-${idOf(s.agent)}` }, [t.text]))
+      else register.appendChild(el('span', { class: `term-${t.kind}` }, [t.text]))
+    }
     if (s.account !== 'default') register.appendChild(el('span', { class: 'chip' }, [s.account]))
     if (shared() && s.owner) register.appendChild(el('span', { class: 'chip' }, [isMine(s) ? `${s.owner}, you` : s.owner]))
     if (s.lineage && s.lineage.from) register.appendChild(el('span', { class: 'chip' }, [`from ${s.lineage.from}`]))
@@ -811,6 +1744,7 @@
       if (open) for (const n of rest) body.appendChild(el('p', { class: `sentence tone-${n.tone}` }, [n.text]))
     }
     const touched = s.files || []
+    let files = null
     if (!s.hidden && touched.length) {
       // comma-separated text, not chips: six file names are a sentence, and a
       // file that is also in an overlap is named in that sentence anyway
@@ -821,7 +1755,37 @@
         line.appendChild(el('span', { class: `file${overlapFiles.has(f) ? ' is-overlap' : ''}`, title: f }, [fileLabel(f)]))
       })
       if (touched.length > 6) line.appendChild(document.createTextNode(`, and ${touched.length - 6} more`))
-      body.appendChild(line)
+      files = line
+    }
+    // A.4 row 12, at the right of the files line: the bucket that will stop
+    // THIS terminal, which is per model and so is a fact about the row. The
+    // region head carries the share clause that stops anyone adding three
+    // rows' figures together (A.7).
+    const phrase = s.hidden ? null : capacityPhrase(s)
+    // B.6: the climb is a link on the capacity line, not a fifth button in the
+    // 2x2 grid. It belongs beside the figure that explains why the row was
+    // dropped a rung in the first place, and the grid is the shipped shape.
+    const top = climbTarget(s, view && view.accounts)
+    let climb = null
+    if (top) {
+      const back = (s.handoff_targets || []).find((t) => t.agent === top.agent && t.account === top.account && t.model === top.model)
+      climb = el('button', { type: 'button', class: 'btn btn-text term-climb', 'data-focus-key': `climb:${s.session_id}` }, [`Back to ${top.model}`])
+      climb.addEventListener('click', () => {
+        pendingConfirm = {
+          id: s.session_id,
+          question: `Hands off now. The current turn stops and ${top.model} continues from ${back && back.keeps_conversation ? 'the conversation' : 'the bundle'}.`,
+          verb: `Back to ${top.model}`,
+          action: 'handoff',
+          body: { agent: top.agent, account: top.account, model: top.model },
+        }
+        renderSessions(view)
+      })
+    }
+    if (files || phrase || climb) {
+      body.appendChild(el('div', { class: 'term-meta' }, [
+        files,
+        phrase || climb ? el('span', { class: 'term-capacity' }, [phrase, climb]) : null,
+      ]))
     }
     row.appendChild(body)
 
@@ -843,11 +1807,20 @@
       // TypeError going only to the console.
       const pending = pendingConfirm
       term.appendChild(row)
-      term.appendChild(confirmRow(pending.question, pending.verb, (btn) => act(s.session_id, pending.action, btn)))
+      const confirm = confirmRow(pending.question, pending.verb, (btn) => act(s.session_id, pending.action, btn, pending.body ?? null))
+      // a second verb on the same row, never a fifth grid button: End grows
+      // 'End, and keep going as a card' (spec C.4), the moment being 'I have
+      // to leave, keep going'. It sits before Cancel and takes the snapshot too.
+      if (pending.alt) {
+        const more = el('button', { type: 'button', class: 'btn btn-secondary', title: pending.alt.title || null }, [pending.alt.verb])
+        more.addEventListener('click', () => { pendingConfirm = null; act(s.session_id, pending.alt.action, more, null) })
+        confirm.insertBefore(more, confirm.lastChild)
+      }
+      term.appendChild(confirm)
       return term
     }
     const actions = el('div', { class: 'term-actions' })
-    const ask = (question, verb, action) => () => { pendingConfirm = { id: s.session_id, question, verb, action }; renderSessions(view) }
+    const ask = (question, verb, action, alt = null) => () => { pendingConfirm = { id: s.session_id, question, verb, action, alt }; renderSessions(view) }
     if (s.hidden) {
       if (s.active) {
         const q = el('button', { type: 'button', class: 'btn btn-secondary', title: `ask ${s.owner || 'the owner'} to hand this terminal off; they approve it on their own board` }, ['Request handoff'])
@@ -920,7 +1893,10 @@
     }
     if (s.active) {
       const h = el('button', { type: 'button', class: `btn ${blocker ? 'btn-primary' : 'btn-secondary'}`, title: 'save the bundle, stop this agent, start the next option in the same terminal', 'data-focus-key': `handoff:${s.session_id}` }, ['Hand off now'])
-      h.addEventListener('click', () => act(s.session_id, 'handoff', h))
+      // the same confirm row End and the picker already use. This stops the
+      // current turn of a working agent, and the `h` key presses this button:
+      // an action that costs a turn asks first, whichever hand pressed it.
+      h.addEventListener('click', ask('Hands off to the first open rung of this terminal\'s ladder. The current turn stops.', 'Hand off', 'handoff'))
       actions.appendChild(h)
     }
     const details = el('button', { type: 'button', class: 'btn btn-secondary', 'aria-expanded': drawer.id === s.session_id ? 'true' : 'false', 'data-focus-key': `details:${s.session_id}` }, ['Details'])
@@ -928,7 +1904,11 @@
     actions.appendChild(details)
     if (s.active) {
       const e = el('button', { type: 'button', class: 'btn btn-danger', 'data-focus-key': `end:${s.session_id}` }, ['End'])
-      e.addEventListener('click', ask('End this terminal? The agent stops and the bundle is kept.', 'End', 'end'))
+      // the second verb only where a card can continue: a terminal outside a
+      // git repository has no branch for a card to work on (the route says so
+      // with a 409, and a control that can only fail is not offered)
+      e.addEventListener('click', ask('End this terminal? The agent stops and the bundle is kept.', 'End', 'end',
+        s.repo && canCards() ? { verb: 'End, and keep going as a card', action: 'end-as-card', title: 'write the bundle, hand this checkout to a background card that continues the task, and end this terminal' } : null))
       actions.appendChild(e)
     } else {
       const r = el('button', { type: 'button', class: 'btn btn-danger', 'data-focus-key': `remove:${s.session_id}` }, ['Remove'])
@@ -985,9 +1965,15 @@
   // The messages, the diffs and the timeline are one extra fetch per open
   // terminal, so nothing here is requested until the region is open, and the
   // poll stops when it is paused or the tab is in the background.
-  const drawer = { id: null, paused: false, timer: null, detail: null, error: '', expanded: new Set(), diffs: new Map(), turnCap: 8, openedBy: 'prompt' }
+  const drawer = { id: null, paused: false, timer: null, detail: null, error: '', expanded: new Set(), diffs: new Map(), turnCap: 8, openedBy: 'prompt', pick: null }
 
   function drawerSession() { return view && view.sessions ? view.sessions.find((s) => s.session_id === drawer.id) : null }
+  // the one control on this page whose value is a decision in flight
+  function pickHasFocus() {
+    const node = document.activeElement
+    const id = node && typeof node.id === 'string' ? node.id : ''
+    return id.startsWith('handoff-to-')
+  }
   // The region is MOVED under the panel it expands, so the reference is cached:
   // once it has been moved into the sessions list, getElementById would stop
   // finding it the moment that list is rebuilt.
@@ -1004,6 +1990,8 @@
     drawer.error = ''
     drawer.paused = false
     drawer.turnCap = 8
+    // a destination chosen on one terminal is not a destination on the next
+    drawer.pick = null
     drawer.expanded.clear()
     drawer.diffs.clear()
     const region = detailRegion()
@@ -1016,7 +2004,11 @@
     renderDrawer()
     loadDrawer()
     if (drawer.timer) clearInterval(drawer.timer)
-    drawer.timer = setInterval(() => { if (!drawer.paused && !document.hidden) loadDrawer() }, 3000)
+    // and it stands down while the reader is inside the destination select:
+    // rebuilding a <select> under an open option list closes it, so a list that
+    // takes longer than three seconds to read could not be read at all. The
+    // pick itself survives the rebuild by rung (pickIndex above).
+    drawer.timer = setInterval(() => { if (!drawer.paused && !document.hidden && !pickHasFocus()) loadDrawer() }, 3000)
     document.getElementById('session-drawer-close')?.focus()
   }
 
@@ -1356,7 +2348,22 @@
     const verdict = !list.length ? 'nothing is running'
       : waiting ? `${running} running, ${waiting} waiting on you`
         : `${running} running, nothing is waiting on you`
-    meta.textContent = `${verdict}${landed ? `, last landed ${clockAt(landed)}` : ''}`
+    meta.textContent = `${verdict}${shareClause(list)}${landed ? `, last landed ${clockAt(landed)}` : ''}`
+  }
+
+  // A.7: a fact true of every row is a property of the region and is said once,
+  // here. Per-row usage is per MODEL, which is real; the reader who adds three
+  // rows' figures together is stopped by this clause and by nothing else.
+  function shareClause(list) {
+    const groups = new Map()
+    for (const s of list.filter((x) => x.active)) {
+      const key = `${s.agent}/${s.account || 'default'}`
+      groups.set(key, (groups.get(key) || 0) + 1)
+    }
+    const [key, n] = [...groups.entries()].sort((x, y) => y[1] - x[1])[0] || []
+    if (!n || n < 2) return ''
+    const label = key.endsWith('/default') ? key.slice(0, -'/default'.length) : key
+    return `, ${n} share the ${label} login`
   }
 
   // A fact that is true of every terminal on the board is a property of the
@@ -1405,6 +2412,203 @@
     for (const p of document.querySelectorAll('#session-grid .blocker')) p.classList.toggle('is-hoisted', Boolean(shared))
   }
 
+  // ---- A.4 row 18 and E: where a waiting terminal says so off-screen ------
+  // The tab badge is always on and needs no permission: the title and the
+  // favicon are the only surface a browser gives a tab nobody is looking at.
+  // favicon.svg itself is never touched; the dot is a variant drawn inline.
+  const FAVICON = '/favicon.svg'
+  const FAVICON_DOT = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">\u{1F9BF}</text><circle cx="78" cy="22" r="20" fill="#E64343"/></svg>')}`
+  function titleBadge(n) {
+    const title = n > 0 ? `(${n}) Leg` : 'Leg'
+    if (document.title !== title) document.title = title
+    const link = document.querySelector('link[rel~="icon"]')
+    if (!link) return
+    const href = n > 0 ? FAVICON_DOT : FAVICON
+    if (link.getAttribute('href') !== href) link.setAttribute('href', href)
+  }
+
+  // A browser toast fires on the TRANSITION into needing a human, never on
+  // every render and never on first paint: the same rule the status mark's
+  // annunciation keeps, for the same reason. A reload is not a new event.
+  let announced = null
+  // An OS toast is for a transition the reader was not there for. Firing one
+  // over the window they are watching announces a state they just caused and
+  // have already read on the row (pressing Land and getting a bounce is the
+  // common one). The tab badge still updates either way: it costs nothing and
+  // asks for nothing. Both halves are needed, because a visible tab in an
+  // unfocused window is a reader who is somewhere else.
+  function readerIsWatching() {
+    return document.visibilityState === 'visible' && typeof document.hasFocus === 'function' && document.hasFocus()
+  }
+  function announceWaiting(rows, prefs) {
+    const ids = new Set(rows.map((s) => s.session_id))
+    if (announced && !readerIsWatching() && prefs && prefs.notify_board && typeof Notification !== 'undefined' && Notification.permission === 'granted') {
+      for (const s of rows) {
+        if (announced.has(s.session_id)) continue
+        const note = rankedNotes(s)[0]
+        try { new Notification(`${rowName(s)} is waiting on you`, { body: note ? note.text : '', tag: s.session_id }) } catch { /* a browser that refuses the constructor is not a reason to stop rendering */ }
+      }
+    }
+    announced = ids
+  }
+
+  const NOT_SECURE = 'This page is not a secure context. Open the board at http://localhost:<port> to turn toasts on.'
+  function secureSentence() {
+    const port = (window.location && window.location.port) || ''
+    return NOT_SECURE.replace('<port>', port || '4747')
+  }
+  // E, the notifications table. Two toggles and no third: the tab badge above
+  // is always on, so there is nothing to decide about it. The board toggle
+  // reads `window.isSecureContext` at RUNTIME, because whether 127.0.0.1
+  // counts is the browser's answer and not one this file may assume.
+  function renderNotifySettings(v) {
+    const box = document.getElementById('notify-settings')
+    if (!box) return
+    const prefs = v && v.preferences
+    box.hidden = !prefs
+    if (!prefs) return
+    const term = document.getElementById('notify-terminal')
+    const brd = document.getElementById('notify-board')
+    const help = document.getElementById('notify-board-help')
+    if (term) term.checked = prefs.notify_terminal !== false
+    const secure = Boolean(window.isSecureContext)
+    if (brd) {
+      brd.disabled = !secure
+      brd.checked = secure && prefs.notify_board === true
+    }
+    if (help) {
+      const state = typeof Notification === 'undefined' ? 'this browser has no notifications' : `permission: ${Notification.permission}`
+      help.textContent = secure ? `The browser asks the first time you turn this on (${state}).` : secureSentence()
+    }
+  }
+  async function saveNotify(patch) {
+    const status = document.getElementById('notify-status')
+    if (status) status.textContent = 'Saving…'
+    try {
+      const data = await api('/api/settings', { method: 'PATCH', body: patch })
+      if (view && data && data.preferences) view.preferences = data.preferences
+      if (status) status.textContent = 'Saved.'
+      renderNotifySettings(view)
+    } catch (err) {
+      if (status) status.textContent = err.message
+      renderNotifySettings(view)
+    }
+  }
+
+  // ---- D14: the keyboard map ----------------------------------------------
+  // Every binding CLICKS a button that is already on the row, so no key is a
+  // second way to do anything and nothing here can drift from the buttons.
+  // `data-focus-key` is the same handle the focus-restore pass uses.
+  const KEY_BUTTONS = [
+    { key: 'h', focus: 'handoff', button: 'Hand off now' },
+    { key: 'l', focus: 'land', button: 'Land' },
+    { key: 'd', focus: 'details', button: 'Details' },
+    { key: 'e', focus: 'end', button: 'End' },
+  ]
+  const KEY_MOVES = [
+    { key: 'j', what: 'move the ring to the next terminal' },
+    { key: 'k', what: 'move the ring to the previous terminal' },
+    { key: '1 to 9', what: 'move the ring to that terminal' },
+    { key: '?', what: 'open and close this map' },
+    { key: 'Escape', what: 'close this map, cancel a confirm row, or close an expansion' },
+  ]
+  // The ring is a TERMINAL, not a position. The grid re-sorts on every SSE push
+  // and on the 15 second timer (needs-you rows first), so an index left the
+  // ring painted on whichever row slid into that slot while the reader was
+  // looking at their terminal, and the next key ended a session they never
+  // chose. `data-session-id` is on every .term, and DOM focus is already
+  // carried by identity through data-focus-key, so this makes the two agree.
+  let ringId = null
+  let keymapOpen = false
+  function termRows() { return [...document.querySelectorAll('#session-grid .term')] }
+  function ringIndex(list) {
+    if (!ringId) return -1
+    return (list || termRows()).findIndex((r) => r.getAttribute('data-session-id') === ringId)
+  }
+  function paintRing(list) {
+    const rows = list || termRows()
+    const at = ringIndex(rows)
+    // a terminal that ended and moved to the ledger takes its ring with it,
+    // rather than leaving it to be inherited by the row that took its place
+    if (ringId && at < 0) ringId = null
+    rows.forEach((r, i) => r.classList.toggle('is-focused', i === at))
+  }
+  // the ring moves focus to the row's first button, so a screen reader
+  // announces the row it landed on rather than leaving the reader nowhere
+  function moveRing(to) {
+    const rows = termRows()
+    if (!rows.length) return
+    const ringAt = Math.max(0, Math.min(rows.length - 1, to))
+    ringId = rows[ringAt].getAttribute('data-session-id')
+    paintRing(rows)
+    // the prompt button first: it is the row's first control and its label is
+    // the prompt, so a screen reader announces WHICH terminal the ring landed
+    // on rather than a bare `Land`. A row with no prompt (someone else's) falls
+    // through to whatever control it does have.
+    const btn = rows[ringAt].querySelector('.panel-prompt, .term-actions .btn, button')
+    if (btn && btn.focus) btn.focus()
+  }
+  function pressOnRing(focusKey) {
+    const rows = termRows()
+    if (!rows.length) return
+    const at = ringIndex(rows)
+    // With no ring there is nothing painted, so a key that acted would act on
+    // whichever row the needs-you sort put first, with no way for the reader to
+    // see which one that was before the POST went out. The first press only
+    // moves and paints the ring; the second acts.
+    if (at < 0) { moveRing(0); return }
+    const btn = rows[at].querySelector(`[data-focus-key^="${focusKey}:"]`)
+    if (btn && !btn.disabled) btn.click()
+  }
+  function renderKeymap() {
+    const box = document.getElementById('keymap')
+    const list = document.getElementById('keymap-list')
+    if (!box || !list) return
+    box.hidden = !keymapOpen
+    if (!keymapOpen) return
+    list.textContent = ''
+    for (const k of KEY_MOVES) {
+      list.appendChild(el('dt', { class: 'keymap-key' }, [k.key]))
+      list.appendChild(el('dd', { class: 'keymap-what' }, [k.what]))
+    }
+    for (const k of KEY_BUTTONS) {
+      list.appendChild(el('dt', { class: 'keymap-key' }, [k.key]))
+      list.appendChild(el('dd', { class: 'keymap-what' }, [`press ${k.button} on the terminal the ring is on`]))
+    }
+  }
+  function toggleKeymap(open) {
+    keymapOpen = open === undefined ? !keymapOpen : open
+    renderKeymap()
+    if (keymapOpen) { const c = document.getElementById('keymap-close'); if (c && c.focus) c.focus() }
+  }
+  // a key pressed into a field is text, never a command
+  function isTyping(e) {
+    const t = e.target
+    const tag = t && t.tagName ? String(t.tagName).toLowerCase() : ''
+    return tag === 'input' || tag === 'select' || tag === 'textarea' || Boolean(t && t.isContentEditable)
+  }
+  // A <dialog> opened with showModal() still sends its keydowns to document, so
+  // `h` typed at the New card dialog reached a row the reader cannot see, and a
+  // confirm row is a question that has not been answered yet. Both own the page
+  // while they are up. Escape has its own branch above this handler, so every
+  // one of them can still be dismissed.
+  function boardBusy() {
+    if (pendingConfirm) return true
+    try { return Boolean(document.querySelector('dialog[open]')) } catch { return false }
+  }
+  function boardKey(e) {
+    if (e.ctrlKey || e.metaKey || e.altKey || isTyping(e)) return
+    if (boardBusy()) return
+    if (e.key === '?') { toggleKeymap(); e.preventDefault(); return }
+    // the map is a panel explaining these keys; reading it must not fire them
+    if (keymapOpen) return
+    if (e.key === 'j') { moveRing(ringIndex() + 1); e.preventDefault(); return }
+    if (e.key === 'k') { moveRing(ringIndex() - 1); e.preventDefault(); return }
+    if (/^[1-9]$/.test(e.key)) { moveRing(Number(e.key) - 1); e.preventDefault(); return }
+    const hit = KEY_BUTTONS.find((k) => k.key === e.key)
+    if (hit) { pressOnRing(hit.focus); e.preventDefault() }
+  }
+
   // Finished terminals are history. After a day of work they are most of the
   // list, and drawn as full rows they bury the one or two that are live, so
   // they leave the panel entirely and become a ledger cell with a drawer.
@@ -1475,6 +2679,12 @@
     const done = (s) => !s.active && !urgent(s) && drawer.id !== s.session_id
     const live = list.filter((s) => !done(s))
     const finished = list.filter(done)
+    // A.4 row 18 and E: the tab badge and the browser toast read the same
+    // predicate the rows sort on and the region head counts, so the three
+    // cannot disagree about who is waiting.
+    const waiting = list.filter(urgent)
+    titleBadge(waiting.length)
+    announceWaiting(waiting, (view && view.preferences) || {})
     terminalsMeta(live, notesOf)
     // computed over the rows that are actually drawn: a sentence shared only by
     // terminals collapsed into the ledger is not on screen to be deduped
@@ -1497,6 +2707,10 @@
     // the control they were on, at the offset they had scrolled to
     if (region && parked) putScroll(region, parked)
     putFocus(document, focus)
+    // the rows are new elements: the ring is a class, so it is repainted onto
+    // the terminal the reader left it on rather than stealing focus again. This
+    // list was just re-sorted, so painting by position would move it.
+    paintRing()
   }
 
   // What landed is history too. The full list was eighteen rows of git log at
@@ -1569,6 +2783,7 @@
     }
     renderAccounts(v.accounts || [])
     renderDefaultOrder(v)
+    renderNotifySettings(v)
     // A rebuild replaces every button in the grid. A confirm row is a question
     // the reader is answering right now, and a push landing between their
     // mousedown and their mouseup dropped the click: the browser fires `click`
@@ -1590,14 +2805,57 @@
   // `baton:sessions` alias for every push; this file had been registered on
   // `leg:sessions` twice and on the alias once, so one push rebuilt the entire
   // terminals grid three times over.
+  // The verdict is a pure function of the payload, and its character budget is
+  // a measurement, so test/board-verdict.test.mjs drives the branches directly
+  // through this seam. In a browser there is no `module`, and nothing here
+  // depends on it. board-updates.test.mjs uses the same pattern in board.js.
+  if (typeof module !== 'undefined') {
+    module.exports = {
+      verdictLines, VERDICT_CH, SUB_CH, WARN_PCT, bindingOf, capFigure, capToken, shareClause, headline,
+      rankedNotes, needsYou, registerTokens, capacityPhrase, capacityNote, waitingNote, notifyWait, resetWait,
+      KEY_BUTTONS, KEY_MOVES,
+      // D14: the ring is state, not a pure function, so test/board-keyboard
+      // drives it through the same keydown listener a reader presses and reads
+      // the paint back through these two. getToken is here because a board in a
+      // browser with storage blocked has to render, and that cannot be asserted
+      // from the source text.
+      paintRing, ringSession: () => ringId, getToken, announceWaiting, readerIsWatching,
+      // B.6: the pick that survives the poll, the rule box and the refusal the
+      // Add button prints are all pure and are asserted without a DOM
+      pickKey, pickIndex, whenFromBox, whenFlag, duplicateRung,
+      // B.6: the picker's option text, the ladder's round trip and the climb
+      // predicate are pure, so they are asserted without a DOM
+      handoffOptionText, rungLabel, costWord, whenKind, whenPct, whenString, moveRung, rungsAfter,
+      climbTarget, topRungFor, MODEL_ALIASES, LADDER_AGENTS,
+      MAY_SPEND_SENTENCE, NO_CREDITS_SENTENCE, CLIMB_RULE, CLIMB_WORDS,
+    }
+  }
+
   window.addEventListener('leg:sessions', (e) => render(e.detail))
   document.addEventListener('keydown', (e) => {
-    if (e.key !== 'Escape') return
-    if (pendingConfirm) { pendingConfirm = null; if (view) renderSessions(view); return }
-    if (drawer.id) closeSessionDrawer()
+    if (e.key === 'Escape') {
+      if (keymapOpen) { toggleKeymap(false); return }
+      if (pendingConfirm) { pendingConfirm = null; if (view) renderSessions(view); return }
+      if (drawer.id) closeSessionDrawer()
+      return
+    }
+    boardKey(e)
   })
   document.addEventListener('DOMContentLoaded', () => {
     document.getElementById('default-order-save')?.addEventListener('click', saveDefaultOrder)
+    document.getElementById('capacity-toggle')?.addEventListener('click', toggleCapacity)
+    document.getElementById('keymap-close')?.addEventListener('click', () => toggleKeymap(false))
+    document.getElementById('notify-terminal')?.addEventListener('change', (e) => saveNotify({ notify_terminal: Boolean(e.target.checked) }))
+    // the permission is asked for on the toggle, never on load: a page that
+    // asks for a permission nobody wanted is a page people close
+    document.getElementById('notify-board')?.addEventListener('change', async (e) => {
+      const on = Boolean(e.target.checked)
+      if (on && typeof Notification !== 'undefined' && Notification.permission === 'default') {
+        try { await Notification.requestPermission() } catch { /* a refusal is an answer; the toggle still saves */ }
+      }
+      saveNotify({ notify_board: on })
+    })
+    renderCapacityToggle()
     renderLoadingHead()
     refresh()
     setInterval(tickElapsed, 1000)