sideby 0.13.0 → 0.14.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, loginClusters, loginKey, maskEmail, matchesQuery, mergeDaily, newAccountDir, nextReset, panelHint, panelLang, passedWindow, quotaPressure, remoteControlSummary, remoteControlTodo, sortAccounts, suggestAlias, suggestName, updatedAge, windowState, } from './page-logic.js';
+import { aliasArgsOf, aliasIssue, attentionReasons, attentionWhy, cacheHitRate, formatDuration, handoffChangeOf, handoffHintAccount, inDisplayOrder, loginClusters, loginKey, maskEmail, matchesQuery, mergeDaily, newAccountDir, nextReset, panelHint, panelLang, passedWindow, quotaPressure, remoteControlSummary, remoteControlTodo, reorder, sortAccounts, suggestAlias, suggestName, updatedAge, windowState, } from './page-logic.js';
 const LOGIC = [
     aliasArgsOf,
     aliasIssue,
@@ -10,6 +10,7 @@ const LOGIC = [
     formatDuration,
     handoffChangeOf,
     handoffHintAccount,
+    inDisplayOrder,
     loginClusters,
     loginKey,
     maskEmail,
@@ -23,6 +24,7 @@ const LOGIC = [
     quotaPressure,
     remoteControlSummary,
     remoteControlTodo,
+    reorder,
     sortAccounts,
     suggestAlias,
     suggestName,
@@ -57,14 +59,14 @@ 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, browserRef: null, appBusy: null, appRemove: null, appNew: null, highlight: null, fade: true, loginRefs: new Set() }
+  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 Map(), order: { families: [], units: {} }, drag: null }
   const $ = (id) => document.getElementById(id)
 
   // ---------- preferences ----------
   // Kept in localStorage, which can be missing or throw (private windows, blocked storage): every access is guarded
   // and the defaults apply.
   const PREFS_KEY = 'sideby.panel.v2'
-  const CHOICES = { view: ['list', 'cards'], sort: ['pressure', 'name', 'recent'], quota: ['used', 'left'], theme: ['system', 'light', 'dark'], lang: ['en', 'zh'] }
+  const CHOICES = { view: ['list', 'cards'], sort: ['pressure', 'name', 'recent', 'manual'], quota: ['used', 'left'], theme: ['system', 'light', 'dark'], lang: ['en', 'zh'] }
   const prefs = loadPrefs()
   function loadPrefs() {
     let raw = {}
@@ -235,6 +237,8 @@ const MAIN = String.raw `
   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
+    // A row or group being dragged into a new place (spec §3.25).
+    if (ui.drag) 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
@@ -249,6 +253,7 @@ const MAIN = String.raw `
     search: 'M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM20 20l-4.2-4.2',
     chevron: 'M9 6l6 6-6 6',
     more: 'M5 12h.01M12 12h.01M19 12h.01',
+    grip: 'M9 6h.01M9 12h.01M9 18h.01M15 6h.01M15 12h.01M15 18h.01',
     plus: 'M12 5v14M5 12h14',
     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',
@@ -779,15 +784,17 @@ 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() })
+    tb.reset = h('button', { class: 'btn btn-sm tb-reset', type: 'button', title: t('order.resetHint'), onclick: resetOrder }, t('order.resetButton'))
     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, display),
+      h('div', { class: 'tools' }, tb.family, tb.sort, tb.reset, display),
       create,
     ])
     renderFamilyFilter()
+    renderOrderReset()
     if (hadFocus) tb.search.focus()
   }
   // "Display": the view settings people change rarely, one popover instead of three buttons in the toolbar.
@@ -829,12 +836,16 @@ const MAIN = String.raw `
   // One column per Quota window label. 5h and 7d always have one, so rows of every group line up under the same
   // header; a label only some account reports (such as 60m) adds a column, at most three in all.
   const KNOWN_WINDOWS = { '5h': 300, '7d': 10080 }
+  // A window's column: the models it covers when it covers only some (Cursor's "Other models"), else its length.
+  function winKey(w) { return w.name || w.label }
+  // One group's columns: the windows its accounts report, shortest first; 5h and 7d when none reports any yet.
   function quotaColumns(list) {
-    const mins = Object.assign({}, KNOWN_WINDOWS)
+    const mins = {}
     for (const a of list)
       if (a.quota && a.quota.status === 'ok')
-        for (const w of a.quota.windows || []) if (!Object.hasOwn(mins, w.label)) mins[w.label] = Number(w.windowMinutes) || 0
-    return Object.keys(mins).sort((x, y) => mins[x] - mins[y]).slice(0, 3)
+        for (const w of a.quota.windows || []) if (!Object.hasOwn(mins, winKey(w))) mins[winKey(w)] = (Number(w.windowMinutes) || 0) + (w.name ? -0.5 : 0)
+    if (!Object.keys(mins).length) Object.assign(mins, KNOWN_WINDOWS)
+    return Object.keys(mins).sort((x, y) => mins[x] - mins[y]).slice(0, 4)
   }
   // A window's cell: percent and countdown on one line, the bar under them. The label shows where no column
   // header does (cards, narrow screens).
@@ -843,13 +854,15 @@ const MAIN = String.raw `
     const passed = passedWindow(w, observedAt, now)
     const left = prefs.quota === 'left'
     const shown = left ? 100 - st.pct : st.pct
-    const title = passed ? t('quota.resetNoData', { date: day(passed.since) }) : t('quota.resetsAt', { at: clock(w.resetsAt) })
+    const asOf = stale ? t('quota.asOf', { ago: ago(observedAt) }) : ''
+    const title = [passed ? t('quota.resetNoData', { date: day(passed.since) }) : t('quota.resetsAt', { at: clock(w.resetsAt) }), asOf].filter(Boolean).join(' · ')
     return h('div', { class: 'meter lvl-' + st.level + (stale || passed ? ' lvl-stale' : ''), title },
       h('div', { class: 'm-top' },
-        h('span', { class: 'm-label' }, w.label),
-        h('span', { class: 'm-pct' }, shown + '%', h('span', { class: 'm-unit' }, ' ' + t(left ? 'quota.unitLeft' : 'quota.unitUsed'))),
+        h('span', { class: 'm-label' }, winKey(w)),
+        h('span', { class: 'm-pct' }, shown + '%', h('span', { class: 'm-unit' }, ' ' + t(left ? 'quota.unitLeft' : 'quota.unitUsed')),
+          stale ? h('span', { class: 'm-asof', role: 'img', 'aria-label': asOf }, icon('clock')) : null),
         h('span', { class: 'm-reset' + (passed ? ' m-passed' : '') }, passed ? t('quota.resetShort') : countdown(w.resetsAt, now))),
-      h('div', { class: 'bar', role: 'meter', 'aria-label': t(left ? 'quota.meterLeft' : 'quota.meterUsed', { label: w.label }), 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': String(shown), 'aria-valuetext': t(left ? 'quota.pctLeft' : 'quota.pctUsed', { n: shown }) }, h('span', { css: { width: shown + '%' } })))
+      h('div', { class: 'bar', role: 'meter', 'aria-label': t(left ? 'quota.meterLeft' : 'quota.meterUsed', { label: winKey(w) }), 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': String(shown), 'aria-valuetext': t(left ? 'quota.pctLeft' : 'quota.pctUsed', { n: shown }) }, h('span', { css: { width: shown + '%' } })))
   }
   // A column whose window this account does not report right now, such as a 5h window that has not started.
   function noMeter(label) {
@@ -859,6 +872,9 @@ const MAIN = String.raw `
   function quotaNote(a, q) {
     const setup = setupFor(a.family)
     // One setup turns quota on for every account of the Family, so the switch lives in the group header only.
+    // A check that asks the Host (Grok) and is turned off, or failed (spec §3.26): say why and what to do.
+    if (q.reason === 'fetch-failed') return h('div', { class: 'q-note q-off' }, h('span', { class: 'muted' }, t('quota.fetchFailed')), tipRaw(t('quota.fetchFailed'), q.detail || ''))
+    if (q.reason === 'not-enabled' && checkOf(a.family)) return h('div', { class: 'q-note q-off' }, h('span', { class: 'muted' }, t('quota.checkOff')), tipRaw(t('quota.checkOff'), q.detail || t('quota.checkOffHint')))
     if (q.reason === 'not-enabled') {
       const host = famTitle(a)
       const body = setup && setup.plan.status === 'ready' && !BOOT.readOnly ? t('tip.quotaOff.body', { host })
@@ -870,22 +886,23 @@ 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 }))
   }
-  // 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) {
+  function quotaBlock(a, now, cols) {
     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 = 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) })) },
+    const from = q.from ? t('quota.sharedFrom', { name: refName(q.from), ago: ago(q.observedAt) }) : null
+    // Where the numbers came from when the Host was asked (spec §3.26), and why the latest ask failed.
+    const via = q.fetched ? t('quota.fetchedFrom', { host: famTitle(a), ago: ago(q.observedAt) }) : null
+    const failed = q.fetchError ? t('quota.lastCheckFailed', { why: q.fetchError }) : null
+    const title = [from || via || (stale ? null : t('quota.dataFrom', { ago: ago(q.observedAt) })), failed].filter(Boolean).join('\n') || null
+    return h('div', { class: 'quota' + (stale ? ' is-stale' : ''), title },
       wins.length ? cols.map((c) => {
-        const w = wins.find((x) => x.label === c)
+        const w = wins.find((x) => winKey(x) === c)
         return w ? meter(w, now, stale, q.observedAt) : noMeter(c)
-      }) : h('div', { class: 'q-note' }, t('quota.noWindows')),
-      stale ? h('div', { class: 'q-asof' }, icon('clock'), t('quota.asOf', { ago: ago(q.observedAt) })) : null)
+      }) : h('div', { class: 'q-note' }, t('quota.noWindows')))
   }
   function usageBlock(a) {
     const u = a.usage
@@ -921,9 +938,12 @@ const MAIN = String.raw `
   }
   // 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.
+  // Inside a login group the quota warning is the first row's, so another row's dot is only about the row itself.
   function attentionDot(a) {
-    const subject = inLogin(a) ? Object.assign({}, a, { quota: undefined }) : a
+    const lead = loginLead(a)
+    const subject = !lead ? a
+      : lead !== a.ref ? Object.assign({}, a, { quota: undefined })
+        : Object.assign({}, a, { quota: a.quota && Object.assign({}, a.quota, { from: undefined }) })
     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
@@ -947,6 +967,8 @@ const MAIN = String.raw `
         : null,
       a.hostInstalled === false ? h('span', { class: 'tag tag-warn' }, t(family(a.family).brokenBin ? 'acct.broken' : 'acct.notInstalled')) : null)
   }
+  // An organization name as the vendor wrote it, without a trailing comma or full stop it sometimes carries.
+  function orgText(org) { return org ? String(org).replace(/[\s,，;；、。]+$/u, '') : '' }
   // 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.
@@ -954,7 +976,7 @@ const MAIN = String.raw `
     const id = a.identity
     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(' · ') },
+    return h('div', { class: 'ident-email', title: [email, orgText(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, browserButton(a)]))
   }
   function subLine(a) {
@@ -1101,10 +1123,11 @@ const MAIN = String.raw `
   }
   // 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, 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 rowSig(a) { return sig([a, healthOf(a.ref), isNext(a), ui.desktopRef === a.ref, ui.browserRef === a.ref, browserFor(a), prefs.hideEmail, isOpen(a), loginLead(a)]) }
+  // Whether the row sits in a login group (spec §3.21): its first row then shows the quota for all of them.
   function inLogin(a) { return ui.loginRefs.has(a.ref) }
-  function rowEmail(a) { return inLogin(a) ? null : emailLine(a) }
+  // The group's first row, which shows the quota for all of them.
+  function loginLead(a) { return ui.loginRefs.get(a.ref) || null }
   // 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 }
@@ -1176,7 +1199,7 @@ const MAIN = String.raw `
     el.dataset.sig = rowSig(a)
     let detail = rowDetails(el)[0]
     if (open && !detail) {
-      detail = rowDetail(a, Boolean(rowEmail(a)))
+      detail = rowDetail(a, Boolean(emailLine(a)))
       const more = el.querySelector(':scope > .more')
       el.insertBefore(detail, more ? more.nextSibling : null)
       detail.style.opacity = '0'
@@ -1215,72 +1238,34 @@ const MAIN = String.raw `
     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) {
     const open = isOpen(a)
-    const email = rowEmail(a)
+    const email = emailLine(a)
+    const lead = loginLead(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),
+      h('div', { class: 'ident' }, dragHandle('account', a.family, a.name, a.name), rowToggle(a), badge(a.family, 'sm'), h('div', { class: 'ident-text' }, nameLine(a), email || subLine(a))),
+      lead && lead !== a.ref ? sharedQuota(lead) : quotaBlock(a, now, cols),
       lastUsed(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).
+  // Directories signed in as one login (spec §3.21): the vendor counts one quota, so it shows once, on the group's
+  // first row; every directory stays an ordinary row (name, email, browser, model, tokens, Health), and a rail on
+  // the left ties the rows together.
   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))))
+    // The first row as sorted carries the quota.
+    for (const a of members) ui.loginRefs.set(a.ref, members[0].ref)
+    return h('div', { class: 'login', role: 'listitem', 'aria-label': t('login.label', { names }), title: t('login.hint', { names }), 'data-key': loginKey(members.map((a) => a.ref)) },
+      h('div', { class: 'login-rows', role: 'list', 'data-key': 'rows', 'data-patch': '' }, members.map((a) => row(a, now, cols))))
+  }
+  // The quota cell of a group's other rows: the numbers are the first row's.
+  function sharedQuota(lead) {
+    const name = refName(lead)
+    return h('div', { class: 'quota' }, h('div', { class: 'q-note q-shared', title: t('login.sharedHint', { name }) }, icon('arrowUp'), t('login.shared', { name })))
   }
   // 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) {
@@ -1484,7 +1469,9 @@ const MAIN = String.raw `
     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, '_')
     const cards = prefs.view === 'cards'
+    if (!cards) ui.order.units[fam] = loginClusters(list).map((x) => Array.isArray(x) ? x.map((a) => a.name) : [x.name])
     const head = h('div', { class: 'group-head', 'data-key': 'head' },
+      dragHandle('family', fam, fam, info.title),
       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)),
@@ -1500,7 +1487,7 @@ const MAIN = String.raw `
     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': '' }, 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': '' },
+    return h('section', { class: 'group' + (cards ? ' group-cards' : ' group-list') + (collapsed ? ' is-collapsed' : ''), 'aria-label': info.title, 'data-key': 'g:' + fam, 'data-fam': fam, 'data-patch': '' },
       head, collapsed || cards ? null : colHead(cols, list), body)
   }
   function emptyState() {
@@ -1536,6 +1523,159 @@ const MAIN = String.raw `
       h('p', null, S.loadError.message),
       h('button', { class: 'btn', type: 'button', onclick: () => load({ check: !S.report }) }, icon('refresh'), t('btn.retry')))
   }
+  // ---------- Display Order (spec §3.25) ----------
+  function displayOf() { return (S.state && S.state.display) || {} }
+  // Every Family id in the Display Order, the ones only accounts name (a plugin that failed) last.
+  function familyOrder() {
+    const ids = S.state.families.map((f) => f.id)
+    for (const a of S.state.accounts) if (!ids.includes(a.family)) ids.push(a.family)
+    return inDisplayOrder(ids, (x) => x, displayOf().families)
+  }
+  function accountOrder(fam) { return (displayOf().accounts || {})[fam] }
+  // Every account name of a Family, hidden ones too, in the Display Order.
+  function allNames(fam) {
+    return sortAccounts(S.state.accounts.filter((a) => a.family === fam), 'manual', Date.now(), accountOrder(fam)).map((a) => a.name)
+  }
+  function ordered() { const d = displayOf(); return Boolean((d.families && d.families.length) || (d.accounts && Object.keys(d.accounts).length)) }
+  // A grip to drag a Family group or an account (a Same Login group moves as one) into a new place, or to move it
+  // with the arrow keys. Not in the card view, nor on a read-only Panel.
+  function dragHandle(kind, fam, key, name) {
+    if (BOOT.readOnly || prefs.view === 'cards') return null
+    const label = t(kind === 'family' ? 'order.moveFamily' : 'order.moveAccount', { name })
+    return h('button', { class: 'icon-btn drag-handle', type: 'button', draggable: 'true', 'data-move': kind, 'data-fam': fam, 'data-name': key, 'aria-label': label, title: t('order.handle'),
+      onclick: (e) => e.stopPropagation(),
+      onkeydown: (e) => {
+        const keys = { ArrowUp: -1, ArrowDown: 1, Home: -Infinity, End: Infinity }
+        if (!Object.hasOwn(keys, e.key)) return
+        e.preventDefault()
+        e.stopPropagation()
+        const units = unitsOf(kind, fam)
+        const from = units.findIndex((u) => u.includes(key))
+        const step = keys[e.key]
+        const to = Math.max(0, Math.min(units.length - 1, Number.isFinite(step) ? from + step : step < 0 ? 0 : units.length - 1))
+        moveUnit(kind, fam, from, to, { focus: key, label: name })
+      },
+      ondragstart: (e) => {
+        const units = unitsOf(kind, fam)
+        ui.drag = { kind, fam, from: units.findIndex((u) => u.includes(key)), to: null }
+        e.dataTransfer.effectAllowed = 'move'
+        try { e.dataTransfer.setData('text/plain', name) } catch {}
+        const el = unitElement(kind, fam, key)
+        if (el) { e.dataTransfer.setDragImage(el, 16, 16); requestAnimationFrame(() => el.classList.add('is-dragging')) }
+      },
+      ondragend: () => endDrag(),
+    }, icon('grip'))
+  }
+  function unitsOf(kind, fam) { return kind === 'family' ? ui.order.families.map((f) => [f]) : (ui.order.units[fam] || []) }
+  // The element that moves: a Family's group, an account's row, or the Same Login group the row is in.
+  function unitElement(kind, fam, key) {
+    if (kind === 'family') return document.querySelector('#accounts > section[data-fam="' + CSS.escape(fam) + '"]')
+    const rowEl = document.querySelector('#accounts .row[data-ref="' + CSS.escape(fam + ':' + key) + '"]')
+    return rowEl && (rowEl.closest('.login') || rowEl)
+  }
+  // Where a drop at the pointer lands: the list of places it can go and the index among them, or null outside.
+  function dropTarget(e) {
+    const d = ui.drag
+    if (!d) return null
+    if (d.kind === 'family') {
+      const els = Array.from(document.querySelectorAll('#accounts > section[data-fam]'))
+      return els.length ? { els, at: slotAt(els, e.clientY) } : null
+    }
+    const sec = e.target.closest && e.target.closest('#accounts > section[data-fam]')
+    if (!sec || sec.getAttribute('data-fam') !== d.fam) return null
+    const box = sec.querySelector('.rows')
+    if (!box) return null
+    const els = Array.from(box.children)
+    return { els, at: slotAt(els, e.clientY) }
+  }
+  function slotAt(els, y) {
+    for (let i = 0; i < els.length; i++) {
+      const r = els[i].getBoundingClientRect()
+      if (y < r.top + r.height / 2) return i
+    }
+    return els.length
+  }
+  function clearDropMarks() { for (const el of document.querySelectorAll('.drop-before, .drop-after')) el.classList.remove('drop-before', 'drop-after') }
+  function endDrag() {
+    clearDropMarks()
+    for (const el of document.querySelectorAll('.is-dragging')) el.classList.remove('is-dragging')
+    ui.drag = null
+    if (S.pending) { S.pending = false; renderAll() }
+  }
+  function onDragOver(e) {
+    const tgt = dropTarget(e)
+    if (!tgt) return
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    clearDropMarks()
+    if (tgt.at < tgt.els.length) tgt.els[tgt.at].classList.add('drop-before')
+    else tgt.els[tgt.els.length - 1].classList.add('drop-after')
+    // Dropped after itself means one place earlier once it is taken out.
+    ui.drag.to = tgt.at > ui.drag.from ? tgt.at - 1 : tgt.at
+  }
+  function onDrop(e) {
+    const d = ui.drag
+    if (!d || !dropTarget(e)) return
+    e.preventDefault()
+    const to = d.to
+    endDrag()
+    if (to !== null && to !== d.from) moveUnit(d.kind, d.fam, d.from, to)
+  }
+  // Records the new Display Order: shown at once, written to the config, and put back if the write fails.
+  async function moveUnit(kind, fam, from, to, opts) {
+    opts = opts || {}
+    const units = unitsOf(kind, fam)
+    if (from < 0 || to < 0 || from >= units.length || to >= units.length) return
+    if (from === to) { if (opts.label) say(t('order.position', { name: opts.label, n: from + 1, total: units.length })); return }
+    const before = displayOf()
+    const next = { families: before.families ? before.families.slice() : [], accounts: Object.assign({}, before.accounts || {}) }
+    if (kind === 'family') next.families = reorder(familyOrder(), units, from, to)
+    else next.accounts[fam] = reorder(allNames(fam), units, from, to)
+    S.state.display = next
+    // Moving an account says "my order" from now on; Families follow it in every sort.
+    if (kind === 'account' && prefs.sort !== 'manual') { prefs.sort = 'manual'; savePrefs(); if (tb.sort) tb.sort.value = 'manual' }
+    renderAccounts()
+    if (opts.focus) {
+      const btn = document.querySelector('#accounts .drag-handle[data-move="' + kind + '"][data-fam="' + CSS.escape(fam) + '"][data-name="' + CSS.escape(opts.focus) + '"]')
+      if (btn) btn.focus({ preventScroll: false })
+      say(t('order.position', { name: opts.label, n: to + 1, total: units.length }))
+    }
+    try {
+      const r = await api('/api/display-order', { display: next })
+      S.state.display = r.display
+    } catch (e) {
+      S.state.display = before
+      renderAccounts()
+      toast(t('order.failed', { msg: e.message }), { kind: 'fail' })
+    }
+  }
+  async function resetOrder() {
+    const before = displayOf()
+    S.state.display = {}
+    if (prefs.sort === 'manual') { prefs.sort = 'pressure'; savePrefs(); if (tb.sort) tb.sort.value = 'pressure' }
+    renderAccounts()
+    try {
+      const r = await api('/api/display-order', { display: null })
+      S.state.display = r.display
+      toast(t('order.reset'))
+    } catch (e) {
+      S.state.display = before
+      renderAccounts()
+      toast(t('order.failed', { msg: e.message }), { kind: 'fail' })
+    }
+  }
+  // The toolbar's "Default order" button, shown once the user has put things in an order of their own.
+  function renderOrderReset() {
+    if (!tb.reset) return
+    tb.reset.hidden = BOOT.readOnly || !ordered()
+  }
+  // Words for screen readers only, such as the new place of something moved with the keyboard.
+  let live = null
+  function say(text) {
+    if (!live) { live = h('div', { class: 'sr-only', 'aria-live': 'polite' }); document.body.append(live) }
+    live.textContent = ''
+    setTimeout(() => { live.textContent = text }, 30)
+  }
   function renderAccounts() {
     closeMenu()
     const box = $('accounts')
@@ -1556,18 +1696,25 @@ const MAIN = String.raw `
       : tn('count.accounts', all.length))
     const apps = appGroups()
     if (!shown.length && !apps.length) { patch(box, noMatch()); return }
-    const cols = quotaColumns(shown)
-    box.style.setProperty('--qn', String(cols.length))
-    ui.loginRefs = new Set()
+    ui.loginRefs = new Map()
     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)
+      for (const x of loginClusters(shown)) if (Array.isArray(x)) for (const a of x) ui.loginRefs.set(a.ref, x[0].ref)
+    // Families in the Display Order (spec §3.25) whatever the sort; each group gets the quota columns it uses.
+    // Every group is as wide as the one with the most windows, so the columns after them line up.
+    ui.order = { families: [], units: {} }
     const groups = []
-    for (const fam of ids) {
+    let width = 1
+    for (const fam of familyOrder()) {
       const list = shown.filter((a) => a.family === fam)
-      if (list.length) groups.push(group(fam, sortAccounts(list, prefs.sort, now), all.filter((a) => a.family === fam).length, now, cols))
+      if (!list.length) continue
+      ui.order.families.push(fam)
+      const sorted = sortAccounts(list, prefs.sort, now, accountOrder(fam))
+      const cols = quotaColumns(sorted)
+      width = Math.max(width, cols.length)
+      groups.push(group(fam, sorted, all.filter((a) => a.family === fam).length, now, cols))
     }
+    box.style.setProperty('--qn', String(width))
+    renderOrderReset()
     patch(box, groups.concat(apps))
     if (ui.fade && !REDUCED) {
       box.classList.add('view-in')
@@ -2842,6 +2989,29 @@ const MAIN = String.raw `
     const api = S.state.accounts.filter((a) => a.kind === 'api').map((a) => a.ref)
     return remoteControlSummary(S.state.remoteControl || [], api)
   }
+  // The refresh button reads everything again; Families that ask their Host for Quota (Grok, spec §3.26) are asked
+  // again first, so the numbers are new and not the kept ones.
+  function asking() { return !BOOT.readOnly && S.state && (S.state.quotaChecks || []).some((c) => c.on && !c.blocked) }
+  async function refreshAll() {
+    if (asking()) {
+      const btn = $('refresh')
+      btn.disabled = true
+      btn.classList.add('is-spinning')
+      try { await api('/api/quota/refresh', {}) } catch (e) { toast(t('quota.refreshFailed', { msg: e.message }), { kind: 'fail' }) }
+      btn.classList.remove('is-spinning')
+      btn.disabled = false
+    }
+    load({ check: true, announce: true })
+  }
+  function checkOf(fam) { return S.state && (S.state.quotaChecks || []).find((c) => c.family === fam) }
+  async function setCheck(fam, on) {
+    try {
+      await api('/api/quota/check', { family: fam, on })
+      toast(t(on ? 'quota.checkOnToast' : 'quota.checkOffToast', { host: famTitleOf(fam) }))
+    } catch (e) { toast(t('quota.checkFailed', { msg: e.message }), { kind: 'fail' }) }
+    load({ silent: true })
+  }
+  function famTitleOf(fam) { const f = S.state && S.state.families.find((x) => x.id === fam); return f ? f.title : fam }
   // ---------- 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.
@@ -2851,6 +3021,7 @@ const MAIN = String.raw `
     if (BOOT.colorScheme === 'auto') out.push('theme')
     if (S.state && rcSummary()) out.push('rc')
     if (S.state && ahState()) out.push('ah')
+    if (S.state && (S.state.quotaChecks || []).length) out.push('checks')
     return out
   }
   function renderSettingsButton() {
@@ -2882,6 +3053,18 @@ const MAIN = String.raw `
       const on = ahState().settings.auto
       out.push(link(t('ah.button'), on ? t('ah.on') : t('ah.off'), on ? 'chip-ok' : '', () => setPage('handoff')))
     }
+    // Quota checks that ask the Host (spec §3.26): one switch per Family, with what it does in plain words.
+    if (secs.includes('checks')) {
+      if (out.length) out.push(h('div', { class: 'menu-sep', role: 'separator' }))
+      for (const c of S.state.quotaChecks) {
+        const label = t('set.quotaCheck', { host: c.title })
+        out.push(h('div', { class: 'set-row set-check' },
+          h('div', { class: 'set-text' }, h('span', { class: 'set-label' }, label), h('span', { class: 'set-hint' }, c.blocked ? c.blocked : t('set.quotaCheckHint', { host: c.title, n: c.everyMinutes }))),
+          BOOT.readOnly ? h('span', { class: 'chip chip-sm' + (c.on ? ' chip-ok' : '') }, c.on ? t('ah.on') : t('ah.off'))
+            : h('div', { class: 'seg', role: 'group', 'aria-label': label }, [[true, t('ah.on')], [false, t('ah.off')]].map(([v, text]) =>
+              h('button', { class: 'seg-btn', type: 'button', 'aria-pressed': String(v === c.on), onclick: () => { if (v !== c.on) { closeMenu(); setCheck(c.family, v) } } }, text)))))
+      }
+    }
     return out
   }
   function setLang(v) {
@@ -3198,6 +3381,14 @@ const MAIN = String.raw `
     up.autoBusy = false
     renderUpdate()
   }
+  // The installed sideby skill follows the CLI (spec §3.23): said before the Update, or what to run when sideby may not.
+  function updSkill(u) {
+    const s = u.skillUpdate
+    if (!s) return [h('p', { class: 'small' }, t('upd.skill')), codeCopy(u.skill)]
+    if (!s.outdated) return []
+    if (s.canRun) return [h('p', { class: 'muted small' }, t('upd.skillToo'))]
+    return [h('p', { class: 'small' }, t('upd.skillManaged', { why: s.reason || '' })), codeCopy(s.command)]
+  }
   function renderUpdate() {
     if (!up || dlg.kind !== 'update') return
     const u = updState()
@@ -3211,7 +3402,8 @@ const MAIN = String.raw `
     if (up.done) {
       body.push(h('p', { class: 'note' }, t('upd.done', { v: up.done.latest })))
       body.push(h('p', { class: 'muted small' }, Date.now() > up.waitUntil ? t('upd.restartHint') : [spinner(), ' ', t('upd.reloading')]))
-      body.push(h('p', { class: 'small' }, t('upd.skill')), codeCopy(u.skill))
+      if (up.done.skillUpdated) body.push(h('p', { class: 'small' }, t('upd.skillDone')))
+      else body.push(...updSkill(u))
     } else if (u.available) {
       if (up.changed) body.push(h('p', { class: 'note note-warn' }, t('upd.changed', { v: u.latest })))
       body.push(h('p', null, h('b', null, t('upd.available', { v: u.latest })), ' ',
@@ -3223,7 +3415,7 @@ const MAIN = String.raw `
         body.push(h('p', { class: 'note note-warn' }, t('upd.cannot', { why: u.method.reason || u.method.kind })))
         body.push(codeCopy(u.command))
       }
-      body.push(h('p', { class: 'small' }, t('upd.skill')), codeCopy(u.skill))
+      body.push(...updSkill(u))
     } else if (up.checked && u.latest) {
       body.push(h('p', { class: 'note' }, t('upd.latestNow')))
     } else if (u.checksOff) {
@@ -3258,7 +3450,9 @@ const MAIN = String.raw `
   $('ver').addEventListener('click', () => openVerPop($('ver')))
   $('update').addEventListener('click', openUpdate)
   $('ver-top').addEventListener('click', () => openVerPop($('ver-top')))
-  $('refresh').addEventListener('click', () => load({ check: true, announce: true }))
+  $('refresh').addEventListener('click', refreshAll)
+  $('accounts').addEventListener('dragover', onDragOver)
+  $('accounts').addEventListener('drop', onDrop)
   $('settings').addEventListener('click', () => openPopover($('settings'), 'settings', t('set.button'), settingsPop, 'end'))
   applyTheme()
   renderStatic()