sideby 0.12.1 → 0.13.0

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

@@ -1,6 +1,6 @@
 // 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, attentionWhy, cacheHitRate, formatDuration, handoffChangeOf, handoffHintAccount, 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, loginClusters, loginKey, maskEmail, matchesQuery, mergeDaily, newAccountDir, nextReset, panelHint, panelLang, passedWindow, quotaPressure, remoteControlSummary, remoteControlTodo, sortAccounts, suggestAlias, suggestName, updatedAge, windowState, } from './page-logic.js';
 const LOGIC = [
     aliasArgsOf,
     aliasIssue,
@@ -10,6 +10,8 @@ const LOGIC = [
     formatDuration,
     handoffChangeOf,
     handoffHintAccount,
+    loginClusters,
+    loginKey,
     maskEmail,
     matchesQuery,
     mergeDaily,
@@ -19,6 +21,8 @@ const LOGIC = [
     panelLang,
     passedWindow,
     quotaPressure,
+    remoteControlSummary,
+    remoteControlTodo,
     sortAccounts,
     suggestAlias,
     suggestName,
@@ -53,7 +57,7 @@ const MAIN = String.raw `
     silent: false, lastTry: 0, pending: false, fastUntil: 0, fastFamily: null,
   }
   // View state that is not saved: the search text, the attention filter, the Health check filter.
-  const ui = { query: '', attention: false, allFindings: false, healthRef: null, checkingRef: null, desktopRef: null, appBusy: null, appRemove: null, appNew: null, highlight: null, fade: true }
+  const ui = { query: '', attention: false, allFindings: false, healthRef: null, checkingRef: null, desktopRef: null, browserRef: null, appBusy: null, appRemove: null, appNew: null, highlight: null, fade: true, loginRefs: new Set() }
   const $ = (id) => document.getElementById(id)
 
   // ---------- preferences ----------
@@ -65,7 +69,7 @@ const MAIN = String.raw `
   function loadPrefs() {
     let raw = {}
     try { raw = JSON.parse(localStorage.getItem(PREFS_KEY) || '{}') || {} } catch {}
-    const p = { view: 'list', sort: 'pressure', quota: 'used', theme: 'system', lang: '', family: '', collapsed: {}, rows: {}, hideEmail: false }
+    const p = { view: 'list', sort: 'pressure', quota: 'used', theme: 'system', lang: '', family: '', collapsed: {}, open: {}, 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
@@ -73,8 +77,8 @@ const MAIN = String.raw `
     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
-    if (raw.rows && typeof raw.rows === 'object')
-      for (const k of Object.keys(raw.rows)) if (raw.rows[k] === true) p.rows[k] = true
+    if (raw.open && typeof raw.open === 'object')
+      for (const k of Object.keys(raw.open)) if (raw.open[k] === true) p.open[k] = true
     return p
   }
   function savePrefs() { try { localStorage.setItem(PREFS_KEY, JSON.stringify(prefs)) } catch {} }
@@ -229,6 +233,8 @@ const MAIN = String.raw `
   // Whether the viewer is in the middle of something a background render would disturb: an open menu, dialog or
   // tooltip, a focused field, or a text selection in the account list.
   function uiBusy() {
+    // A row or group in the middle of folding; a render now would cut the motion short.
+    for (const el of folding) if (el.isConnected) return true
     if (menu.el || (dlg.el && dlg.el.open) || document.querySelector('.tip.is-open')) return true
     // A plan on the Auto Handoff page, and the change a person opened to read, stay as they are.
     if (!$('handoff-page').hidden && (hp.preview || hp.askSame || document.querySelector('#handoff-page details[open]'))) return true
@@ -247,6 +253,8 @@ const MAIN = String.raw `
     sun: 'M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4',
     moon: 'M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z',
     monitor: 'M3 5h18v11H3zM8 20h8M12 16v4',
+    // Lucide "settings" (ISC license)
+    gear: 'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
     copy: 'M9 9h11v11H9zM5 15H4V4h11v1',
     terminal: 'M4 17l6-5-6-5M12 19h8',
     key: 'M15 9a3 3 0 1 0-.01 0M12.9 11.1L4 20M7 17l2 2M9.5 14.5l2 2',
@@ -258,8 +266,10 @@ const MAIN = String.raw `
     bot: 'M6 9h12a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2zM12 5v4M9.5 13.5v1M14.5 13.5v1',
     grid: 'M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z',
     list: 'M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01',
+    sliders: 'M4 7h10M18 7h2M4 17h4M12 17h8M16 5v4M10 15v4',
     clock: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 7v5l3 2',
     mail: 'M3 6h18v12H3zM3 7l9 6 9-6',
+    globe: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.5-3.8-9S9.5 5.5 12 3z',
     eye: 'M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
     eyeOff: 'M3 3l18 18M10.6 5.1A10.8 10.8 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2M6.6 6.6A17.4 17.4 0 0 0 2 12s3.5 7 10 7a10.4 10.4 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2',
   }
@@ -526,29 +536,51 @@ const MAIN = String.raw `
   document.addEventListener('focusin', (e) => { if (e.target.classList && e.target.classList.contains('tip-btn')) showTip(e.target) })
   document.addEventListener('focusout', (e) => { if (e.target.classList && e.target.classList.contains('tip-btn')) hideTip(e.target) })
 
-  // ---------- row menu ----------
-  const menu = { el: null, anchor: null }
-  function openMenu(anchor, items, label) {
+  // ---------- floating panels: menus and popovers ----------
+  // One shared base for everything that floats next to a button: it is placed under (or above) its anchor, kept
+  // inside the window, closed by a click outside, Escape, a resize or a scroll, and only one is open at a time.
+  // openMenu() fills it with menu items; openPopover() with any content that render() returns (re-run by refreshPopover()).
+  const menu = { el: null, anchor: null, kind: null, render: null }
+  function openFloat(anchor, el, kind, align) {
     closeMenu()
-    const el = h('div', { class: 'menu', role: 'menu', 'aria-label': label },
-      items.filter(Boolean).map((it) => it === '-' ? h('div', { class: 'menu-sep', role: 'separator' })
-        : h('button', { class: 'menu-item', type: 'button', role: 'menuitem', tabindex: '-1', disabled: it.disabled, onclick: () => { closeMenu(true); it.run() } },
-          icon(it.icon), h('span', { class: 'menu-label' }, it.label), it.hint ? h('code', { class: 'menu-hint', title: it.hint }, it.hint.length > 24 ? '…' + it.hint.slice(-23) : it.hint) : null)))
-    el.addEventListener('keydown', menuKeys)
     document.body.append(el)
     const r = anchor.getBoundingClientRect()
     const w = el.offsetWidth
     const hgt = el.offsetHeight
-    const left = Math.max(8, Math.min(window.innerWidth - w - 8, r.right - w))
+    const x = align === 'start' ? r.left : r.right - w
+    const left = Math.max(8, Math.min(window.innerWidth - w - 8, x))
     const top = r.bottom + 4 + hgt > window.innerHeight - 8 && r.top - hgt - 4 > 8 ? r.top - hgt - 4 : r.bottom + 4
     el.style.setProperty('left', left + 'px')
     el.style.setProperty('top', top + 'px')
     anchor.setAttribute('aria-expanded', 'true')
     menu.el = el
     menu.anchor = anchor
+    menu.kind = kind
+  }
+  function openMenu(anchor, items, label) {
+    const el = h('div', { class: 'menu', role: 'menu', 'aria-label': label },
+      items.filter(Boolean).map((it) => it === '-' ? h('div', { class: 'menu-sep', role: 'separator' })
+        : h('button', { class: 'menu-item', type: 'button', role: 'menuitem', tabindex: '-1', disabled: it.disabled, onclick: () => { closeMenu(true); it.run() } },
+          icon(it.icon), h('span', { class: 'menu-label' }, it.label), it.hint ? h('code', { class: 'menu-hint', title: it.hint }, it.hint.length > 24 ? '…' + it.hint.slice(-23) : it.hint) : null)))
+    el.addEventListener('keydown', menuKeys)
+    openFloat(anchor, el, 'menu', 'end')
     const first = el.querySelector('.menu-item:not(:disabled)')
     if (first) first.focus()
   }
+  // A popover: a small panel of text and buttons, lighter than a dialog. A second click on its anchor closes it.
+  function openPopover(anchor, kind, label, render, align = 'start') {
+    if (menu.anchor === anchor) { closeMenu(true); return }
+    const el = h('div', { class: 'menu popover', role: 'dialog', 'aria-label': label })
+    el.addEventListener('keydown', (e) => { if (e.key === 'Escape') { e.preventDefault(); closeMenu(true) } })
+    setKids(el, render())
+    openFloat(anchor, el, kind, align)
+    menu.render = render
+    const first = el.querySelector('button:not(:disabled), a[href]')
+    if (first) first.focus()
+  }
+  function refreshPopover(kind) {
+    if (menu.el && menu.kind === kind && menu.render) setKids(menu.el, menu.render())
+  }
   function closeMenu(restore) {
     if (!menu.el) return
     menu.el.remove()
@@ -556,6 +588,8 @@ const MAIN = String.raw `
     if (restore && menu.anchor.isConnected) menu.anchor.focus()
     menu.el = null
     menu.anchor = null
+    menu.kind = null
+    menu.render = null
   }
   function menuKeys(e) {
     const items = Array.from(menu.el.querySelectorAll('.menu-item:not(:disabled)'))
@@ -579,6 +613,7 @@ const MAIN = String.raw `
       { icon: 'terminal', label: t('menu.copyRun'), hint: run, run: () => copyText(run) },
       ...(a.aliases || []).slice(0, 2).map((x) => ({ icon: 'terminal', label: t('menu.copyAlias'), hint: x, run: () => copyText(x) })),
       a.desktopApp && a.desktopApp.installed && a.kind !== 'api' && !BOOT.readOnly ? { icon: 'terminal', label: t(a.desktopApp.running ? 'desk.show' : 'desk.open', { app: a.desktopApp.app }), disabled: Boolean(ui.desktopRef), run: () => openDesktop(a) } : null,
+      browserFor(a) ? { icon: 'terminal', label: t('br.open'), disabled: Boolean(ui.browserRef), run: () => openBrowserDialog(a) } : null,
       a.kind !== 'api' ? { icon: 'key', label: t('menu.copyLogin'), hint: 'sideby login ' + a.ref, run: () => copyText('sideby login ' + a.ref) } : null,
       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,
@@ -620,20 +655,29 @@ const MAIN = String.raw `
   }
   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 whyOf(a, now) {
+    const m = attentionWhy(a, healthOf(a.ref), now, WARN)
+    if (m && m.key === 'why.not-installed' && family(a.family).brokenBin) return t('why.broken')
+    return m ? t(m.key, m.vars) : ''
+  }
   function setupFor(fam) { return S.state && S.state.quotaSetups.find((s) => s.family === fam) }
 
   // ---------- header and summary ----------
   function renderUpdated() {
     const busy = S.loading && !S.silent
-    const text = S.loading && !S.state ? t('top.loading') : busy ? t('top.refreshing') : S.loadedAt ? t('top.updated', { ago: agoShort(Date.now() - S.loadedAt) }) : ''
+    const every = Math.round((S.fastUntil > Date.now() ? FAST_MS : AUTO_MS) / 1000)
+    const text = S.loading && !S.state ? t('top.loading') : busy ? t('top.refreshing') : S.loadedAt ? t('top.updated', { ago: agoShort(Date.now() - S.loadedAt), s: every }) : ''
     const el = $('updated')
     if (el.textContent !== text) el.textContent = text
-    el.title = S.loadedAt ? t('top.updatedTitle', { at: clock(new Date(S.loadedAt).toISOString()), s: Math.round((S.fastUntil > Date.now() ? FAST_MS : AUTO_MS) / 1000) }) : ''
+    // A dot says whether the numbers are live: green while they refresh on their own, amber when they stopped.
+    const stale = conn.lost || Boolean(S.loadError)
+    el.classList.toggle('is-live', Boolean(S.loadedAt) && !stale)
+    el.classList.toggle('is-stale', Boolean(S.loadedAt) && stale)
+    el.title = !S.loadedAt ? '' : (stale ? t('top.stale') + ' ' : '') + t('top.updatedTitle', { at: clock(new Date(S.loadedAt).toISOString()), s: Math.round((S.fastUntil > Date.now() ? FAST_MS : AUTO_MS) / 1000) })
   }
   function renderTop() {
     renderUpdated()
-    renderHandoffButton()
+    renderSettingsButton()
     renderUpdateButton()
     const u = updState()
     $('foot-text').textContent = t(u && !u.checksOff ? 'foot.textChecks' : 'foot.text')
@@ -648,16 +692,7 @@ const MAIN = String.raw `
     document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en'
     for (const el of document.querySelectorAll('[data-i18n]')) el.textContent = t(el.getAttribute('data-i18n'))
     $('refresh').setAttribute('aria-label', t('top.refresh'))
-    const lb = $('lang')
-    lb.hidden = LANG_FIXED
-    lb.textContent = lang === 'zh' ? 'EN' : '中文'
-    lb.setAttribute('aria-label', t('top.language'))
-    lb.title = t('top.language')
-    const tb = $('theme')
-    tb.hidden = BOOT.colorScheme !== 'auto'
-    setKids(tb, icon(prefs.theme === 'light' ? 'sun' : prefs.theme === 'dark' ? 'moon' : 'monitor'))
-    tb.title = t('theme.' + prefs.theme)
-    tb.setAttribute('aria-label', t('theme.' + prefs.theme))
+    renderSettingsButton()
   }
   function applyTheme() {
     if (BOOT.colorScheme !== 'auto') return
@@ -744,34 +779,30 @@ const MAIN = String.raw `
       CHOICES.sort.map((v) => h('option', { value: v }, t('sort.' + v))))
     tb.sort.value = prefs.sort
     tb.sort.addEventListener('change', () => { prefs.sort = tb.sort.value; savePrefs(); renderAccounts() })
-    const quota = seg(t('tb.quota'), [['used', t('tb.used')], ['left', t('tb.left')]], prefs.quota, (v) => { prefs.quota = v; savePrefs(); renderAccounts() })
-    const view = seg(t('tb.view'), [['list', icon('list'), t('tb.list')], ['cards', icon('grid'), t('tb.cards')]], prefs.view, (v) => { prefs.view = v; savePrefs(); ui.fade = true; renderAccounts() })
-    tb.hideEmail = h('button', { class: 'icon-btn tb-icon', type: 'button', 'aria-pressed': String(prefs.hideEmail), onclick: () => {
-      prefs.hideEmail = !prefs.hideEmail
-      savePrefs()
-      renderEmailToggle()
-      renderAccounts()
-    } })
+    const display = h('button', { class: 'btn tb-display', type: 'button', 'aria-haspopup': 'dialog', 'aria-expanded': 'false', title: t('tb.display') }, icon('sliders'), h('span', null, t('tb.display')))
+    display.addEventListener('click', () => openPopover(display, 'display', t('tb.display'), displayPanel, 'end'))
     const create = BOOT.readOnly ? null : h('button', { class: 'btn btn-primary', type: 'button', 'aria-label': t('tb.new'), onclick: () => openCreate(null) }, icon('plus'), h('span', null, t('tb.new')))
     setKids($('toolbar'), [
       h('label', { class: 'search' }, icon('search', 'search-ic'), tb.search, h('kbd', { class: 'kbd', 'aria-hidden': 'true' }, '/')),
-      h('div', { class: 'tools' }, tb.family, tb.sort, quota, view, tb.hideEmail),
+      h('div', { class: 'tools' }, tb.family, tb.sort, display),
       create,
     ])
     renderFamilyFilter()
-    renderEmailToggle()
     if (hadFocus) tb.search.focus()
   }
-  // "Hide emails": shown once any account has one; its icon and label say what a click does.
-  function renderEmailToggle() {
-    const b = tb.hideEmail
-    if (!b) return
-    b.hidden = !(S.state && S.state.accounts.some((a) => a.identity && a.identity.email))
-    b.setAttribute('aria-pressed', String(prefs.hideEmail))
-    const label = t(prefs.hideEmail ? 'tb.showEmails' : 'tb.hideEmails')
-    b.setAttribute('aria-label', label)
-    b.title = label
-    setKids(b, icon(prefs.hideEmail ? 'eyeOff' : 'eye'))
+  // "Display": the view settings people change rarely, one popover instead of three buttons in the toolbar.
+  // "Hide emails" shows once any account has one.
+  function displayPanel() {
+    const redo = () => { savePrefs(); renderAccounts(); refreshPopover('display') }
+    const emails = S.state && S.state.accounts.some((a) => a.identity && a.identity.email)
+    return h('div', { class: 'display-panel' },
+      h('div', { class: 'dp-row' }, h('span', { class: 'dp-label' }, t('tb.quota')),
+        seg(t('tb.quota'), [['used', t('tb.used')], ['left', t('tb.left')]], prefs.quota, (v) => { prefs.quota = v; redo() })),
+      h('div', { class: 'dp-row' }, h('span', { class: 'dp-label' }, t('tb.view')),
+        seg(t('tb.view'), [['list', icon('list'), t('tb.list')], ['cards', icon('grid'), t('tb.cards')]], prefs.view, (v) => { prefs.view = v; ui.fade = true; redo() })),
+      emails ? h('label', { class: 'dp-row dp-check' },
+        h('input', { type: 'checkbox', checked: prefs.hideEmail, onchange: (e) => { prefs.hideEmail = e.target.checked; redo() } }),
+        h('span', null, t('tb.hideEmails'))) : null)
   }
   function renderFamilyFilter() {
     if (!tb.family) return
@@ -839,14 +870,16 @@ const MAIN = String.raw `
     const text = { 'no-session': 'quota.noSession', 'no-source': 'quota.noSource', unrecognized: 'quota.unrecognized' }[q.reason]
     return h('div', { class: 'q-note', title: q.reason === 'no-session' ? t('quota.noSessionHint') : q.detail || null }, text ? t(text) : t('quota.unavailable', { reason: q.reason }))
   }
-  function quotaBlock(a, now, cols) {
+  // readFrom: the Account a login group's head shows the quota of, named on hover instead of "same login as".
+  function quotaBlock(a, now, cols, readFrom) {
     const q = a.quota
     if (!q) return h('div', { class: 'quota' }, h('div', { class: 'q-note' }, '—'))
     if (q.status !== 'ok') return h('div', { class: 'quota' }, quotaNote(a, q))
     const stale = isStale(q.observedAt, now)
     const wins = q.windows || []
     // A reading borrowed from another Account of the same login says where it came from (spec §3.21).
-    const from = q.from ? t('quota.sharedFrom', { name: refName(q.from), ago: ago(q.observedAt) }) : null
+    const from = readFrom ? t('quota.readFrom', { name: refName(readFrom), ago: ago(q.observedAt) })
+      : q.from ? t('quota.sharedFrom', { name: refName(q.from), ago: ago(q.observedAt) }) : null
     return h('div', { class: 'quota' + (stale ? ' is-stale' : ''), title: from || (stale ? null : t('quota.dataFrom', { ago: ago(q.observedAt) })) },
       wins.length ? cols.map((c) => {
         const w = wins.find((x) => x.label === c)
@@ -886,34 +919,43 @@ const MAIN = String.raw `
     return h('button', { class: 'chip chip-btn health' + (lvl ? ' chip-' + lvl : ''), type: 'button', title: t('health.filterHint'), 'aria-label': t('health.chipLabel', { ref: a.ref, status: text }), onclick: () => filterHealth(a.ref) },
       h('span', { class: 'dot' + (lvl ? ' dot-' + lvl : ''), 'aria-hidden': 'true' }), text)
   }
+  // A dot after the name when the account needs a look that no tag shows: a fuller quota window or a Health
+  // finding. Its reason is on hover; the details say more.
+  // Inside a login group the quota warning is the head's, so a row's dot is only about the row itself.
+  function attentionDot(a) {
+    const subject = inLogin(a) ? Object.assign({}, a, { quota: undefined }) : a
+    const r = reasonsOf(subject, Date.now())
+    const lvl = r.includes('health-fail') ? 'fail' : r.includes('quota-high') || r.includes('health-warn') ? 'warn' : ''
+    if (!lvl) return null
+    const why = whyOf(subject, Date.now())
+    return h('span', { class: 'dot dot-' + lvl + ' att-dot', title: why, role: 'img', 'aria-label': why })
+  }
   function nameLine(a) {
     return h('div', { class: 'ident-name' },
       h('span', { class: 'name', title: a.name }, a.name),
+      attentionDot(a),
       (a.aliases || []).slice(0, 3).map((x) => {
         const args = aliasArgsOf(a, x)
         return h('span', { class: 'tag tag-alias', title: args ? t('acct.aliasArgs', { args: args.join(' ') }) : t('acct.alias') }, x)
       }),
       a.kind === 'api' ? h('span', { class: 'tag tag-warn', title: t('tip.api.body') }, t('acct.api')) : null,
-      a.sameLogin && a.sameLogin.length
-        ? h('span', { class: 'tag', title: t('acct.sameLoginHint', { names: a.sameLogin.map(refName).join(', ') }) }, t('acct.sameLogin', { names: a.sameLogin.map(refName).join(', ') }))
-        : null,
       isNext(a)
         ? h('button', { class: 'tag tag-ok tag-btn', type: 'button', title: t('acct.nextHint', { family: a.family }), 'aria-label': t('acct.nextLabel', { ref: a.ref, family: a.family }), onclick: () => copyText('sideby next ' + a.family) }, t('acct.next'))
         : null,
       a.login === 'logged-out' && a.kind !== 'api'
         ? h('button', { class: 'tag tag-fail tag-btn', type: 'button', title: t('acct.signInHint'), 'aria-label': t('acct.signedOutLabel', { ref: a.ref }), onclick: () => copyText('sideby login ' + a.ref) }, h('span', { class: 'dot dot-fail', 'aria-hidden': 'true' }), t('acct.signedOut'))
         : null,
-      a.hostInstalled === false ? h('span', { class: 'tag tag-warn' }, t('acct.notInstalled')) : null)
+      a.hostInstalled === false ? h('span', { class: 'tag tag-warn' }, t(family(a.family).brokenBin ? 'acct.broken' : 'acct.notInstalled')) : null)
   }
   // The name part of a ref (claude:001 gives 001), as rows show other Accounts of the same Family.
   function refName(ref) { return String(ref).slice(String(ref).indexOf(':') + 1) }
   // Who the account is signed in as, under its name; masked while "Hide emails" is on.
   function emailLine(a) {
     const id = a.identity
-    if (!id || (!id.email && !id.org)) return null
+    if (!id || (!id.email && !browserButton(a))) return null
     const email = id.email ? emailText(id.email) : ''
     return h('div', { class: 'ident-email', title: [email, id.org].filter(Boolean).join(' · ') },
-      dots([email ? h('button', { class: 'email email-btn', type: 'button', title: t('menu.copyEmail'), 'aria-label': t('menu.copyEmail') + ' ' + email, onclick: (e) => { e.stopPropagation(); copyText(id.email) } }, email) : null, id.org ? h('span', { class: 'org' }, id.org) : null]))
+      dots([email ? h('button', { class: 'email email-btn', type: 'button', title: t('menu.copyEmail'), 'aria-label': t('menu.copyEmail') + ' ' + email, onclick: (e) => { e.stopPropagation(); copyText(id.email) } }, email) : null, browserButton(a)]))
   }
   function subLine(a) {
     const plan = a.quota && a.quota.status === 'ok' && a.quota.plan
@@ -922,19 +964,8 @@ const MAIN = String.raw `
       a.kind === 'api' && a.model ? h('span', { class: 'mono', title: t('acct.model') }, a.model) : null,
       a.kind !== 'api' ? modelChip(a) : null,
       a.kind !== 'api' && plan ? h('span', { class: 'plan' }, plan) : null,
-      desktopButton(a),
     ]))
   }
-  // The family's desktop app as this account (spec §3.20): only where it is installed, never for API accounts or a
-  // read-only panel. A running window shows as "open"; the click brings it to the front instead of a second one.
-  function desktopButton(a) {
-    const d = a.desktopApp
-    if (!d || !d.installed || a.kind === 'api' || BOOT.readOnly) return null
-    const busy = ui.desktopRef === a.ref
-    const label = busy ? t('desk.opening', { app: d.app }) : t(d.running ? 'desk.show' : 'desk.open', { app: d.app })
-    return h('button', { class: 'tag tag-btn' + (d.running ? ' tag-ok' : ''), type: 'button', disabled: busy, title: t(d.running ? 'desk.showHint' : 'desk.openHint', { app: d.app, ref: a.ref }), 'aria-label': label + ' (' + a.ref + ')', onclick: (e) => { e.stopPropagation(); openDesktop(a) } },
-      d.running ? h('span', { class: 'dot dot-ok', 'aria-hidden': 'true' }) : null, label)
-  }
   async function openDesktop(a) {
     if (ui.desktopRef) return
     ui.desktopRef = a.ref
@@ -950,91 +981,326 @@ const MAIN = String.raw `
     renderAccounts()
     load({ silent: true })
   }
+  // Browser Sign-ins (spec §3.24): which Chrome browser user signed in to the account's website, read on this
+  // computer only. Off: the button explains what turning it on reads. On: it names the browser user, and opens it.
+  const BR_URL = { claude: 'claude.ai', codex: 'chatgpt.com', grok: 'grok.com' }
+  function browserInfo() { return S.state && S.state.browser }
+  function browserFor(a) {
+    const b = browserInfo()
+    if (!b || a.kind === 'api' || BOOT.readOnly) return null
+    if (!b.families.matched.includes(a.family) && !b.families.openOnly.includes(a.family)) return null
+    return { b, found: b.enabled ? b.profiles.filter((p) => p.signIns.includes(a.ref)) : [] }
+  }
+  // A browser user's name may be an email; it hides with the others.
+  function profileName(name) { return String(name).includes('@') ? emailText(name) : name }
+  // A browser user shows as the Google account it uses in Chrome, else its name. Two that would show the same get
+  // their folder after it.
+  function profileLabel(p) {
+    const b = browserInfo()
+    const full = (b && b.profiles.find((o) => o.dir === p.dir)) || p
+    const key = (x) => x.email || x.name
+    const twin = b && b.profiles.some((o) => o.dir !== full.dir && key(o) === key(full))
+    return (full.email ? emailText(full.email) : profileName(full.name)) + (twin ? ' (' + full.dir + ')' : '')
+  }
+  function browserButton(a) {
+    const info = browserFor(a)
+    if (!info) return null
+    const busy = ui.browserRef === a.ref
+    const first = info.found[0]
+    if (!first) return null
+    const label = t(info.found.length > 1 ? 'br.signedInMore' : 'br.signedIn', { name: profileLabel(first), n: info.found.length })
+    return h('button', { class: 'email-btn br-btn', type: 'button', disabled: busy, title: t('br.hint', { url: BR_URL[a.family], ref: a.ref }), 'aria-label': 'Chrome ' + label + ' (' + a.ref + ')', onclick: (e) => { e.stopPropagation(); if (info.found.length === 1) openBrowser(a, first); else openBrowserDialog(a) } },
+      busy ? spinner() : icon('globe', 'br-ico'), label)
+  }
+  async function openBrowser(a, p) {
+    if (ui.browserRef) return
+    ui.browserRef = a.ref
+    renderAccounts()
+    if (dlg.kind === 'browser') renderBrowser()
+    try {
+      const r = await api('/api/browser/open', { account: a.ref, profile: p.dir })
+      toast(t('br.opened', { url: r.url.replace(/^https:\/\//, ''), name: profileLabel(r.profile) }))
+      if (dlg.kind === 'browser') dlg.el.close()
+    } catch (e) { toast(t('br.failed', { ref: a.ref, msg: e.message }), { kind: 'fail' }) }
+    ui.browserRef = null
+    renderAccounts()
+    if (dlg.kind === 'browser') renderBrowser()
+  }
+  let br = null
+  function openBrowserDialog(a) {
+    br = { ref: a.ref, busy: false, error: null }
+    showDialog('browser')
+    // Rows skip background renders while a dialog is open; turning the finding on changes what they show.
+    dlg.onClose = () => renderAccounts()
+    renderBrowser()
+  }
+  async function brSwitch(on) {
+    br.busy = true
+    dlg.busy = true
+    br.error = null
+    renderBrowser()
+    try {
+      await api('/api/browser/settings', { enabled: on, confirm: true })
+      toast(t(on ? 'br.enabled' : 'br.disabled'))
+      await load({ silent: true })
+    } catch (e) { br.error = e }
+    br.busy = false
+    dlg.busy = false
+    if (!on && !br.error) { dlg.el.close(); return }
+    renderBrowser()
+  }
+  function brProfileRow(a, p) {
+    const busy = ui.browserRef === a.ref
+    return h('li', { class: 'br-row' },
+      h('span', null, h('b', null, profileName(p.name)), p.email ? h('span', { class: 'muted small' }, ' · ' + emailText(p.email)) : null, ' ', h('span', { class: 'muted small mono' }, p.dir), p.changedAt ? h('span', { class: 'muted small' }, ' · ' + t('br.changed', { when: ago(p.changedAt) })) : null),
+      h('button', { class: 'btn btn-sm', type: 'button', disabled: Boolean(ui.browserRef), 'aria-busy': busy ? 'true' : null, onclick: () => openBrowser(a, p) }, t('br.openIt')))
+  }
+  function renderBrowser() {
+    if (!br || dlg.kind !== 'browser') return
+    const a = S.state && S.state.accounts.find((x) => x.ref === br.ref)
+    const info = a && browserFor(a)
+    if (!info) { dlg.el.close(); return }
+    const url = BR_URL[a.family]
+    const body = []
+    const foot = [h('button', { class: 'btn', type: 'button', disabled: br.busy, onclick: () => dlg.el.close() }, t('btn.close'))]
+    if (!info.b.enabled) {
+      body.push(h('p', null, t('br.offIntro', { ref: a.ref, url })))
+      body.push(h('p', { class: 'small' }, t('br.reads')), h('ul', { class: 'small' }, ['br.read1', 'br.read2', 'br.read3'].map((k) => h('li', null, t(k)))))
+      body.push(h('p', { class: 'muted small' }, t('br.never')))
+      foot.push(h('button', { class: 'btn btn-primary', type: 'button', disabled: br.busy, 'aria-busy': br.busy ? 'true' : null, onclick: () => brSwitch(true) }, br.busy ? spinner() : null, t('br.enable')))
+    } else if (!info.b.found) {
+      body.push(h('p', { class: 'note' }, t('br.noChrome')))
+    } else {
+      const others = info.b.profiles.filter((p) => !info.found.includes(p))
+      if (info.found.length) body.push(h('p', { class: 'small' }, t('br.found', { ref: a.ref })), h('ul', { class: 'br-list' }, info.found.map((p) => brProfileRow(a, p))))
+      else body.push(h('p', { class: 'muted small' }, t(info.b.families.matched.includes(a.family) ? 'br.none' : 'br.noMatch', { ref: a.ref, url })))
+      if (others.length) body.push(h('p', { class: 'small' }, t(info.found.length ? 'br.others' : 'br.all')), h('ul', { class: 'br-list' }, others.map((p) => brProfileRow(a, p))))
+      body.push(h('p', { class: 'muted small' }, t('br.local')))
+      foot.unshift(h('button', { class: 'btn', type: 'button', disabled: br.busy, onclick: () => brSwitch(false) }, t('br.disable')))
+    }
+    if (br.error) body.push(errorNote(br.error, null))
+    setKids(dlg.el, dialogFrame(t('br.title') + ' · ' + a.ref, a.family, body, foot))
+  }
+  // How to get a Host that cannot run: the sentence, then on its own line the install command to copy (with the
+  // install page next to it) when the Family has one; without a command the sentence ends with the page's link.
+  function hostNote(fam) {
+    const cmdLine = () => h('div', { class: 'note-line note-cmd' }, codeCopy(fam.installCommand), link(t('acct.installDocs'), fam.installUrl))
+    if (fam.brokenBin) {
+      const text = tx('acct.brokenHost', { host: fam.title, path: h('code', null, fam.brokenBin) })
+      return fam.installCommand ? [h('div', { class: 'note-line' }, text), cmdLine()] : [h('div', { class: 'note-line' }, text, ' ', link(t('acct.installIt'), fam.installUrl) || '')]
+    }
+    if (fam.installCommand) return [h('div', { class: 'note-line' }, tx('acct.installHostCmd', { host: fam.title })), cmdLine()]
+    return tx('acct.installHost', { host: fam.title, link: link(t('acct.installIt'), fam.installUrl) || '' })
+  }
   function notes(a) {
     const fam = family(a.family)
     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)))
+    if (a.hostInstalled === false) out.push(h('div', { class: 'note note-warn' }, hostNote(fam)))
     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
   // fingerprint covers what its click handlers use.
-  function rowSig(a) { return sig([a, healthOf(a.ref), isNext(a), ui.desktopRef === a.ref, folded(a)]) }
-  // Each account can be folded to one line (its name) and opened again, like a family group; the choice is kept in
-  // this browser's preferences.
-  function folded(a) { return prefs.rows[a.ref] === true }
+  function rowSig(a) { return sig([a, healthOf(a.ref), isNext(a), ui.desktopRef === a.ref, ui.browserRef === a.ref, browserFor(a), prefs.hideEmail, isOpen(a), inLogin(a)]) }
+  // Whether the row sits in a login group (spec §3.21): the group's head then shows the email and the quota.
+  function inLogin(a) { return ui.loginRefs.has(a.ref) }
+  function rowEmail(a) { return inLogin(a) ? null : emailLine(a) }
+  // A row shows who the account is, its quota and its last use; a click opens the details under it (model, tokens,
+  // Health) and closes them again. The choice is kept in this browser's preferences.
+  function isOpen(a) { return prefs.open[a.ref] === true }
   function rowToggle(a) {
-    const open = !folded(a)
+    const open = isOpen(a)
     const label = t(open ? 'row.collapse' : 'row.expand', { name: a.name })
     return h('button', { class: 'icon-btn row-toggle', type: 'button', 'aria-expanded': String(open), 'aria-label': label, title: label, onclick: (e) => { e.stopPropagation(); toggleRow(a) } }, icon('chevron', 'chev'))
   }
   // The whole account cell (and a folded row anywhere) folds and opens it, not only the arrow; the buttons and links
   // inside keep their own action, and a click that ends a text selection does nothing.
-  function foldClick(a) {
+  // A click folds the row unless it ended a drag that selects text; a selection left from before does not block it.
+  let downAt = null
+  document.addEventListener('pointerdown', (e) => { downAt = { x: e.clientX, y: e.clientY } }, true)
+  // A double click would select a word under the pointer as well as fold the row twice; keep the word unselected.
+  document.addEventListener('mousedown', (e) => {
+    if (e.detail > 1 && e.target.closest && e.target.closest('.fold-hit') && !e.target.closest('input, select, textarea')) e.preventDefault()
+  })
+  function foldClick(a) { return foldHit(() => toggleRow(a)) }
+  function foldHit(run) {
     return (e) => {
       if (e.target.closest('button, a, input, select, textarea, .tip')) return
-      if (window.getSelection && String(window.getSelection())) return
-      toggleRow(a)
+      const dragged = downAt && Math.hypot(e.clientX - downAt.x, e.clientY - downAt.y) > 4
+      if (dragged && window.getSelection && String(window.getSelection())) return
+      run()
     }
   }
-  // Folding animates: the details fade out, then the row's height eases to one line; opening eases the height out
-  // and fades the details in. The arrow turns with it. Reduced motion just switches.
+  // Folding animates: the height eases while the details fade and the arrow turns. A click during the motion turns
+  // it around from where it is. Reduced motion just switches.
   const EASE = 'cubic-bezier(.2, 0, 0, 1)'
-  function rowDetails(el) { return Array.from(el.querySelectorAll(':scope > :not(.ident):not(.more):not(.card-head), .ident-email, .ident-sub')) }
+  const FOLD_MS = 220
+  const folding = new Set()
+  function rowDetails(el) { return Array.from(el.querySelectorAll(':scope > .row-detail')) }
+  function moving() { return !(REDUCED || document.hidden || !Element.prototype.animate) }
+  // Eases el's height from 'from' to its current height (measured with the 'hide' parts out of the layout),
+  // fading 'parts' toward 'opacity'; 'done' runs at the end unless a newer fold took over.
+  function ease(el, from, hide, parts, opacity, done) {
+    const run = el._fold
+    const fades = parts.map((p) => +getComputedStyle(p).opacity)
+    if (run) run.cancel()
+    for (const p of hide) p.style.display = 'none'
+    const to = el.getBoundingClientRect().height
+    for (const p of hide) p.style.display = ''
+    el.style.overflow = 'hidden'
+    const anims = [el.animate([{ height: from + 'px' }, { height: to + 'px' }], { duration: FOLD_MS, easing: EASE })]
+    parts.forEach((p, i) => anims.push(p.animate([{ opacity: fades[i] }, { opacity }], { duration: FOLD_MS, easing: 'ease-out', fill: 'forwards' })))
+    const me = { cancel: () => { for (const x of anims) x.cancel() } }
+    el._fold = me
+    folding.add(el)
+    anims[0].finished.then(() => {
+      if (el._fold !== me) return
+      el._fold = null
+      folding.delete(el)
+      el.style.overflow = ''
+      me.cancel()
+      done()
+    }, () => {})
+  }
+  // A row folds in place: only its arrow, class and details change, so the rest of the list is left alone.
   function toggleRow(a) {
-    const closing = !folded(a)
-    const find = () => document.querySelector('[data-ref="' + CSS.escape(a.ref) + '"]')
-    const apply = () => {
-      if (closing) prefs.rows[a.ref] = true; else delete prefs.rows[a.ref]
-      savePrefs()
-      renderAccounts()
+    const open = !isOpen(a)
+    if (open) prefs.open[a.ref] = true; else delete prefs.open[a.ref]
+    savePrefs()
+    const el = document.querySelector('#accounts [data-ref="' + CSS.escape(a.ref) + '"]')
+    if (!el) { renderAccounts(); return }
+    const from = el.getBoundingClientRect().height
+    const btn = el.querySelector('.row-toggle')
+    if (btn) syncAttrs(btn, rowToggle(a))
+    el.classList.toggle('row-open', open)
+    el.dataset.sig = rowSig(a)
+    let detail = rowDetails(el)[0]
+    if (open && !detail) {
+      detail = rowDetail(a, Boolean(rowEmail(a)))
+      const more = el.querySelector(':scope > .more')
+      el.insertBefore(detail, more ? more.nextSibling : null)
+      detail.style.opacity = '0'
     }
-    const old = find()
-    // A hidden page delays animation events; switch at once there too.
-    if (REDUCED || document.hidden || !old || !old.animate) { apply(); return }
-    const from = old.getBoundingClientRect().height
-    const fade = closing ? rowDetails(old).map((d) => d.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 110, easing: 'ease-out', fill: 'forwards' }).finished) : []
-    Promise.all(fade).catch(() => {}).then(() => {
-      apply()
-      const el = find()
-      if (!el) return
-      const to = el.getBoundingClientRect().height
-      el.style.overflow = 'hidden'
-      const done = () => { el.style.overflow = '' }
-      el.animate([{ height: from + 'px' }, { height: to + 'px' }], { duration: 220, easing: EASE }).finished.then(done, done)
-      const chev = el.querySelector('.row-toggle .chev')
-      if (chev) chev.animate([{ transform: closing ? 'rotate(90deg)' : 'rotate(0deg)' }, { transform: closing ? 'rotate(0deg)' : 'rotate(90deg)' }], { duration: 220, easing: EASE })
-      if (!closing) for (const d of rowDetails(el)) d.animate([{ opacity: 0, transform: 'translateY(-4px)' }, { opacity: 1, transform: 'none' }], { duration: 200, delay: 60, easing: 'ease-out', fill: 'backwards' })
-    })
+    if (!detail) return
+    if (!moving()) { if (!open) detail.remove(); return }
+    ease(el, from, open ? [] : [detail], [detail], open ? 1 : 0, () => { if (!open) detail.remove() })
+    detail.style.opacity = ''
+  }
+  function groupParts(el) { return Array.from(el.querySelectorAll(':scope > :not(.group-head)')) }
+  // A group closes on the page as it is and renders when the motion ends; it opens by rendering its body first.
+  function toggleGroup(key, domKey) {
+    const find = () => document.querySelector('#accounts > [data-key="' + CSS.escape(domKey) + '"]')
+    const el = find()
+    const btn = el && el.querySelector('.group-head .group-toggle')
+    const open = btn ? btn.getAttribute('aria-expanded') !== 'true' : prefs.collapsed[key] === true
+    if (open) delete prefs.collapsed[key]; else prefs.collapsed[key] = true
+    savePrefs()
+    if (!el || !moving()) { renderAccounts(); return }
+    const from = el.getBoundingClientRect().height
+    if (!open) {
+      btn.setAttribute('aria-expanded', 'false')
+      const parts = groupParts(el)
+      ease(el, from, parts, parts, 0, renderAccounts)
+      return
+    }
+    // Turned around while closing: the body is still there.
+    if (el._fold) { btn.setAttribute('aria-expanded', 'true'); ease(el, from, [], groupParts(el), 1, renderAccounts); return }
+    renderAccounts()
+    const now = find()
+    if (!now) return
+    const parts = groupParts(now)
+    for (const p of parts) p.style.opacity = '0'
+    const chev = now.querySelector('.group-head .chev')
+    if (chev) chev.animate([{ transform: 'rotate(0deg)' }, { transform: 'rotate(90deg)' }], { duration: FOLD_MS, easing: EASE })
+    ease(now, from, [], parts, 1, () => {})
+    for (const p of parts) p.style.opacity = ''
+  }
+  // A Same Login group folds its directory rows like a family group, and remembers it the same way.
+  function toggleLogin(key) {
+    const find = () => document.querySelector('#accounts .login[data-key="' + CSS.escape(key) + '"]')
+    const el = find()
+    const open = prefs.collapsed[key] === true
+    if (open) delete prefs.collapsed[key]; else prefs.collapsed[key] = true
+    savePrefs()
+    if (!el || !moving()) { renderAccounts(); return }
+    const from = el.getBoundingClientRect().height
+    const rowsOf = (x) => Array.from(x.querySelectorAll(':scope > .login-rows'))
+    if (!open) {
+      const btn = el.querySelector('.login-head .row-toggle')
+      if (btn) btn.setAttribute('aria-expanded', 'false')
+      const parts = rowsOf(el)
+      ease(el, from, parts, parts, 0, renderAccounts)
+      return
+    }
+    renderAccounts()
+    const now = find()
+    if (!now) return
+    const parts = rowsOf(now)
+    for (const p of parts) p.style.opacity = '0'
+    ease(now, from, [], parts, 1, () => {})
+    for (const p of parts) p.style.opacity = ''
   }
   // The Account 'sideby next <family>' would pick; the server ranks it with the CLI's rule (spec §3.13).
   function isNext(a) { return Boolean(S.state && S.state.handoff && S.state.handoff[a.family] === a.ref) }
   function row(a, now, cols) {
-    if (folded(a))
-      return h('div', { class: 'row row-folded fold-hit' + (a.error ? ' row-error' : ''), role: 'listitem', 'data-ref': a.ref, 'data-key': a.ref, 'data-sig': rowSig(a), onclick: foldClick(a) },
-        h('div', { class: 'ident' }, rowToggle(a), badge(a.family, 'sm'), h('div', { class: 'ident-text' }, nameLine(a))),
-        moreButton(a))
-    return h('div', { class: 'row' + (a.error ? ' row-error' : ''), role: 'listitem', 'data-ref': a.ref, 'data-key': a.ref, 'data-sig': rowSig(a) },
-      h('div', { class: 'ident fold-hit', onclick: foldClick(a) }, rowToggle(a), badge(a.family, 'sm'), h('div', { class: 'ident-text' }, nameLine(a), emailLine(a), subLine(a))),
-      quotaBlock(a, now, cols),
-      usageBlock(a),
+    const open = isOpen(a)
+    const email = rowEmail(a)
+    return h('div', { class: 'row fold-hit' + (open ? ' row-open' : '') + (a.error ? ' row-error' : ''), role: 'listitem', 'data-ref': a.ref, 'data-key': a.ref, 'data-sig': rowSig(a), onclick: foldClick(a) },
+      h('div', { class: 'ident' }, rowToggle(a), badge(a.family, 'sm'), h('div', { class: 'ident-text' }, nameLine(a), email || subLine(a),
+        inLogin(a) ? h('span', { class: 'sr-only' }, t('login.sharedAbove')) : null)),
+      inLogin(a) ? null : quotaBlock(a, now, cols),
       lastUsed(a),
-      h('div', { class: 'cell-health' }, healthChip(a)),
       moreButton(a),
+      open ? rowDetail(a, Boolean(email)) : null,
       notes(a))
   }
+  // Directories signed in as one login (spec §3.21): the vendor counts one quota, so the head shows the email and
+  // that quota once, and each directory keeps a row of its own for what is its own (name, model, tokens, Health).
+  function loginGroup(members, now, cols) {
+    const first = members[0]
+    const source = members.find((a) => a.quota && a.quota.status === 'ok' && !a.quota.from) || first
+    const id = first.identity || {}
+    const names = members.map((a) => a.name).join(', ')
+    const hint = t('login.hint', { names })
+    const m = source.quota && source.quota.status === 'ok' ? attentionWhy({ family: source.family, name: source.name, ref: source.ref, quota: source.quota }, null, now, WARN) : null
+    const why = m ? t(m.key, m.vars) : ''
+    const email = id.email ? emailText(id.email) : ''
+    const key = loginKey(members.map((a) => a.ref))
+    const collapsed = prefs.collapsed[key] === true
+    const label = t(collapsed ? 'login.expand' : 'login.collapse', { names })
+    const toggle = h('button', { class: 'icon-btn row-toggle', type: 'button', 'aria-expanded': String(!collapsed), 'aria-label': label, title: label, onclick: (e) => { e.stopPropagation(); toggleLogin(key) } }, icon('chevron', 'chev'))
+    return h('div', { class: 'login' + (collapsed ? ' is-collapsed' : ''), role: 'listitem', 'aria-label': t('login.label', { names }), 'data-key': key },
+      h('div', { class: 'row login-head fold-hit', onclick: foldHit(() => toggleLogin(key)) },
+        h('div', { class: 'ident' }, toggle, badge(first.family, 'sm'),
+          h('div', { class: 'ident-text' },
+            h('div', { class: 'ident-name' },
+              email ? h('button', { class: 'name email-btn', type: 'button', title: t('menu.copyEmail'), 'aria-label': t('menu.copyEmail') + ' ' + email, onclick: () => copyText(id.email) }, email) : h('span', { class: 'name' }, names),
+              why ? h('span', { class: 'dot dot-warn att-dot', title: why, role: 'img', 'aria-label': why }) : null),
+            h('div', { class: 'ident-sub', title: hint }, dots([id.org ? h('span', null, id.org) : null, h('span', null, t('login.count', { n: members.length })), collapsed ? h('span', null, names) : null])))),
+        quotaBlock(source, now, cols, source.quota && source.quota.status === 'ok' ? source.ref : null),
+        h('div', { class: 'last' }),
+        h('div', { class: 'more' })),
+      collapsed ? null : h('div', { class: 'login-rows', role: 'list', 'data-key': 'rows', 'data-patch': '' }, members.map((a) => row(a, now, cols))))
+  }
+  // What a click on a row opens: how it runs (ref, model and effort, a shared login), its tokens and its Health.
+  function sameLoginNote(a) {
+    if (!a.sameLogin || !a.sameLogin.length || inLogin(a)) return null
+    const names = a.sameLogin.map(refName).join(', ')
+    return h('div', { class: 'rd-note', title: t('acct.sameLoginHint', { names }) }, t('acct.sameLogin', { names }))
+  }
+  function rowDetail(a, withSub) {
+    const same = sameLoginNote(a)
+    return h('div', { class: 'row-detail' },
+      withSub || same ? h('div', { class: 'rd-item rd-run' }, h('span', { class: 'rd-label' }, t('row.runs')), withSub ? subLine(a) : null, same) : null,
+      h('div', { class: 'rd-item rd-usage' }, h('span', { class: 'rd-label' }, t('col.tokens', { n: BOOT.usageDays })), usageBlock(a)),
+      h('div', { class: 'rd-item rd-health' }, h('span', { class: 'rd-label' }, t('col.health')), healthChip(a)))
+  }
+  // A card shows everything at once; it has room for it.
   function card(a, now, cols) {
-    if (folded(a))
-      return h('article', { class: 'card card-folded fold-hit' + (a.error ? ' card-error' : ''), 'data-ref': a.ref, 'data-key': a.ref, 'data-sig': rowSig(a), 'aria-label': a.ref, onclick: foldClick(a) },
-        h('header', { class: 'card-head' }, rowToggle(a), badge(a.family, 'sm'), h('div', { class: 'ident-text' }, nameLine(a)), moreButton(a)))
     return h('article', { class: 'card' + (a.error ? ' card-error' : ''), 'data-ref': a.ref, 'data-key': a.ref, 'data-sig': rowSig(a), 'aria-label': a.ref },
-      h('header', { class: 'card-head fold-hit', onclick: foldClick(a) },
-        rowToggle(a),
+      h('header', { class: 'card-head' },
         badge(a.family, 'sm'),
-        h('div', { class: 'ident-text' }, nameLine(a), emailLine(a), subLine(a)),
+        h('div', { class: 'ident-text' }, nameLine(a), emailLine(a), subLine(a), sameLoginNote(a)),
         moreButton(a)),
       notes(a),
       quotaBlock(a, now, cols),
@@ -1048,9 +1314,7 @@ const MAIN = String.raw `
     return h('div', { class: 'col-head', 'aria-hidden': 'true', 'data-key': 'cols' },
       h('span', { class: 'ch-id' }, t('col.account')),
       h('span', { class: 'quota' }, titled ? cols.map((c) => h('span', null, t(left ? 'col.left' : 'col.used', { label: c }))) : null),
-      h('span', { class: 'ch-usage' }, t('col.tokens', { n: BOOT.usageDays })),
       h('span', { class: 'ch-last' }, t('col.last')),
-      h('span', { class: 'ch-health' }, t('col.health')),
       h('span', { class: 'ch-more' }))
   }
   // Quota is on but no account of the Family has numbers yet: say what brings the first ones.
@@ -1153,11 +1417,7 @@ const MAIN = String.raw `
     const collapsed = prefs.collapsed['app:' + app] === true
     const bodyId = 'grp-app-' + app.replace(/[^a-zA-Z0-9_-]/g, '_')
     const head = h('div', { class: 'group-head', 'data-key': 'head' },
-      h('button', { class: 'group-toggle', type: 'button', 'aria-expanded': String(!collapsed), 'aria-controls': bodyId, title: t(collapsed ? 'group.expand' : 'group.collapse'), 'aria-label': t('group.toggle', { title: app, count: String(list.length), action: t(collapsed ? 'group.expand' : 'group.collapse') }), onclick: () => {
-        if (collapsed) delete prefs.collapsed['app:' + app]; else prefs.collapsed['app:' + app] = true
-        savePrefs()
-        renderAccounts()
-      } },
+      h('button', { class: 'group-toggle', type: 'button', 'aria-expanded': String(!collapsed), 'aria-controls': bodyId, title: t(collapsed ? 'group.expand' : 'group.collapse'), 'aria-label': t('group.toggle', { title: app, count: String(list.length), action: t(collapsed ? 'group.expand' : 'group.collapse') }), onclick: () => toggleGroup('app:' + app, 'app:' + app) },
         icon('chevron', 'chev'), appBadge(), h('span', { class: 'group-title' }, app),
         h('span', { class: 'group-count' }, String(list.length))),
       h('div', { class: 'group-meta' },
@@ -1225,11 +1485,7 @@ const MAIN = String.raw `
     const bodyId = 'grp-' + fam.replace(/[^a-zA-Z0-9_-]/g, '_')
     const cards = prefs.view === 'cards'
     const head = h('div', { class: 'group-head', 'data-key': 'head' },
-      h('button', { class: 'group-toggle', type: 'button', 'aria-expanded': String(!collapsed), 'aria-controls': bodyId, title: t(collapsed ? 'group.expand' : 'group.collapse'), 'aria-label': t('group.toggle', { title: info.title, count: list.length === total ? String(total) : list.length + ' / ' + total, action: t(collapsed ? 'group.expand' : 'group.collapse') }), onclick: () => {
-        if (collapsed) delete prefs.collapsed[fam]; else prefs.collapsed[fam] = true
-        savePrefs()
-        renderAccounts()
-      } },
+      h('button', { class: 'group-toggle', type: 'button', 'aria-expanded': String(!collapsed), 'aria-controls': bodyId, title: t(collapsed ? 'group.expand' : 'group.collapse'), 'aria-label': t('group.toggle', { title: info.title, count: list.length === total ? String(total) : list.length + ' / ' + total, action: t(collapsed ? 'group.expand' : 'group.collapse') }), onclick: () => toggleGroup(fam, 'g:' + fam) },
         icon('chevron', 'chev'), badge(fam, 'sm'), h('span', { class: 'group-title' }, info.title),
         h('span', { class: 'group-count' }, list.length === total ? String(total) : list.length + ' / ' + total)),
       h('div', { class: 'group-meta' },
@@ -1243,7 +1499,7 @@ const MAIN = String.raw `
         off && setup && setup.plan.status === 'blocked' ? h('span', { class: 'muted small label-tip' }, t('quota.blocked'), tipRaw(t('quota.blocked'), setup.plan.message)) : null))
     const body = collapsed ? null : cards
       ? h('div', { class: 'grid', id: bodyId, 'data-key': 'cards', 'data-patch': '' }, list.map((a) => card(a, now, cols)))
-      : h('div', { class: 'rows', id: bodyId, role: 'list', 'data-key': 'rows', 'data-patch': '' }, list.map((a) => row(a, now, cols)))
+      : h('div', { class: 'rows', id: bodyId, role: 'list', 'data-key': 'rows', 'data-patch': '' }, loginClusters(list).map((x) => Array.isArray(x) ? loginGroup(x, now, cols) : row(x, now, cols)))
     return h('section', { class: 'group' + (cards ? ' group-cards' : ' group-list') + (collapsed ? ' is-collapsed' : ''), 'aria-label': info.title, 'data-key': 'g:' + fam, 'data-patch': '' },
       head, collapsed || cards ? null : colHead(cols, list), body)
   }
@@ -1255,7 +1511,7 @@ const MAIN = String.raw `
       h('h3', null, t('empty.title')),
       h('p', { class: 'muted' }, t('empty.body')),
       fams.length ? h('ul', { class: 'host-list' }, fams.map((f) => h('li', null, badge(f.id, 'sm'), h('span', null, f.title),
-        f.installed ? h('span', { class: 'muted small' }, tx('empty.runOnce', { bin: h('code', null, f.bin) })) : link(t('empty.install'), f.installUrl, 'btn btn-sm')))) : h('p', { class: 'muted small' }, t('empty.noFamilies')),
+        f.installed ? h('span', { class: 'muted small' }, tx('empty.runOnce', { bin: h('code', null, f.bin) })) : f.installCommand ? codeCopy(f.installCommand) : link(t('empty.install'), f.installUrl, 'btn btn-sm')))) : h('p', { class: 'muted small' }, t('empty.noFamilies')),
       BOOT.readOnly ? null : h('button', { class: 'btn', type: 'button', onclick: () => openCreate(null) }, icon('plus'), t('empty.create')))
   }
   function clearFilters() {
@@ -1302,6 +1558,9 @@ const MAIN = String.raw `
     if (!shown.length && !apps.length) { patch(box, noMatch()); return }
     const cols = quotaColumns(shown)
     box.style.setProperty('--qn', String(cols.length))
+    ui.loginRefs = new Set()
+    if (prefs.view !== 'cards')
+      for (const x of loginClusters(shown)) if (Array.isArray(x)) for (const a of x) ui.loginRefs.add(a.ref)
     const ids = S.state.families.map((f) => f.id)
     for (const a of all) if (!ids.includes(a.family)) ids.push(a.family)
     const groups = []
@@ -1840,7 +2099,7 @@ const MAIN = String.raw `
         renderPreview()
       })
       const n = S.state.accounts.filter((a) => a.family === f.id).length
-      const sub = st === 'ready' ? tn('nf.accounts', n) : st === 'no-main' ? tx('nf.runOnce', { bin: h('code', null, f.bin) }) : t('nf.notInstalled')
+      const sub = st === 'ready' ? tn('nf.accounts', n) : st === 'no-main' ? tx('nf.runOnce', { bin: h('code', null, f.bin) }) : t(f.brokenBin ? 'nf.broken' : 'nf.notInstalled')
       return h('label', { class: 'fam-card' + (st === 'ready' ? '' : ' is-off') }, input, badge(f.id, 'sm'),
         h('span', { class: 'fam-text' }, h('span', { class: 'fam-title' }, f.title), h('span', { class: 'fam-sub' }, sub)))
     })
@@ -2048,15 +2307,6 @@ const MAIN = String.raw `
   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
@@ -2532,7 +2782,8 @@ const MAIN = String.raw `
   // ---------- Remote Control (spec §3.22) ----------
   // Shown while some Claude settings file turns Remote Control on. "Turn all off" first lists each file, the change
   // and the accounts it reaches, in the banner itself; the toast after it carries the undo.
-  const rc = { confirm: false, busy: false }
+  // target: the side the dialog's switch was moved to, waiting for its confirmation; null while nothing is chosen.
+  const rc = { confirm: false, busy: false, target: null }
   const shortRef = (ref) => ref.replace(/^claude:/, '')
   function remoteControlBanner() {
     const groups = S.state.remoteControl || []
@@ -2549,29 +2800,34 @@ const MAIN = String.raw `
           h('button', { class: 'btn btn-sm btn-primary', type: 'button', onclick: () => { rc.confirm = true; renderBanners() } }, t('rc.turnOff')),
           h('button', { class: 'btn btn-sm', type: 'button', onclick: () => { prefs.rcHide = true; savePrefs(); renderBanners(); toast(t('rc.hidden')) } }, t('rc.keep'))))
     const lines = todo.map((g) => h('li', null, h('code', null, g.file), ' ',
-      t('rc.change', { from: g.state === 'on' ? 'true' : t('rc.notSet') }), ' ',
+      t('rc.change', { from: g.state === 'on' ? 'true' : t('rc.notSet'), to: 'false' }), ' ',
       h('span', { class: 'muted' }, t('rc.usedBy', { refs: g.accounts.map(shortRef).join(', ') }))))
     return h('div', { class: 'banner banner-warn', role: 'status' },
       h('div', null, h('b', null, t('rc.confirmTitle')), h('ul', null, lines), h('div', { class: 'small' }, t('rc.confirmNote'))),
       h('div', { class: 'banner-actions' },
-        h('button', { class: 'btn btn-sm btn-primary', type: 'button', disabled: rc.busy, onclick: remoteControlOff }, rc.busy ? spinner() : null, t('rc.confirm')),
+        h('button', { class: 'btn btn-sm btn-primary', type: 'button', disabled: rc.busy, onclick: () => setRemoteControl('off') }, rc.busy ? spinner() : null, t('rc.confirm')),
         h('button', { class: 'btn btn-sm', type: 'button', disabled: rc.busy, onclick: () => { rc.confirm = false; renderBanners() } }, t('btn.cancel'))))
   }
-  async function remoteControlOff() {
+  async function setRemoteControl(to) {
     rc.busy = true
     renderBanners()
+    if (dlg.kind === 'rc') renderRc()
+    const fail = to === 'on' ? 'rc.failedOn' : 'rc.failed'
     try {
-      const r = await api('/api/remote-control/off', {})
+      const r = await api('/api/remote-control/' + to, {})
       if (r.ok) {
-        // Hide the banner now; the reload that follows confirms it.
-        S.state.remoteControl = (S.state.remoteControl || []).map((g) => g.state === 'on' || g.state === 'default' ? { ...g, state: 'off', undo: true } : g)
-        toast(t('rc.done'), { action: { label: t('toast.undo'), run: remoteControlUndo }, duration: 12000 })
+        // Show the new state now; the reload that follows confirms it.
+        const changed = new Set(remoteControlTodo(S.state.remoteControl || [], to).map((g) => g.file))
+        S.state.remoteControl = (S.state.remoteControl || []).map((g) => changed.has(g.file) ? { ...g, state: to, undo: true } : g)
+        toast(t(to === 'on' ? 'rc.doneOn' : 'rc.done'), { action: { label: t('toast.undo'), run: remoteControlUndo }, duration: 12000 })
       }
-      else toast(t('rc.failed', { msg: r.message }), { kind: 'fail' })
-    } catch (e) { toast(t('rc.failed', { msg: e.message }), { kind: 'fail' }) }
+      else toast(t(fail, { msg: r.message }), { kind: 'fail' })
+    } catch (e) { toast(t(fail, { msg: e.message }), { kind: 'fail' }) }
     rc.busy = false
     rc.confirm = false
+    rc.target = null
     renderBanners()
+    if (dlg.kind === 'rc') renderRc()
     await load({ silent: true })
   }
   async function remoteControlUndo() {
@@ -2581,6 +2837,109 @@ const MAIN = String.raw `
     } catch (e) { toast(t('toast.undoFailed', { msg: e.message }), { kind: 'fail' }) }
     await load({ silent: true })
   }
+  // The header button keeps the setting in reach after the banner is gone (turned off, or "Keep it on").
+  function rcSummary() {
+    const api = S.state.accounts.filter((a) => a.kind === 'api').map((a) => a.ref)
+    return remoteControlSummary(S.state.remoteControl || [], api)
+  }
+  // ---------- settings ----------
+  // One header button holds what is set once and rarely changed: language, theme, Remote Control and Auto Handoff.
+  // A dot on it says Remote Control starts by itself, so that state stays visible after its banner is gone.
+  function settingsSections() {
+    const out = []
+    if (!LANG_FIXED) out.push('lang')
+    if (BOOT.colorScheme === 'auto') out.push('theme')
+    if (S.state && rcSummary()) out.push('rc')
+    if (S.state && ahState()) out.push('ah')
+    return out
+  }
+  function renderSettingsButton() {
+    const b = $('settings')
+    const secs = settingsSections()
+    b.hidden = !secs.length
+    const warn = secs.includes('rc') && rcSummary() === 'on'
+    setKids(b, [icon('gear'), h('span', { class: 'hide-sm' }, t('set.button')), warn ? h('span', { class: 'dot set-dot', 'aria-hidden': 'true' }) : null])
+    b.setAttribute('aria-label', t('set.button') + (warn ? ': ' + t('set.rcOn') : ''))
+    refreshPopover('settings')
+    if (dlg.kind === 'rc') renderRc()
+  }
+  function settingsPop() {
+    const secs = settingsSections()
+    const out = []
+    const seg = (label, opts, cur, pick) => h('div', { class: 'set-row' }, h('span', { class: 'set-label' }, label),
+      h('div', { class: 'seg', role: 'group', 'aria-label': label }, opts.map(([v, text]) =>
+        h('button', { class: 'seg-btn', type: 'button', 'aria-pressed': String(v === cur), onclick: () => pick(v) }, text))))
+    const link = (label, state, cls, run) => h('button', { class: 'menu-item set-link', type: 'button', onclick: () => { closeMenu(); run() } },
+      h('span', { class: 'menu-label' }, label), h('span', { class: 'chip chip-sm ' + cls }, state), icon('chevron'))
+    if (secs.includes('lang')) out.push(seg(t('set.lang'), [['en', 'English'], ['zh', '中文']], lang, setLang))
+    if (secs.includes('theme')) out.push(seg(t('set.theme'), CHOICES.theme.map((v) => [v, t('set.theme.' + v)]), prefs.theme, setTheme))
+    if (out.length && (secs.includes('rc') || secs.includes('ah'))) out.push(h('div', { class: 'menu-sep', role: 'separator' }))
+    if (secs.includes('rc')) {
+      const sum = rcSummary()
+      out.push(link(t('rc.button'), t('rc.state.' + sum), sum === 'on' ? 'chip-warn' : sum === 'off' ? 'chip-ok' : '', openRc))
+    }
+    if (secs.includes('ah')) {
+      const on = ahState().settings.auto
+      out.push(link(t('ah.button'), on ? t('ah.on') : t('ah.off'), on ? 'chip-ok' : '', () => setPage('handoff')))
+    }
+    return out
+  }
+  function setLang(v) {
+    if (LANG_FIXED || v === lang) return
+    lang = v
+    prefs.lang = lang
+    savePrefs()
+    renderStatic()
+    buildToolbar()
+    renderAll()
+    if (dlg.kind === 'create' && nf && !nf.creating) renderCreate()
+    else if (dlg.kind === 'setup' && qs) renderSetup()
+    else if (dlg.kind === 'tune' && tuneState) renderTune()
+    else if (dlg.kind === 'model' && md) { md.form = null; renderModel() }
+    else if (dlg.kind === 'browser') renderBrowser()
+    else if (dlg.kind === 'update' && up) renderUpdate()
+    else if (dlg.kind === 'rc') renderRc()
+  }
+  function setTheme(v) {
+    prefs.theme = v
+    savePrefs()
+    applyTheme()
+    refreshPopover('settings')
+  }
+  function openRc() {
+    if (!S.state || !rcSummary()) return
+    rc.target = null
+    showDialog('rc')
+    renderRc()
+  }
+  // One switch for every Claude settings file: moving it lists what changes, and only the confirmation writes.
+  function renderRc() {
+    const groups = S.state.remoteControl || []
+    const sum = rcSummary()
+    const to = rc.target
+    const todo = to ? remoteControlTodo(groups, to) : []
+    const changing = new Set(todo.map((g) => g.file))
+    const undo = groups.some((g) => g.undo)
+    const pick = (v) => { rc.target = v === sum ? null : v; renderRc() }
+    const sw = h('div', { class: 'set-row rc-switch' }, h('span', null, t('rc.switch')),
+      h('div', { class: 'seg', role: 'group', 'aria-label': t('rc.switch') }, ['on', 'off'].map((v) =>
+        h('button', { class: 'seg-btn', type: 'button', disabled: BOOT.readOnly || rc.busy, 'aria-pressed': String((to || sum) === v), onclick: () => pick(v) }, t('rc.state.' + v)))))
+    const fromOf = (g) => g.state === 'on' ? 'true' : g.state === 'off' ? 'false' : t('rc.notSet')
+    const rows = groups.map((g) => h('li', { class: 'rc-row' },
+      h('div', null, h('code', null, g.file), ' ', h('span', { class: 'chip chip-sm ' + (g.state === 'on' ? 'chip-warn' : g.state === 'off' ? 'chip-ok' : g.state === 'blocked' ? 'chip-fail' : '') }, t('rc.state.' + g.state))),
+      h('div', { class: 'muted small' }, t('rc.usedBy', { refs: g.accounts.map(shortRef).join(', ') })),
+      g.reason ? h('div', { class: 'muted small' }, g.reason) : null,
+      changing.has(g.file) ? h('div', { class: 'small rc-change' }, t('rc.change', { from: fromOf(g), to: to === 'on' ? 'true' : 'false' })) : null))
+    const body = [h('p', { class: 'small' }, t('rc.explain')), sw, h('ul', { class: 'rc-list' }, rows)]
+    if (to === 'on') body.push(h('div', { class: 'note note-warn small' }, t('rc.onWarn')))
+    else if (to === 'off') body.push(h('p', { class: 'small muted' }, t('rc.confirmNote')))
+    else if (sum === 'off') body.push(h('p', { class: 'small muted' }, t('rc.allOff')))
+    if (BOOT.readOnly) body.push(h('p', { class: 'small' }, t('rc.readOnlyBoth')))
+    const foot = [h('button', { class: 'btn', type: 'button', disabled: rc.busy, onclick: () => to ? pick(sum) : dlg.el.close() }, t(to ? 'btn.cancel' : 'btn.close'))]
+    if (!BOOT.readOnly && !to && undo) foot.push(h('button', { class: 'btn', type: 'button', disabled: rc.busy, onclick: async () => { rc.busy = true; renderRc(); await remoteControlUndo(); rc.busy = false; if (dlg.kind === 'rc') renderRc() } }, t('rc.undo')))
+    if (!BOOT.readOnly && to) foot.push(h('button', { class: 'btn btn-primary', type: 'button', disabled: rc.busy || !todo.length, 'aria-busy': rc.busy ? 'true' : null, onclick: () => setRemoteControl(to) }, rc.busy ? spinner() : null, t(to === 'on' ? 'rc.confirmOn' : 'rc.confirm')))
+    setKids(dlg.el, dialogFrame(t('rc.dialogTitle'), null, body, foot))
+  }
 
   // ---------- banners ----------
   function renderBanners() {
@@ -2607,7 +2966,7 @@ const MAIN = String.raw `
   }
 
   // ---------- loading ----------
-  function renderAll() { renderTop(); renderBanners(); renderSummary(); renderFamilyFilter(); renderEmailToggle(); renderAccounts(); renderCheckup(); renderPageChrome() }
+  function renderAll() { renderTop(); renderBanners(); renderSummary(); renderFamilyFilter(); 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).
@@ -2693,7 +3052,7 @@ const MAIN = String.raw `
     v.hidden = !BOOT.version
     if (!v.hidden) {
       const newer = !!(u && u.available)
-      v.textContent = 'v' + BOOT.version
+      v.textContent = verLabel()
       v.classList.toggle('has-update', newer)
       v.disabled = !BOOT.updates
       const tip = !BOOT.updates ? '' : newer ? t('upd.labelLong', { v: u.latest, cur: u.current }) : t('upd.verTitle', { v: BOOT.version })
@@ -2708,6 +3067,7 @@ const MAIN = String.raw `
       b.title = t('upd.labelLong', { v: u.latest, cur: u.current })
     }
     if (dlg.kind === 'update' && up && !up.busy) renderUpdate()
+    if (!vp.checking) renderVerPop()
   }
   function openUpdate() {
     if (!BOOT.updates) return
@@ -2738,6 +3098,63 @@ const MAIN = String.raw `
     dlg.busy = false
     renderUpdate()
   }
+  // The version pill opens a small popover, not the dialog: the version, whether it is the newest, "Check for
+  // updates" in place, and the way into the dialog when there is something to do (update, Auto Update).
+  const vp = { checking: false, checked: false, error: null }
+  function openVerPop(anchor) {
+    if (!BOOT.updates) return
+    vp.checked = false
+    vp.error = null
+    openPopover(anchor, 'version', t('upd.title'), verPopKids)
+  }
+  function renderVerPop() { refreshPopover('version') }
+  // A Local Build (ADR-0024) names its commit, with + when the working tree had changes, so the viewer can tell
+  // which code they are looking at.
+  function verLabel() {
+    const l = BOOT.local
+    return 'v' + BOOT.version + (l ? '-dev' + (l.commit ? ' · ' + l.commit + (l.dirty ? '+' : '') : '') : '')
+  }
+  function verPopKids() {
+    const u = updState()
+    const toDialog = () => { closeMenu(); openUpdate() }
+    const kids = [h('b', null, 'sideby ' + verLabel())]
+    if (BOOT.local) kids.push(h('p', { class: 'muted small' }, t(BOOT.local.dirty ? 'upd.localDirty' : 'upd.local', { at: BOOT.local.builtAt ? clock(BOOT.local.builtAt) : '' })))
+    let status
+    if (!u) status = t('upd.loading')
+    else if (u.available) status = null
+    else if (vp.checked && u.latest) status = t('upd.latestNow')
+    else if (u.checksOff) status = t('upd.checksOff', { why: u.checksOff })
+    else if (u.latest) status = t('upd.latest') + (u.checkedAt ? ' · ' + t('upd.checked', { ago: ago(u.checkedAt) }) : '')
+    else status = t('upd.notYet')
+    if (status) kids.push(h('p', { class: 'muted small' }, status))
+    if (u && u.available) {
+      kids.push(h('p', { class: 'small' }, t('upd.available', { v: u.latest }), ' ',
+        h('a', { href: u.releaseNotes, target: '_blank', rel: 'noopener noreferrer' }, t('upd.notes'))))
+      kids.push(h('div', { class: 'popover-actions' }, h('button', { class: 'btn btn-sm btn-primary', type: 'button', onclick: toDialog }, t('upd.open'))))
+    } else if (!BOOT.readOnly) {
+      kids.push(h('div', { class: 'popover-actions' }, h('button', { class: 'btn btn-sm', type: 'button', disabled: vp.checking, 'aria-busy': vp.checking ? 'true' : null, onclick: verPopCheck },
+        vp.checking ? spinner() : icon('refresh'), vp.checking ? t('upd.checking') : t('upd.check'))))
+    }
+    if (vp.error) kids.push(errorNote(vp.error, null))
+    if (u && !BOOT.readOnly)
+      kids.push(h('p', { class: 'muted small popover-foot' }, t(u.auto ? 'upd.autoIsOn' : 'upd.autoIsOff'), ' · ',
+        h('button', { class: 'link-btn', type: 'button', onclick: toDialog }, t('upd.settings'))))
+    return kids
+  }
+  async function verPopCheck() {
+    vp.checking = true
+    vp.error = null
+    renderVerPop()
+    try {
+      await api('/api/update', {})
+      await load({ silent: true })
+      vp.checked = true
+    } catch (e) { vp.error = e }
+    vp.checking = false
+    renderVerPop()
+    const b = menu.el && menu.el.querySelector('.popover-actions button')
+    if (b) b.focus()
+  }
   // "Check for updates": asks the registry now (the daily check only runs once a day), then shows the answer.
   async function updCheck() {
     up.checking = true
@@ -2838,33 +3255,11 @@ const MAIN = String.raw `
   // ---------- start ----------
   $('ver').textContent = BOOT.version ? 'sideby v' + BOOT.version : 'sideby'
   $('ver').disabled = !BOOT.updates
-  $('ver').addEventListener('click', openUpdate)
+  $('ver').addEventListener('click', () => openVerPop($('ver')))
   $('update').addEventListener('click', openUpdate)
-  $('ver-top').addEventListener('click', openUpdate)
+  $('ver-top').addEventListener('click', () => openVerPop($('ver-top')))
   $('refresh').addEventListener('click', () => load({ check: true, announce: true }))
-  $('handoff').addEventListener('click', () => setPage('handoff'))
-  $('lang').addEventListener('click', () => {
-    if (LANG_FIXED) return
-    lang = lang === 'zh' ? 'en' : 'zh'
-    prefs.lang = lang
-    savePrefs()
-    renderStatic()
-    buildToolbar()
-    renderAll()
-    if (dlg.kind === 'create' && nf && !nf.creating) renderCreate()
-    else if (dlg.kind === 'setup' && qs) renderSetup()
-    else if (dlg.kind === 'tune' && tuneState) renderTune()
-    else if (dlg.kind === 'model' && md) { md.form = null; renderModel() }
-    else if (dlg.kind === 'update' && up) renderUpdate()
-  })
-  $('theme').addEventListener('click', () => {
-    const order = CHOICES.theme
-    prefs.theme = order[(order.indexOf(prefs.theme) + 1) % order.length]
-    savePrefs()
-    applyTheme()
-    renderStatic()
-    toast(t('theme.' + prefs.theme), { key: 'theme', kind: 'plain' })
-  })
+  $('settings').addEventListener('click', () => openPopover($('settings'), 'settings', t('set.button'), settingsPop, 'end'))
   applyTheme()
   renderStatic()
   buildToolbar()