sideby 0.3.0 → 0.4.1

package/dist/src/panel/page-script.js

@@ -1,12 +1,15 @@
 // The Panel page's inline script. Plain browser JavaScript in a string (no template literals inside, so String.raw
 // keeps it verbatim); the pure helpers from page-logic.ts are prepended so the tested code is the code that runs.
-import { aliasArgsOf, aliasIssue, attentionReasons, cacheHitRate, formatDuration, maskEmail, matchesQuery, mergeDaily, newAccountDir, nextReset, panelHint, panelLang, passedWindow, quotaPressure, sortAccounts, suggestAlias, suggestName, updatedAge, windowState, } from './page-logic.js';
+import { aliasArgsOf, aliasIssue, attentionReasons, attentionWhy, cacheHitRate, formatDuration, handoffChangeOf, handoffHintAccount, maskEmail, matchesQuery, mergeDaily, newAccountDir, nextReset, panelHint, panelLang, passedWindow, quotaPressure, sortAccounts, suggestAlias, suggestName, updatedAge, windowState, } from './page-logic.js';
 const LOGIC = [
     aliasArgsOf,
     aliasIssue,
     attentionReasons,
+    attentionWhy,
     cacheHitRate,
     formatDuration,
+    handoffChangeOf,
+    handoffHintAccount,
     maskEmail,
     matchesQuery,
     mergeDaily,
@@ -65,6 +68,7 @@ const MAIN = String.raw `
     const p = { view: 'list', sort: 'pressure', quota: 'used', theme: 'system', lang: '', family: '', collapsed: {}, hideEmail: false }
     for (const k of Object.keys(CHOICES)) if (CHOICES[k].includes(raw[k])) p[k] = raw[k]
     if (raw.hideEmail === true) p.hideEmail = true
+    if (typeof raw.ahHintAt === 'number') p.ahHintAt = raw.ahHintAt
     if (typeof raw.family === 'string') p.family = raw.family
     if (raw.collapsed && typeof raw.collapsed === 'object')
       for (const k of Object.keys(raw.collapsed)) if (raw.collapsed[k] === true) p.collapsed[k] = true
@@ -571,6 +575,7 @@ const MAIN = String.raw `
       a.dir ? { icon: 'folder', label: t('menu.copyDir'), hint: a.dir, run: () => copyText(a.dir) } : null,
       a.identity && a.identity.email ? { icon: 'mail', label: t('menu.copyEmail'), hint: emailText(a.identity.email), run: () => copyText(a.identity.email) } : null,
       '-',
+      family(a.family).tuning ? { icon: 'check', label: t('menu.tune'), run: () => openTune(a) } : null,
       { icon: 'check', label: t('menu.check'), disabled: S.checking || S.fixing || Boolean(ui.checkingRef), run: () => checkAccount(a.ref) },
       BOOT.readOnly ? null : { icon: 'userPlus', label: t('menu.like'), run: () => openCreate({ family: a.family, api: a.kind === 'api' }) },
     ]
@@ -605,6 +610,8 @@ const MAIN = String.raw `
     return { fail, warn }
   }
   function reasonsOf(a, now) { return attentionReasons(a, healthOf(a.ref), now, WARN) }
+  // One line on why an Account needs a look, such as "7d at 62% (warns from 60%)".
+  function whyOf(a, now) { const m = attentionWhy(a, healthOf(a.ref), now, WARN); return m ? t(m.key, m.vars) : '' }
   function setupFor(fam) { return S.state && S.state.quotaSetups.find((s) => s.family === fam) }
 
   // ---------- header and summary ----------
@@ -617,6 +624,7 @@ const MAIN = String.raw `
   }
   function renderTop() {
     renderUpdated()
+    renderHandoffButton()
     // A background refresh keeps the button still; only one the viewer asked for spins it.
     const busy = S.loading && !S.silent
     const refresh = $('refresh')
@@ -901,6 +909,9 @@ const MAIN = String.raw `
     const out = []
     if (a.error) out.push(h('div', { class: 'note note-fail' }, h('b', null, t('acct.readError')), ' ', h('span', null, a.error)))
     if (a.hostInstalled === false) out.push(h('div', { class: 'note note-warn' }, tx('acct.installHost', { host: fam.title, link: link(t('acct.installIt'), fam.installUrl) || '' })))
+    // The other reasons already show in the row (read error, missing tool, sign-in, Health); a full window does not.
+    const why = attentionWhy(a, healthOf(a.ref), Date.now(), WARN)
+    if (why && why.key === 'why.quota-high') out.push(h('div', { class: 'note note-warn' }, t('acct.nearLimit', why.vars)))
     return out.length ? h('div', { class: 'row-notes' }, out) : null
   }
   // What a row or card shows depends on more than the account (health, view preferences, language); the
@@ -950,11 +961,23 @@ const MAIN = String.raw `
     const any = all.some((a) => a.quota && a.quota.status === 'ok')
     return waiting && !any
   }
+  // The group's attention tag says who and why: with one Account its name and reason, and a click shows its row;
+  // with more, the count, each one's reason on hover, and a click shows only them (as the summary card does).
+  function attentionTag(needing, now) {
+    if (needing.length === 1) {
+      const a = needing[0]
+      const label = a.name + ' · ' + whyOf(a, now)
+      return h('button', { class: 'tag tag-warn tag-btn', type: 'button', title: t('group.attentionShow', { name: a.name }), onclick: () => flashRow(a.ref) }, label)
+    }
+    const list = needing.map((a) => a.name + ': ' + whyOf(a, now)).join('\n')
+    return h('button', { class: 'tag tag-warn tag-btn', type: 'button', title: list, 'aria-pressed': String(ui.attention), onclick: () => { ui.attention = !ui.attention; renderSummary(); renderAccounts() } }, tn('group.attention', needing.length))
+  }
   function group(fam, list, total, now, cols) {
     const info = family(fam)
     const filtering = Boolean(ui.query.trim()) || ui.attention
     const collapsed = !filtering && prefs.collapsed[fam] === true
-    const need = list.filter((a) => reasonsOf(a, now).length).length
+    const needing = list.filter((a) => reasonsOf(a, now).length)
+    const need = needing.length
     const setup = setupFor(fam)
     const off = list.some((a) => a.quota && a.quota.status === 'unavailable' && a.quota.reason === 'not-enabled')
     const bodyId = 'grp-' + fam.replace(/[^a-zA-Z0-9_-]/g, '_')
@@ -969,7 +992,7 @@ const MAIN = String.raw `
         h('span', { class: 'group-count' }, list.length === total ? String(total) : list.length + ' / ' + total)),
       h('div', { class: 'group-meta' },
         waitingForQuota(fam) ? h('span', { class: 'group-wait', role: 'status' }, h('span', { class: 'pulse', 'aria-hidden': 'true' }), t('quota.waiting', { host: info.title })) : null,
-        need ? h('span', { class: 'tag tag-warn' }, tn('group.attention', need)) : null,
+        need ? attentionTag(needing, now) : null,
         off && setup && setup.plan.status === 'ready' && !BOOT.readOnly
           ? h('span', { class: 'group-quota' },
             h('span', { class: 'muted small' }, t('quota.turnOnFamilyNote', { host: info.title })),
@@ -1217,6 +1240,254 @@ const MAIN = String.raw `
     if (!el.open) { el.showModal(); raiseToasts() }
   }
 
+  // Context tuning (spec §3.18, ADR-0012). The setting lives in one settings file, which Accounts often share, so
+  // there is one card per file: what is suggested, one button that does it (after saying what it changes), one size
+  // menu, and the way back. Each account's own numbers sit behind a click.
+  const tuneState = { ref: null, family: null, loading: false, data: null, error: null }
+  // The one change being made right now: step is asking (fetching the plan), confirm, busy, done or undone.
+  let useUi = null
+  // What each card's size menu shows while the user is choosing, by group id; dropped once a change is made.
+  const tuneSel = {}
+  const tp = { data: null, loading: false, error: null, at: 0 }
+  let curPage = location.hash === '#tuning' ? 'tuning' : 'accounts'
+  function tuneSize(n) { return n === null || n === undefined ? t('tune.hostDefault') : tokens(n) }
+  function tuneRedraw() {
+    if (dlg.kind === 'tune') renderTune()
+    if (curPage === 'tuning') renderTuningPage()
+  }
+  async function tuneReload() {
+    if (curPage === 'tuning') await loadTuningPage()
+    if (dlg.kind === 'tune' && tuneState.ref) await loadTuneDialog()
+  }
+  async function useAsk(g, value) {
+    useUi = { gid: g.id, target: g.target, value, step: 'asking', plan: null, error: null, message: '' }
+    tuneRedraw()
+    try {
+      const r = await api('/api/tuning/apply', { account: g.target, value })
+      useUi = { ...useUi, step: 'confirm', plan: r.plan }
+    } catch (e) { useUi = { ...useUi, step: 'confirm', error: e } }
+    tuneRedraw()
+  }
+  async function useConfirm() {
+    const cur = useUi
+    useUi = { ...cur, step: 'busy' }
+    tuneRedraw()
+    try {
+      const r = await api('/api/tuning/apply', { account: cur.target, value: cur.value, confirm: true })
+      useUi = { ...cur, step: 'done', plan: r.plan, error: null, message: r.applied ? '' : r.message, ok: r.applied }
+      delete tuneSel[cur.gid]
+    } catch (e) { useUi = { ...cur, step: 'confirm', error: e } }
+    tuneRedraw()
+    await tuneReload()
+  }
+  async function useUndo(g) {
+    useUi = { gid: g.id, target: g.target, step: 'busy', plan: null, error: null, message: '' }
+    tuneRedraw()
+    try {
+      const r = await api('/api/tuning/undo', { account: g.target })
+      useUi = { ...useUi, step: 'undone', message: r.undone ? '' : r.message, ok: r.undone }
+      delete tuneSel[g.id]
+    } catch (e) { useUi = { ...useUi, step: 'undone', error: e, ok: false } }
+    tuneRedraw()
+    await tuneReload()
+  }
+  // What the change will do, in words a person can check before saying yes. ending picks the result of a finished
+  // change; the rest (asking, the question, an error) is the part before it.
+  function useBox(g, ending) {
+    const u = useUi
+    if (!u || u.gid !== g.id) return null
+    const finished = u.step === 'done' || u.step === 'undone'
+    if (finished !== Boolean(ending)) return null
+    if (u.step === 'asking' || u.step === 'busy') return h('p', { class: 'muted small' }, spinner(), ' ', t('tune.working'))
+    if (finished) {
+      if (u.error) return errorNote(u.error, null)
+      if (u.ok === false) return h('p', { class: 'note note-warn' }, u.message)
+      return h('p', { class: 'note' }, u.step === 'done' ? t('tune.done', { size: tuneSize(u.value) }) : t('tune.undone'), ' ',
+        u.step === 'done' && !BOOT.readOnly ? h('button', { class: 'btn btn-sm', type: 'button', onclick: () => useUndo(g) }, t('tune.undo')) : null)
+    }
+    if (u.error) return errorNote(u.error, null)
+    const plan = u.plan
+    if (plan.status === 'blocked') return h('p', { class: 'note note-warn' }, plan.reason)
+    if (plan.status === 'unchanged') return h('p', { class: 'note' }, t('tune.already', { size: tuneSize(u.value) }))
+    return h('div', { class: 'tune-confirm' },
+      h('p', { class: 'small' }, h('b', null, t('tune.confirmTitle'))),
+      h('ul', { class: 'small' },
+        h('li', null, t('tune.change') + ': ' + tuneSize(plan.current) + ' → ' + tuneSize(plan.next)),
+        h('li', null, t('tune.file') + ': ', h('code', null, plan.file + (plan.creates ? ' ' + t('tune.willCreate') : '')))),
+      plan.affected.length > 1 ? h('p', { class: 'note note-warn' }, t('tune.shared', { list: plan.affected.join(', ') })) : null,
+      plan.overrides && plan.overrides.length ? h('p', { class: 'note note-warn' }, t('tune.overrides', { list: plan.overrides.map((o) => o.model + ' (' + tokens(o.value) + ')').join(', ') })) : null,
+      h('p', { class: 'muted small' }, t('tune.newSessions')),
+      h('div', { class: 'row-actions' },
+        h('button', { class: 'btn btn-primary btn-sm', type: 'button', onclick: useConfirm }, t('tune.confirm')),
+        h('button', { class: 'btn btn-sm', type: 'button', onclick: () => { useUi = null; tuneRedraw() } }, t('btn.cancel'))))
+  }
+  // The card for one settings file.
+  function tuneGroupCard(g, entries) {
+    const pick = g.pick
+    const sizes = new Set([100000, 150000, 200000, 300000, 500000, 800000, 1000000])
+    let top = 200000
+    for (const e of entries) if (e.tuning.status === 'ok') for (const m of e.tuning.models) top = Math.max(top, m.contextWindow)
+    for (const v of [...sizes]) if (v > top) sizes.delete(v)
+    if (pick) sizes.add(pick.threshold)
+    if (g.current && !g.outOfRange) sizes.add(g.current)
+    const key = (v) => (v === null ? 'default' : String(v))
+    const chosen = tuneSel[g.id] !== undefined ? tuneSel[g.id] : key(g.current)
+    const sel = h('select', { 'aria-label': t('tune.setting') },
+      h('option', { value: 'default' }, t('tune.hostDefaultLong')),
+      [...sizes].sort((x, y) => x - y).map((v) => h('option', { value: String(v) }, tokens(v) + (pick && v === pick.threshold ? ' (' + t('tune.suggestedTag') + ')' : ''))))
+    sel.value = chosen
+    sel.addEventListener('change', () => { tuneSel[g.id] = sel.value; tuneRedraw() })
+    const value = chosen === 'default' ? null : Number(chosen)
+    const mine = useUi && useUi.gid === g.id
+    const busy = mine && (useUi.step === 'asking' || useUi.step === 'busy')
+    const asking = mine && (useUi.step === 'confirm' || busy)
+    const rows = [h('p', { class: 'small' }, g.members.length > 1 ? t('tune.groupShared', { list: g.members.join(', ') }) : h('b', { class: 'mono' }, g.members[0]))]
+    rows.push(h('div', { class: 'tune-vals' },
+      h('div', null, h('span', { class: 'muted small' }, t('tune.now')), h('div', { class: 'tune-num' }, tuneSize(g.current))),
+      pick ? h('div', null, h('span', { class: 'muted small' }, t('tune.best')), h('div', { class: 'tune-num tune-best' }, tokens(pick.threshold))) : null))
+    if (pick && pick.savedPercent !== null) rows.push(h('p', { class: 'small' }, t('tune.saved', { n: Math.round(pick.savedPercent) })))
+    if (pick) rows.push(h('p', { class: 'muted small' }, t('tune.basis', { model: pick.model, ref: pick.ref })))
+    else {
+      // Say why there is no suggestion: when a model is already at its cheapest, that is the news, not "not enough use".
+      const why = entries.flatMap((e) => (e.tuning.status === 'ok' ? e.tuning.models : [])).some((m) => m.reason === 'already-best') ? t('tune.reason.already-best') : t('tune.groupNone')
+      rows.push(h('p', { class: 'note' }, why))
+    }
+    if (g.overrides && g.overrides.length) rows.push(h('p', { class: 'note note-warn' }, t('tune.overrides', { list: g.overrides.map((o) => o.model + ' (' + tokens(o.value) + ')').join(', ') })))
+    if (g.outOfRange) rows.push(h('p', { class: 'note note-warn' }, t('tune.outOfRange', { size: tokens(g.current) })))
+    if (!BOOT.readOnly) {
+      if (pick && !asking) rows.push(h('div', { class: 'row-actions' }, h('button', { class: 'btn btn-primary', type: 'button', onclick: () => useAsk(g, pick.threshold) }, t('tune.use', { size: tokens(pick.threshold) }))))
+      rows.push(h('div', { class: 'tune-setting' },
+        h('b', { class: 'small' }, t('tune.setting')),
+        h('div', { class: 'row-actions' }, sel,
+          h('button', { class: 'btn btn-sm', type: 'button', disabled: Boolean(busy) || value === g.current, onclick: () => useAsk(g, value) }, t('tune.useThis')))))
+      rows.push(useBox(g, false))
+      if (g.undo && !(mine && (useUi.step === 'done' || useUi.step === 'undone')))
+        rows.push(h('p', { class: 'small tune-undo' }, t('tune.applied', { prev: tuneSize(g.undo.previous) }), ' ',
+          h('button', { class: 'btn btn-sm', type: 'button', onclick: () => useUndo(g) }, t('tune.undo'))))
+      rows.push(useBox(g, true))
+    }
+    return h('div', { class: 'tune-model tune-group' }, rows)
+  }
+  // What was seen for one model: information only, behind a click.
+  function tuneModel(m, minCalls) {
+    const rows = [h('div', { class: 'tune-head' }, h('b', { class: 'mono' }, m.model), h('span', { class: 'muted small' }, t('tune.calls', { n: m.calls })))]
+    rows.push(h('div', { class: 'tune-vals' },
+      h('div', null, h('span', { class: 'muted small' }, t('tune.now')), h('div', { class: 'small' }, tuneSize(m.configured))),
+      m.suggestion ? h('div', null, h('span', { class: 'muted small' }, t('tune.best')), h('div', { class: 'small' }, tokens(m.suggestion.threshold))) : null))
+    if (!m.suggestion) rows.push(h('p', { class: 'muted small' }, t('tune.reason.' + m.reason, { min: minCalls })))
+    rows.push(h('p', { class: 'muted small' }, m.compactions.total ? tn('tune.compactions', m.compactions.total, { size: tokens(m.compactions.preTokensP50 || 0) }) : t('tune.noCompactions')))
+    return h('div', { class: 'tune-detail' }, rows)
+  }
+  function tuneDetails(entries, minCalls, label) {
+    const kids = []
+    for (const e of entries) {
+      if (e.tuning.status !== 'ok' || !e.tuning.models.length) continue
+      kids.push(h('div', { class: 'tune-acct-head title-logo' }, badge(e.family, 'sm'), h('b', { class: 'mono' }, e.ref)))
+      for (const m of e.tuning.models) kids.push(tuneModel(m, minCalls))
+    }
+    return kids.length ? h('details', { class: 'tune-details' }, h('summary', null, label), kids) : null
+  }
+  // Everything for a response: a card per settings file, then what Codex accounts show (it only observes).
+  function tuneBody(data) {
+    const out = []
+    const byRef = {}
+    for (const e of data.accounts) byRef[e.ref] = e
+    for (const g of data.groups) {
+      const entries = g.members.map((r) => byRef[r]).filter(Boolean)
+      out.push(h('div', { class: 'tune-acct' }, tuneGroupCard(g, entries), tuneDetails(entries, data.minCalls, t('tune.details'))))
+    }
+    const rest = data.accounts.filter((e) => !data.groups.some((g) => g.members.includes(e.ref)))
+    const seen = rest.filter((e) => e.tuning.status === 'ok' && e.tuning.models.length)
+    if (seen.length) out.push(h('div', { class: 'tune-acct' }, tuneDetails(seen, data.minCalls, t('tune.detailsObserved'))))
+    return out
+  }
+  async function openTune(a) {
+    tuneState.ref = a.ref; tuneState.family = a.family; tuneState.data = null; tuneState.error = null
+    // A finished change is not shown again when the dialog opens next time.
+    if (useUi && (useUi.step === 'done' || useUi.step === 'undone')) useUi = null
+    showDialog('tune')
+    await loadTuneDialog()
+  }
+  async function loadTuneDialog() {
+    const ref = tuneState.ref
+    tuneState.loading = true
+    renderTune()
+    try {
+      const r = await api('/api/tuning', { account: ref })
+      if (tuneState.ref === ref) { tuneState.data = r; tuneState.error = null }
+    } catch (e) { if (tuneState.ref === ref) tuneState.error = e }
+    tuneState.loading = false
+    if (dlg.kind === 'tune' && tuneState.ref === ref) renderTune()
+  }
+  function renderTune() {
+    if (!tuneState.ref) return
+    const body = [h('p', { class: 'muted small' }, t('tune.intro', { days: BOOT.usageDays }))]
+    const d = tuneState.data
+    const one = d && d.accounts[0]
+    if (tuneState.loading && !d) body.push(h('p', { class: 'muted' }, spinner(), ' ', t('tune.loading')))
+    else if (tuneState.error) body.push(errorNote(tuneState.error, loadTuneDialog))
+    else if (d && d.groups.length) body.push(tuneBody(d))
+    else if (one && one.tuning.status === 'ok') body.push(tuneBody(d))
+    else if (one) body.push(h('p', { class: 'note', title: one.tuning.detail || null }, t(one.tuning.reason === 'no-session' ? 'tune.none' : one.tuning.reason === 'no-source' ? 'tune.noSource' : 'tune.unreadable')))
+    const foot = [h('button', { class: 'btn', type: 'button', onclick: () => dlg.el.close() }, t('btn.close'))]
+    setKids(dlg.el, dialogFrame(t('tune.title') + ' · ' + tuneState.ref, tuneState.family, body, foot))
+  }
+
+  // The page: every account that can tune, on a page of its own. The address ending in #tuning opens it.
+  function tuningAvailable() { return Boolean(S.state && S.state.families.some((f) => f.tuning)) }
+  function setPage(next) {
+    curPage = next
+    try { history.replaceState(null, '', next === 'tuning' ? '#tuning' : location.pathname + location.search) } catch {}
+    renderPageChrome()
+  }
+  // The page tabs, and which sections show; runs with every render, so a reload or a language switch keeps them.
+  function renderPageChrome() {
+    const nav = $('pages')
+    const can = tuningAvailable()
+    if (!can && curPage === 'tuning' && S.state) curPage = 'accounts'
+    nav.hidden = !can
+    const tabs = [['accounts', t('page.accounts')], ['tuning', t('page.tuning')]]
+    setKids(nav, h('div', { class: 'seg', role: 'presentation' }, tabs.map(([id, label]) =>
+      h('button', { class: 'seg-btn', type: 'button', role: 'tab', 'aria-selected': curPage === id ? 'true' : 'false', onclick: () => setPage(id) }, label))))
+    const on = can && curPage === 'tuning'
+    for (const id of ['summary', 'accounts-page', 'checkup']) $(id).hidden = on
+    $('tuning-page').hidden = !on
+    if (on) {
+      if (!tp.data && !tp.loading && !tp.error) loadTuningPage()
+      else renderTuningPage()
+    }
+  }
+  async function loadTuningPage() {
+    tp.loading = true
+    tp.error = null
+    renderTuningPage()
+    try { tp.data = await api('/api/tuning', {}); tp.at = Date.now() } catch (e) { tp.error = e }
+    tp.loading = false
+    renderTuningPage()
+  }
+  function renderTuningPage() {
+    const box = $('tuning-page')
+    if (box.hidden) return
+    const kids = [h('div', { class: 'section-head' },
+      h('h2', { id: 'h-tuning' }, t('tpage.title')),
+      h('button', { class: 'btn btn-sm', type: 'button', disabled: tp.loading, onclick: loadTuningPage }, tp.loading ? spinner() : icon('refresh'), t('top.refresh')))]
+    kids.push(h('p', { class: 'muted small' }, t('tune.intro', { days: BOOT.usageDays })))
+    const d = tp.data
+    if (tp.loading && !d) kids.push(h('p', { class: 'muted' }, spinner(), ' ', t('tune.loading')))
+    if (tp.error) kids.push(errorNote(tp.error, loadTuningPage))
+    if (d) {
+      const seen = d.accounts.filter((a) => a.tuning.status === 'ok' && a.tuning.models.length)
+      const idle = d.accounts.filter((a) => !seen.includes(a) && a.tuning.status === 'unavailable' && a.tuning.reason !== 'unrecognized').map((a) => a.ref)
+      const broken = d.accounts.filter((a) => a.tuning.status === 'unavailable' && a.tuning.reason === 'unrecognized')
+      if (!seen.length && !d.groups.length) kids.push(h('p', { class: 'small' }, t('tpage.none')))
+      kids.push(tuneBody(d))
+      for (const a of broken) kids.push(h('p', { class: 'note note-fail' }, h('b', { class: 'mono' }, a.ref), ' ', a.tuning.detail || t('tune.unreadable')))
+      if (idle.length) kids.push(h('p', { class: 'muted small' }, t('tpage.idle', { list: idle.join(', ') })))
+    }
+    setKids(box, kids)
+  }
+  window.addEventListener('hashchange', () => { curPage = location.hash === '#tuning' ? 'tuning' : 'accounts'; renderPageChrome() })
+
   // New account. The form is built once per opening so typing keeps focus; only its derived parts re-render.
   let nf = null
   function familyStatus(f) {
@@ -1510,6 +1781,184 @@ const MAIN = String.raw `
     load()
   }
 
+  // ---------- auto handoff ----------
+  // Settings come with /api/state; readiness (which runs a check of the sideby on PATH) only when the dialog opens.
+  let ah = null
+  const HINT_QUIET_MS = 24 * 3600000
+  function ahState() { return S.state && S.state.autoHandoff }
+  function renderHandoffButton() {
+    const b = $('handoff')
+    const st = ahState()
+    b.hidden = !st
+    if (!st) return
+    const on = st.settings.auto
+    setKids(b, [h('span', { class: 'hide-sm' }, t('ah.button')), h('span', { class: 'chip chip-sm' + (on ? ' chip-ok' : '') }, on ? t('ah.on') : t('ah.off'))])
+    b.setAttribute('aria-label', t('ah.button') + ': ' + (on ? t('ah.on') : t('ah.off')))
+  }
+  function handoffHint() {
+    const st = ahState()
+    if (!st || BOOT.readOnly) return null
+    if (prefs.ahHintAt && Date.now() - prefs.ahHintAt < HINT_QUIET_MS) return null
+    return handoffHintAccount(S.state.accounts, st.settings, st.starters, Date.now())
+  }
+  function handoffForm() {
+    const st = ahState()
+    const s = st.settings
+    const orders = {}
+    for (const f of st.starters) {
+      const cur = s.families[f]
+      orders[f] = { policy: cur && cur.policy === 'order' ? 'order' : 'pressure', order: cur ? cur.order.slice() : [] }
+    }
+    return { auto: s.auto, sameFamily: s.sameFamily, prepareAt: s.prepareAt, threshold: s.threshold, wait: s.waitIfResetWithinMinutes, countdown: s.countdownSeconds, orders }
+  }
+  async function openHandoff() {
+    if (!ahState()) return
+    ah = { form: handoffForm(), loading: true }
+    showDialog('handoff')
+    renderHandoff()
+    await loadHandoffStatus()
+  }
+  async function loadHandoffStatus() {
+    const mine = ah
+    try {
+      const st = await api('/api/handoff/status', {})
+      if (ah === mine) { ah.status = st; ah.loading = false; ah.error = null }
+    } catch (e) { if (ah === mine) { ah.error = e; ah.loading = false } }
+    if (dlg.kind === 'handoff') renderHandoff()
+  }
+  function ahEdit(fn) {
+    fn(ah.form)
+    ah.preview = null
+    ah.nothing = false
+    ah.saved = null
+    renderHandoff()
+  }
+  function ahNumber(key, label, min, max) {
+    const id = 'ah-' + key
+    const input = h('input', { id, type: 'number', min: String(min), max: String(max), step: '1', value: String(ah.form[key]), disabled: BOOT.readOnly })
+    input.addEventListener('change', () => {
+      const n = Math.round(Number(input.value))
+      if (Number.isFinite(n)) ahEdit((f) => { f[key] = Math.min(max, Math.max(min, n)) })
+    })
+    return h('label', { class: 'field', for: id }, h('span', null, label), input)
+  }
+  function ahCheck(key, label, hintText) {
+    const input = h('input', { type: 'checkbox', disabled: BOOT.readOnly })
+    input.checked = Boolean(ah.form[key])
+    input.addEventListener('change', () => ahEdit((f) => { f[key] = input.checked }))
+    return h('div', { class: 'check-row' }, h('label', { class: 'check' }, input, h('span', null, h('b', null, label), hintText ? h('span', { class: 'muted small' }, hintText) : null)))
+  }
+  function accountLabel(ref) {
+    const a = S.state.accounts.find((x) => x.ref === ref || (x.aliases || []).includes(ref))
+    const alias = a && a.aliases && a.aliases[0]
+    return a ? (alias && alias !== ref ? ref + ' (' + alias + ')' : a.ref) : ref
+  }
+  function ahFamily(fam) {
+    const o = ah.form.orders[fam]
+    const f = family(fam)
+    const policy = h('select', { 'aria-label': t('ah.order', { host: f.title }), disabled: BOOT.readOnly },
+      h('option', { value: 'pressure' }, t('ah.byQuota')), h('option', { value: 'order' }, t('ah.myOrder')))
+    policy.value = o.policy
+    policy.addEventListener('change', () => ahEdit((form) => { form.orders[fam].policy = policy.value }))
+    const kids = [h('div', { class: 'ah-fam-head' }, h('b', { class: 'title-logo' }, badge(fam, 'sm'), t('ah.order', { host: f.title })), h('span', null, policy))]
+    if (o.policy === 'order') {
+      const move = (i, d) => ahEdit((form) => { const l = form.orders[fam].order; const x = l[i]; l[i] = l[i + d]; l[i + d] = x })
+      kids.push(h('ol', { class: 'ah-order' }, o.order.map((ref, i) => h('li', null,
+        h('span', { class: 'mono' }, (i + 1) + '. ' + accountLabel(ref)),
+        h('button', { class: 'btn btn-sm', type: 'button', disabled: BOOT.readOnly || i === 0, 'aria-label': t('ah.up'), onclick: () => move(i, -1) }, '↑'),
+        h('button', { class: 'btn btn-sm', type: 'button', disabled: BOOT.readOnly || i === o.order.length - 1, 'aria-label': t('ah.down'), onclick: () => move(i, 1) }, '↓'),
+        h('button', { class: 'icon-btn', type: 'button', disabled: BOOT.readOnly, 'aria-label': t('ah.remove'), onclick: () => ahEdit((form) => { form.orders[fam].order.splice(i, 1) }) }, icon('x'))))))
+      const taken = new Set(o.order)
+      const free = S.state.accounts.filter((a) => !taken.has(a.ref) && !(a.aliases || []).some((n) => taken.has(n)))
+      if (!o.order.length) kids.push(h('p', { class: 'note note-warn' }, t('ah.emptyOrder')))
+      if (free.length && !BOOT.readOnly) {
+        const pick = h('select', { 'aria-label': t('ah.add') }, h('option', { value: '' }, t('ah.add') + '…'), free.map((a) => h('option', { value: a.ref }, accountLabel(a.ref))))
+        pick.addEventListener('change', () => { if (pick.value) ahEdit((form) => { form.orders[fam].order.push(pick.value) }) })
+        kids.push(h('div', { class: 'ah-add' }, pick))
+      }
+    } else kids.push(h('p', { class: 'muted small' }, t('ah.byQuotaHint')))
+    return h('div', { class: 'ah-fam' }, kids)
+  }
+  function ahReadiness() {
+    if (ah.loading) return h('p', { class: 'muted' }, spinner(), ' ', t('ah.checking'))
+    if (ah.error) return errorNote(ah.error, loadHandoffStatus)
+    const st = ah.status
+    if (!st) return null
+    const rows = []
+    if (st.sideby.problem) rows.push(h('p', { class: 'note note-fail' }, st.sideby.problem))
+    for (const f of st.families) {
+      const state = f.starts.length ? (f.ready ? h('span', { class: 'chip chip-sm chip-ok' }, t('ah.ready')) : h('span', { class: 'chip chip-sm chip-warn' }, t('ah.notYet'))) : h('span', { class: 'chip chip-sm' }, t('ah.takesOver'))
+      rows.push(h('div', { class: 'ah-fam' }, h('div', { class: 'ah-fam-head' }, h('b', { class: 'title-logo' }, badge(f.family, 'sm'), family(f.family).title), state),
+        f.problems.map((p) => h('p', { class: 'note note-warn' }, p)),
+        f.notes.map((n) => h('p', { class: 'muted small' }, n))))
+    }
+    if (st.nextSteps.length) rows.push(h('p', { class: 'small' }, h('b', null, t('ah.steps'))), h('ol', { class: 'ah-steps' }, st.nextSteps.map((s) => h('li', null, codeCopy(s)))))
+    return rows
+  }
+  function renderHandoff() {
+    const st = ahState()
+    if (!st || !ah) return
+    const f = ah.form
+    const body = [h('p', { class: 'muted small' }, t('ah.intro'))]
+    if (BOOT.readOnly) body.push(h('p', { class: 'note' }, t('banner.readOnly')))
+    body.push(ahCheck('auto', t('ah.auto'), null))
+    body.push(ahCheck('sameFamily', t('ah.sameFamily'), t('ah.sameFamilyWarn')))
+    body.push(h('div', { class: 'ah-grid' },
+      ahNumber('prepareAt', t('ah.prepareAt'), 1, 99),
+      ahNumber('threshold', t('ah.threshold'), 2, 100),
+      ahNumber('wait', t('ah.wait'), 0, 300),
+      ahNumber('countdown', t('ah.countdown'), 0, 60)))
+    if (f.prepareAt >= f.threshold) body.push(h('p', { class: 'note note-warn' }, t('ah.badLevels')))
+    for (const fam of st.starters) body.push(ahFamily(fam))
+    // The result of Review or Apply sits right under the form, where the button that made it is.
+    if (ah.applyError) body.push(errorNote(ah.applyError, null))
+    if (ah.saved) body.push(h('p', { class: 'note' }, t('ah.saved', { file: ah.saved })))
+    if (ah.nothing) body.push(h('p', { class: 'muted small' }, t('ah.nothing')))
+    if (ah.preview) body.push(h('p', { class: 'small' }, tx('ah.changes', { file: h('code', null, ah.preview.file) })), diffView(ah.preview.diff))
+    body.push(h('h3', { class: 'small' }, t('ah.readiness')))
+    body.push(ahReadiness())
+    const foot = [h('button', { class: 'btn', type: 'button', disabled: ah.applying, onclick: () => dlg.el.close() }, t('btn.close'))]
+    if (!BOOT.readOnly) {
+      const bad = f.prepareAt >= f.threshold
+      if (ah.preview) foot.push(h('button', { class: 'btn btn-primary', type: 'button', disabled: ah.applying, 'aria-busy': ah.applying ? 'true' : null, onclick: applyHandoff }, ah.applying ? spinner() : null, ah.applying ? t('ah.applying') : t('ah.apply')))
+      else foot.push(h('button', { class: 'btn btn-primary', type: 'button', disabled: bad || ah.reviewing, onclick: reviewHandoff }, ah.reviewing ? spinner() : null, t('ah.review')))
+    }
+    setKids(dlg.el, dialogFrame(t('ah.title'), null, body, foot))
+  }
+  async function reviewHandoff() {
+    const change = handoffChangeOf(ahState().settings, ah.form)
+    if (!Object.keys(change).length) { ah.nothing = true; renderHandoff(); return }
+    ah.reviewing = true
+    ah.applyError = null
+    renderHandoff()
+    try {
+      const r = await api('/api/handoff/configure', { change })
+      ah.preview = r.changed ? { change, file: r.file, diff: r.diff } : null
+      ah.nothing = !r.changed
+    } catch (e) { ah.applyError = e }
+    ah.reviewing = false
+    renderHandoff()
+  }
+  async function applyHandoff() {
+    ah.applying = true
+    dlg.busy = true
+    renderHandoff()
+    try {
+      const r = await api('/api/handoff/configure', { change: ah.preview.change, confirm: true })
+      ah.saved = r.file
+      ah.preview = null
+      toast(r.settings.auto ? t('toast.ahOn') : t('toast.ahOff'))
+      await load({ silent: true })
+      if (ahState()) ah.form = handoffForm()
+      ah.loading = true
+      ah.status = null
+    } catch (e) { ah.applyError = e }
+    ah.applying = false
+    dlg.busy = false
+    renderHandoff()
+    if (ah.loading) loadHandoffStatus()
+  }
+
   // ---------- banners ----------
   function renderBanners() {
     const out = []
@@ -1518,6 +1967,12 @@ const MAIN = String.raw `
       h('button', { class: 'btn btn-sm', type: 'button', onclick: () => load({ check: !S.report }) }, t('btn.retry'))))
     if (S.state) {
       if (BOOT.readOnly) out.push(h('div', { class: 'banner banner-quiet' }, h('div', { class: 'muted small' }, t('banner.readOnly'))))
+      const hint = handoffHint()
+      if (hint) out.push(h('div', { class: 'banner', role: 'status' },
+        h('div', null, t('ah.hint', { ref: hint.ref, p: hint.pressure })),
+        h('div', { class: 'banner-actions' },
+          h('button', { class: 'btn btn-sm btn-primary', type: 'button', onclick: openHandoff }, t('ah.setUp')),
+          h('button', { class: 'btn btn-sm', type: 'button', onclick: () => { prefs.ahHintAt = Date.now(); savePrefs(); renderBanners() } }, t('ah.dismiss')))))
       const errs = S.state.pluginErrors
       if (errs.length) out.push(h('div', { class: 'banner banner-warn', role: 'status' }, h('div', null,
         h('b', null, tn('banner.plugins', errs.length) + ' '), t('banner.pluginsHint'),
@@ -1527,7 +1982,7 @@ const MAIN = String.raw `
   }
 
   // ---------- loading ----------
-  function renderAll() { renderTop(); renderBanners(); renderSummary(); renderFamilyFilter(); renderEmailToggle(); renderAccounts(); renderCheckup() }
+  function renderAll() { renderTop(); renderBanners(); renderSummary(); renderFamilyFilter(); renderEmailToggle(); renderAccounts(); renderCheckup(); renderPageChrome() }
   // A load that starts while another runs is queued, never dropped, so a change made meanwhile (a new
   // account, a fix) always ends up on screen; and only the newest response is ever rendered. A silent load is a
   // background refresh: no spinner, and its render waits while the viewer is busy (see uiBusy).
@@ -1601,6 +2056,7 @@ const MAIN = String.raw `
   // ---------- start ----------
   $('ver').textContent = BOOT.version ? 'v' + BOOT.version : ''
   $('refresh').addEventListener('click', () => load({ check: true, announce: true }))
+  $('handoff').addEventListener('click', openHandoff)
   $('lang').addEventListener('click', () => {
     if (LANG_FIXED) return
     lang = lang === 'zh' ? 'en' : 'zh'
@@ -1611,6 +2067,7 @@ const MAIN = String.raw `
     renderAll()
     if (dlg.kind === 'create' && nf && !nf.creating) renderCreate()
     else if (dlg.kind === 'setup' && qs) renderSetup()
+    else if (dlg.kind === 'tune' && tuneState) renderTune()
   })
   $('theme').addEventListener('click', () => {
     const order = CHOICES.theme

package/dist/src/panel/page-styles.js

@@ -116,6 +116,18 @@ code, .mono { font-family: var(--mono); font-size: 0.92em; }
 .seg { display: inline-flex; align-items: center; gap: 2px; height: var(--ctl-h); padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--ctl-radius); background: var(--surface); }
 .seg-btn { display: inline-flex; align-items: center; gap: 5px; height: 100%; padding: 0 10px; border: 0; border-radius: calc(var(--ctl-radius) - 2px); background: transparent; color: var(--muted); font: inherit; font-size: var(--control-size); cursor: pointer; }
 .seg-btn:hover { color: var(--text); }
+.seg-btn[aria-selected=true] { background: var(--active); color: var(--text); font-weight: var(--strong-weight); }
+.pages { margin: 0 0 14px; }
+.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.tune-confirm { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
+.tune-confirm ul { margin: 0; padding-left: 18px; }
+.tune-undo { margin: 0; }
+.tune-details { margin-top: 4px; }
+.tune-details summary { cursor: pointer; color: var(--muted); font-size: var(--small); }
+.tune-detail { border-left: 2px solid var(--border); padding: 4px 0 4px 10px; margin: 6px 0; display: flex; flex-direction: column; gap: 4px; }
+.tune-setting { display: flex; flex-direction: column; gap: 8px; border: 1px dashed var(--border-strong); border-radius: calc(var(--radius) - 4px); padding: 10px 12px; }
+.tune-acct { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }
+.tune-acct-head { display: flex; align-items: center; gap: 8px; }
 .seg-btn[aria-pressed=true] { background: var(--active); color: var(--text); font-weight: var(--strong-weight); }
 .seg-btn:focus-visible { outline: var(--focus-outline); outline-offset: 1px; box-shadow: var(--focus-ring); }
 .acct-head { margin-bottom: 10px; }
@@ -322,6 +334,20 @@ a.btn:hover { text-decoration: none; }
 .banner-fail { background: var(--fail-soft); border-color: transparent; color: var(--fail); }
 .banner-warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
 .banner ul { margin: 6px 0 0; padding-left: 18px; }
+.banner-actions { display: flex; gap: 8px; flex: none; }
+.ah-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
+.tune-model { border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
+.tune-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
+.tune-vals { display: flex; gap: 24px; }
+.tune-num { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.tune-best { color: var(--ok, var(--accent)); }
+.ah-fam { border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
+.ah-fam-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.ah-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.ah-order li { display: flex; align-items: center; gap: 6px; }
+.ah-order li .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.ah-add { display: flex; gap: 6px; }
+.ah-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
 .disabled-why { color: var(--muted); font-size: var(--small); margin-top: 10px; }
 .actions { display: flex; gap: 8px; flex-wrap: wrap; }
 .spin { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; vertical-align: -2px; flex: none; }
@@ -354,11 +380,11 @@ a.btn:hover { text-decoration: none; }
 .field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
 .field > span, .field > legend { font-weight: var(--strong-weight); font-size: var(--small); padding: 0; margin-bottom: 6px; }
 .field > span { margin-bottom: 0; }
-input[type=text], input[type=search], select { height: var(--field-h); border-radius: var(--ctl-radius); border: 1px solid var(--border-strong); background-color: var(--surface); color: var(--text); font: inherit; padding: 0 12px; width: 100%; transition: border-color .12s, box-shadow .12s; }
+input[type=text], input[type=search], input[type=number], select { height: var(--field-h); border-radius: var(--ctl-radius); border: 1px solid var(--border-strong); background-color: var(--surface); color: var(--text); font: inherit; padding: 0 12px; width: 100%; transition: border-color .12s, box-shadow .12s; }
 input[type=search] { -webkit-appearance: none; appearance: none; }
 input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
 input::placeholder { color: var(--faint); }
-input[type=text]:hover:not(:disabled), input[type=search]:hover, select:hover:not(:disabled) { border-color: var(--btn-hover-border); }
+input[type=text]:hover:not(:disabled), input[type=number]:hover:not(:disabled), input[type=search]:hover, select:hover:not(:disabled) { border-color: var(--btn-hover-border); }
 input[type=text]:focus, input[type=search]:focus, select:focus { border-color: var(--focus); }
 input[type=text]:disabled, select:disabled { background-color: var(--surface-2); color: var(--faint); cursor: not-allowed; }
 input.invalid { border-color: var(--fail); }