sideby 0.10.0 → 0.12.0

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

@@ -53,7 +53,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, highlight: null, fade: true }
+  const ui = { query: '', attention: false, allFindings: false, healthRef: null, checkingRef: null, desktopRef: null, appBusy: null, appRemove: null, appNew: null, highlight: null, fade: true }
   const $ = (id) => document.getElementById(id)
 
   // ---------- preferences ----------
@@ -254,6 +254,8 @@ const MAIN = String.raw `
     check: 'M9 12l2 2 4-4M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z',
     userPlus: 'M15 19a6 6 0 0 0-12 0M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM19 8v6M16 11h6',
     x: 'M6 6l12 12M18 6L6 18',
+    arrowUp: 'M12 19V5M5 12l7-7 7 7',
+    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',
     clock: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 7v5l3 2',
@@ -632,6 +634,9 @@ const MAIN = String.raw `
   function renderTop() {
     renderUpdated()
     renderHandoffButton()
+    renderUpdateButton()
+    const u = updState()
+    $('foot-text').textContent = t(u && !u.checksOff ? 'foot.textChecks' : 'foot.text')
     // A background refresh keeps the button still; only one the viewer asked for spins it.
     const busy = S.loading && !S.silent
     const refresh = $('refresh')
@@ -1068,6 +1073,147 @@ const MAIN = String.raw `
     const list = needing.map((a) => a.name + ': ' + whyOf(a, now)).join('\n')
     return h('button', { class: 'tag tag-warn tag-btn', type: 'button', title: list, 'aria-pressed': String(ui.attention), onclick: () => { ui.attention = !ui.attention; renderSummary(); renderAccounts() } }, tn('group.attention', needing.length))
   }
+  // ---------- Grok Bot windows (ADR-0019) ----------
+  // Windows of an app that signs in apart from every account, so they get a group of their own after the accounts.
+  // A new window gets the next free three-digit name; removing one asks inside its row first.
+  const APP_NAME = /^[a-z0-9][a-z0-9-]{0,31}$/
+  // A plain bot glyph, not the grok mark: these windows are not grok (Grok Build) accounts.
+  function appBadge() { return h('span', { class: 'badge badge-sm badge-logo', 'aria-hidden': 'true' }, icon('bot')) }
+  function appProfiles() { return (S.state && S.state.appProfiles) || [] }
+  function appId(ref) { return String(ref).slice(0, String(ref).indexOf(':')) }
+  function nextAppName(list) {
+    const taken = new Set(list.map((p) => p.name))
+    for (let i = 1; i < 1000; i++) { const n = String(i).padStart(3, '0'); if (!taken.has(n)) return n }
+    return ''
+  }
+  function appNameProblem(name) {
+    if (!name) return t('app.nameEmpty')
+    return APP_NAME.test(name) ? '' : t('app.nameBad')
+  }
+  function appRow(p) {
+    const busy = ui.appBusy === p.ref
+    const asking = ui.appRemove === p.ref
+    const can = !BOOT.readOnly && p.installed
+    const actions = !can ? null : asking
+      ? h('div', { class: 'row-actions app-actions', role: 'group', 'aria-label': t('app.removeAsk', { ref: p.ref }) },
+        h('span', { class: 'small' }, t('app.removeAsk', { ref: p.ref })),
+        h('button', { class: 'btn btn-sm btn-danger', type: 'button', disabled: busy, onclick: () => removeApp(p) }, t(busy ? 'app.removing' : 'app.removeYes')),
+        h('button', { class: 'btn btn-sm btn-ghost', type: 'button', disabled: busy, onclick: () => { ui.appRemove = null; renderAccounts() } }, t('btn.cancel')))
+      : h('div', { class: 'row-actions app-actions' },
+        h('button', { class: 'btn btn-sm' + (p.running ? '' : ' btn-primary'), type: 'button', disabled: Boolean(ui.appBusy), title: t(p.running ? 'app.showHint' : 'app.openHint', { app: p.app, ref: p.ref }), 'aria-label': t(p.running ? 'app.show' : 'app.openBtn') + ' (' + p.ref + ')', onclick: () => openApp(p.ref) },
+          busy ? t('desk.opening', { app: p.app }) : t(p.running ? 'app.show' : 'app.openBtn')),
+        p.isMain ? null : h('button', { class: 'btn btn-sm btn-ghost', type: 'button', disabled: p.running || Boolean(ui.appBusy), title: t(p.running ? 'app.removeRunning' : 'app.removeHint', { app: p.app }), 'aria-label': t('app.remove') + ' (' + p.ref + ')', onclick: () => { ui.appRemove = p.ref; renderAccounts() } }, t('app.remove')))
+    return h('div', { class: 'app-row', role: 'listitem', 'data-ref': p.ref, 'data-key': p.ref, 'data-sig': sig([p, busy, asking, Boolean(ui.appBusy)]) },
+      h('div', { class: 'ident' }, appBadge(), h('div', { class: 'ident-text' },
+        h('div', { class: 'ident-name' },
+          h('span', { class: 'name' }, p.isMain ? t('app.mainName') : p.name),
+          p.running ? h('span', { class: 'tag tag-ok' }, h('span', { class: 'dot dot-ok', 'aria-hidden': 'true' }), t('app.isOpen')) : null,
+          p.signedIn === true ? h('span', { class: 'tag', title: t('app.signedInHint') }, t('app.signedIn'))
+            : p.signedIn === false ? h('span', { class: 'tag tag-warn', title: t('app.signedInHint') }, t('app.signedOut')) : null),
+        h('div', { class: 'ident-sub' }, dots([h('span', { class: 'mono' }, p.ref), h('span', { class: 'muted' }, p.isMain ? t('app.mainData') : p.appData)])))),
+      actions)
+  }
+  function appFoot(list) {
+    if (BOOT.readOnly || !list[0].installed) return null
+    const n = ui.appNew
+    if (!n)
+      return h('div', { class: 'app-foot', 'data-key': 'foot' },
+        h('button', { class: 'btn btn-sm', type: 'button', disabled: Boolean(ui.appBusy), onclick: () => {
+          ui.appNew = { name: nextAppName(list) }
+          renderAccounts()
+          const el = $('app-new-name')
+          if (el) { el.focus(); el.select() }
+        } }, icon('plus'), t('app.another', { app: list[0].app })),
+        h('span', { class: 'muted small' }, t('app.anotherHint')))
+    const input = h('input', { id: 'app-new-name', type: 'text', class: 'mono', value: n.name, maxlength: '32', autocomplete: 'off', autocapitalize: 'none', spellcheck: 'false', 'aria-label': t('app.nameLabel'), 'aria-describedby': 'app-new-err' })
+    const err = h('span', { id: 'app-new-err', class: 'field-error', role: 'status' })
+    const go = h('button', { class: 'btn btn-sm btn-primary', type: 'button', disabled: Boolean(appNameProblem(n.name)) || Boolean(ui.appBusy), onclick: () => createApp(list) }, t('app.create'))
+    const sync = () => {
+      n.name = input.value.trim()
+      const problem = appNameProblem(n.name)
+      const exists = list.some((p) => p.name === n.name)
+      err.textContent = problem && input.value ? problem : exists ? t('app.exists', { ref: appId(list[0].ref) + ':' + n.name }) : ''
+      err.classList.toggle('field-note', !problem && exists)
+      input.classList.toggle('invalid', Boolean(problem && input.value))
+      go.disabled = Boolean(problem) || Boolean(ui.appBusy)
+    }
+    input.addEventListener('input', sync)
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !appNameProblem(n.name)) { e.preventDefault(); createApp(list) }
+      if (e.key === 'Escape') { ui.appNew = null; renderAccounts() }
+    })
+    return h('div', { class: 'app-foot', 'data-key': 'foot-new' },
+      h('label', { for: 'app-new-name', class: 'small' }, t('app.nameLabel')),
+      h('div', { class: 'app-new' }, input, go, h('button', { class: 'btn btn-sm btn-ghost', type: 'button', onclick: () => { ui.appNew = null; renderAccounts() } }, t('btn.cancel'))),
+      err,
+      h('span', { class: 'muted small' }, t('app.newHint', { app: list[0].app })))
+  }
+  function appGroup(list) {
+    const app = list[0].app
+    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()
+      } },
+        icon('chevron', 'chev'), appBadge(), h('span', { class: 'group-title' }, app),
+        h('span', { class: 'group-count' }, String(list.length))),
+      h('div', { class: 'group-meta' },
+        h('span', { class: 'muted small label-tip' }, t('app.apart'), tipRaw(app, t('app.apartTip', { app })))),
+      list[0].installed ? null : h('div', { class: 'group-meta' }, h('span', { class: 'tag tag-warn' }, t('acct.notInstalled'))))
+    const body = collapsed ? null : h('div', { class: 'rows', id: bodyId, role: 'list', 'data-key': 'rows', 'data-patch': '' }, list.map(appRow))
+    return h('section', { class: 'group group-list' + (collapsed ? ' is-collapsed' : ''), 'aria-label': app, 'data-key': 'app:' + app, 'data-patch': '' },
+      head, body, collapsed ? null : appFoot(list))
+  }
+  // Shown with the account groups unless a family filter or the attention filter is on; the search matches names.
+  function appGroups() {
+    if (prefs.family || ui.attention) return []
+    const q = ui.query.trim().toLowerCase()
+    const out = []
+    for (const app of new Set(appProfiles().map((p) => p.app))) {
+      const all = appProfiles().filter((p) => p.app === app)
+      const list = q && !app.toLowerCase().includes(q) ? all.filter((p) => p.ref.toLowerCase().includes(q)) : all
+      if (list.length) out.push(appGroup(list))
+    }
+    return out
+  }
+  async function openApp(ref) {
+    if (ui.appBusy) return
+    ui.appBusy = ref
+    renderAccounts()
+    let ok = false
+    try {
+      const r = await api('/api/app-profile/open', { ref })
+      const text = r.action === 'started' ? t('app.started', { app: r.app, ref: r.ref }) : r.action === 'focused' ? t('desk.focused', { app: r.app, ref: r.ref }) : ''
+      if (text) toast(text)
+      for (const m of r.notices || []) toast(m, { kind: 'info', duration: 12000 })
+      ok = true
+    } catch (e) { toast(t('app.failed', { ref, msg: e.message }), { kind: 'fail' }) }
+    ui.appBusy = null
+    if (ok) ui.appNew = null
+    renderAccounts()
+    load({ silent: true })
+  }
+  function createApp(list) {
+    const n = ui.appNew
+    if (!n || appNameProblem(n.name)) return
+    openApp(appId(list[0].ref) + ':' + n.name)
+  }
+  async function removeApp(p) {
+    if (ui.appBusy) return
+    ui.appBusy = p.ref
+    renderAccounts()
+    try {
+      await api('/api/app-profile/remove', { ref: p.ref })
+      toast(t('app.removed', { ref: p.ref }))
+    } catch (e) { toast(t('app.removeFailed', { ref: p.ref, msg: e.message }), { kind: 'fail' }) }
+    ui.appBusy = null
+    ui.appRemove = null
+    renderAccounts()
+    load({ silent: true })
+  }
   function group(fam, list, total, now, cols) {
     const info = family(fam)
     const filtering = Boolean(ui.query.trim()) || ui.attention
@@ -1104,7 +1250,8 @@ const MAIN = String.raw `
   function emptyState() {
     const fams = S.state.families.slice().sort((x, y) => Number(y.installed) - Number(x.installed))
     return h('div', { class: 'empty' },
-      h('span', { class: 'logo', 'aria-hidden': 'true' }, h('i'), h('i')),
+      // The header's mark, cloned (page.ts draws it from core/brand-mark.ts).
+      h('span', { class: 'logo', 'aria-hidden': 'true' }, document.querySelector('.brand .logo svg')?.cloneNode(true) ?? null),
       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),
@@ -1145,13 +1292,14 @@ const MAIN = String.raw `
     const all = S.state.accounts
     const now = Date.now()
     $('toolbar').hidden = !all.length
-    if (!all.length) { setKids(count, null); patch(box, emptyState()); return }
+    if (!all.length) { setKids(count, null); patch(box, [emptyState()].concat(appGroups())); return }
     const shown = all.filter((a) => (!prefs.family || a.family === prefs.family) && matchesQuery(a, ui.query, famTitle(a)) && (!ui.attention || reasonsOf(a, now).length))
     const filtered = shown.length !== all.length
     patch(count, filtered
       ? [t('count.filtered', { n: shown.length, total: all.length }), ' ', h('button', { class: 'link-btn', type: 'button', onclick: clearFilters }, t('filter.clear'))]
       : tn('count.accounts', all.length))
-    if (!shown.length) { patch(box, noMatch()); return }
+    const apps = appGroups()
+    if (!shown.length && !apps.length) { patch(box, noMatch()); return }
     const cols = quotaColumns(shown)
     box.style.setProperty('--qn', String(cols.length))
     const ids = S.state.families.map((f) => f.id)
@@ -1161,7 +1309,7 @@ const MAIN = String.raw `
       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))
     }
-    patch(box, groups)
+    patch(box, groups.concat(apps))
     if (ui.fade && !REDUCED) {
       box.classList.add('view-in')
       setTimeout(() => box.classList.remove('view-in'), 400)
@@ -2530,8 +2678,135 @@ const MAIN = String.raw `
     if (Date.now() - S.lastTry > 3000) load({ silent: true })
   }
 
+  // ---------- updates (spec §3.23, ADR-0021) ----------
+  // A label in the header only when a newer sideby exists; the footer version opens the same dialog any time, with
+  // the Auto Update switch. Updating is one plan shown first and one click; afterwards the page waits for the new
+  // build and reloads (a background Panel restarts itself, a Portal loads the new code by itself).
+  let up = null
+  function updState() { return BOOT.updates && S.state ? S.state.update || null : null }
+  function renderUpdateButton() {
+    const b = $('update')
+    const u = updState()
+    b.hidden = !(u && u.available)
+    if (!b.hidden) {
+      setKids(b, [icon('arrowUp'), h('span', null, t('upd.label', { v: u.latest }))])
+      b.setAttribute('aria-label', t('upd.labelLong', { v: u.latest, cur: u.current }))
+      b.title = t('upd.labelLong', { v: u.latest, cur: u.current })
+    }
+    if (dlg.kind === 'update' && up && !up.busy) renderUpdate()
+  }
+  function openUpdate() {
+    if (!BOOT.updates) return
+    up = { busy: false, error: null, done: null, changed: false, autoPlan: null, autoBusy: false, waitUntil: 0 }
+    showDialog('update')
+    renderUpdate()
+  }
+  async function updRun() {
+    const u = updState()
+    if (!u) return
+    up.busy = true
+    dlg.busy = true
+    up.error = null
+    renderUpdate()
+    try {
+      const r = await api('/api/update', { confirm: true, version: u.latest })
+      if (!r.updated) {
+        // The registry names another version than the dialog showed: show the new plan and let the person look again.
+        Object.assign(S.state.update, { latest: r.latest, available: r.available, command: r.command, canRun: r.canRun, releaseNotes: r.releaseNotes, method: r.method })
+        up.changed = true
+      } else {
+        up.done = r
+        up.waitUntil = Date.now() + 20000
+        updWait()
+      }
+    } catch (e) { up.error = e }
+    up.busy = false
+    dlg.busy = false
+    renderUpdate()
+  }
+  // After an Update the server (or the Portal's worker) comes back with a new build; load() then reloads the page.
+  function updWait() {
+    if (!up || !up.done || S.newBuild) { if (S.newBuild) location.reload(); return }
+    if (Date.now() > up.waitUntil) { renderUpdate(); return }
+    setTimeout(() => { void load({ silent: true }).then(updWait) }, 1500)
+  }
+  async function updAuto(on) {
+    up.autoBusy = true
+    up.error = null
+    renderUpdate()
+    try {
+      const r = await api('/api/update/settings', { auto: on })
+      up.autoPlan = r.changed ? { auto: on, file: r.file } : null
+    } catch (e) { up.error = e }
+    up.autoBusy = false
+    renderUpdate()
+  }
+  async function updAutoSave() {
+    if (!up.autoPlan) return
+    up.autoBusy = true
+    renderUpdate()
+    try {
+      await api('/api/update/settings', { auto: up.autoPlan.auto, confirm: true })
+      toast(t(up.autoPlan.auto ? 'upd.autoOnSaved' : 'upd.autoOffSaved'))
+      up.autoPlan = null
+      await load({ silent: true })
+    } catch (e) { up.error = e }
+    up.autoBusy = false
+    renderUpdate()
+  }
+  function renderUpdate() {
+    if (!up || dlg.kind !== 'update') return
+    const u = updState()
+    const body = []
+    if (!u) {
+      body.push(h('p', { class: 'muted' }, spinner(), ' ', t('upd.loading')))
+      setKids(dlg.el, dialogFrame(t('upd.title'), null, body, null))
+      return
+    }
+    body.push(h('p', null, t('upd.current', { v: u.current })))
+    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))
+    } 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 })), ' ',
+        h('a', { href: u.releaseNotes, target: '_blank', rel: 'noopener noreferrer' }, t('upd.notes'))))
+      if (u.canRun) {
+        body.push(h('p', { class: 'small' }, t('upd.runs')), codeCopy(u.command))
+        body.push(h('p', { class: 'muted small' }, t('upd.after')))
+      } else {
+        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))
+    } else if (u.checksOff) {
+      body.push(h('p', { class: 'muted small' }, t('upd.checksOff', { why: u.checksOff })))
+    } else if (u.latest) {
+      body.push(h('p', { class: 'muted small' }, t('upd.latest') + (u.checkedAt ? ' · ' + t('upd.checked', { ago: ago(u.checkedAt) }) : '')))
+    } else body.push(h('p', { class: 'muted small' }, t('upd.notYet')))
+    if (!BOOT.readOnly && !up.done) {
+      const box = h('input', { type: 'checkbox', disabled: up.autoBusy || !u.method.canUpdate })
+      box.checked = up.autoPlan ? up.autoPlan.auto : u.auto
+      box.addEventListener('change', () => updAuto(box.checked))
+      body.push(h('div', { class: 'check-row' }, h('label', { class: 'check' }, box,
+        h('span', null, h('b', null, t('upd.auto')), h('span', { class: 'muted small' }, u.method.canUpdate ? t('upd.autoHint') : t('upd.autoNo'))))))
+      if (up.autoPlan) body.push(h('p', { class: 'small' }, t('upd.autoChange', { file: up.autoPlan.file, value: String(up.autoPlan.auto) }), ' ',
+        h('button', { class: 'btn btn-sm btn-primary', type: 'button', disabled: up.autoBusy, onclick: updAutoSave }, t('upd.save'))))
+    }
+    if (BOOT.readOnly) body.push(h('p', { class: 'note' }, t('banner.readOnly')))
+    if (up.error) body.push(errorNote(up.error, null))
+    const foot = [h('button', { class: 'btn', type: 'button', disabled: up.busy, onclick: () => dlg.el.close() }, t('btn.close'))]
+    if (u.available && u.canRun && !BOOT.readOnly && !up.done)
+      foot.push(h('button', { class: 'btn btn-primary', type: 'button', disabled: up.busy, 'aria-busy': up.busy ? 'true' : null, onclick: updRun }, up.busy ? spinner() : null, up.busy ? t('upd.updating') : t('upd.now', { v: u.latest })))
+    setKids(dlg.el, dialogFrame(t('upd.title'), null, body, foot))
+  }
+
   // ---------- start ----------
-  $('ver').textContent = BOOT.version ? 'v' + BOOT.version : ''
+  $('ver').textContent = BOOT.version ? 'sideby v' + BOOT.version : 'sideby'
+  $('ver').disabled = !BOOT.updates
+  $('ver').addEventListener('click', openUpdate)
+  $('update').addEventListener('click', openUpdate)
   $('refresh').addEventListener('click', () => load({ check: true, announce: true }))
   $('handoff').addEventListener('click', () => setPage('handoff'))
   $('lang').addEventListener('click', () => {
@@ -2546,6 +2821,7 @@ const MAIN = String.raw `
     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

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

@@ -1,7 +1,8 @@
 // The Panel page's styles: design tokens (a host theme layers its values over them, see theme.ts) and the rules
 // that read them. Every color, radius and size below comes from a token, so a host theme reaches every component.
 import { resolveTheme } from './theme.js';
-// Colors defined from other tokens; repeated in both schemes so they follow that scheme's base colors.
+// Colors defined from other tokens; repeated in both schemes so they follow that scheme's base colors. Dark mode keeps
+// the logo tile light: the mark's ink outline (core/brand-mark.ts) needs a light ground.
 const DERIVED_COLORS = `
   --btn-text: var(--text); --btn-hover-text: var(--accent); --check: var(--focus);
   --logo-bg: var(--accent-soft); --logo-fg: var(--focus); --logo-line: var(--border);
@@ -34,7 +35,8 @@ const DARK_TOKENS = `
   --ok: #4ade80; --ok-bar: #22c55e; --ok-soft: #13291c; --warn: #fbbf24; --warn-bar: #f59e0b; --warn-soft: #2d2410;
   --fail: #f87171; --fail-bar: #ef4444; --fail-soft: #331717; --track: #1f2c3a;
   --spark: oklch(from var(--accent) clamp(0.7, l, 0.78) max(c, 0.14) h); --spark-soft: oklch(from var(--accent) 0.45 calc(max(c, 0.14) * 0.6) h);
-  --shadow: 0 1px 2px rgba(0,0,0,.3); --float-shadow: 0 12px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);${DERIVED_COLORS}`;
+  --shadow: 0 1px 2px rgba(0,0,0,.3); --float-shadow: 0 12px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);${DERIVED_COLORS}
+  --logo-bg: #dcebf7; --logo-line: transparent;`;
 /**
  * The page's style block: default tokens, the host's tokens over them, then the rules that read them. With
  * `colorScheme: 'auto'` the page follows the system unless the viewer picked light or dark in the Panel, which sets
@@ -221,6 +223,8 @@ code, .mono { font-family: var(--mono); font-size: 0.92em; }
 .link-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: var(--strong-weight); cursor: pointer; }
 .link-btn:hover:not(:disabled) { text-decoration: underline; }
 .link-btn:disabled { color: var(--faint); cursor: not-allowed; }
+.foot .link-btn { color: inherit; font-weight: inherit; }
+.update-btn { border-color: var(--accent); color: var(--accent); }
 .link-btn:focus-visible { outline: var(--focus-outline); outline-offset: 2px; border-radius: 3px; }
 
 /* Usage: total over cache hits, with the 7 day bars beside both lines. In the wide list the bars sit at the column's
@@ -263,6 +267,7 @@ code, .mono { font-family: var(--mono); font-size: 0.92em; }
 .badge svg { display: block; width: 20px; height: 20px; fill: currentColor; }
 .badge-sm { width: 26px; height: 26px; border-radius: 7px; font-size: 10.5px; }
 .badge-sm svg { width: 16px; height: 16px; }
+.badge svg.ic { fill: none; stroke: currentColor; }
 .badge-xs { width: 16px; height: 16px; border-radius: 4px; border: 0; background: none; }
 .badge-xs svg { width: 13px; height: 13px; }
 .chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: var(--chip-radius); background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font: inherit; font-size: 12px; line-height: 20px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@@ -322,6 +327,8 @@ a.btn:hover { text-decoration: none; }
 .btn svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
 .btn:disabled { background: var(--surface-2); border-color: var(--border); color: var(--faint); cursor: not-allowed; }
 .btn-ghost:disabled { background: transparent; border-color: transparent; }
+.btn-danger { border-color: var(--fail); color: var(--fail); }
+.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--fail) 10%, transparent); border-color: var(--fail); color: var(--fail); }
 /* A busy button is disabled but keeps its variant, so a running action does not look unavailable. */
 .btn[aria-busy=true]:disabled { cursor: progress; color: var(--muted); }
 .btn-primary[aria-busy=true]:disabled { background: var(--primary); border-color: var(--primary-border); color: var(--on-primary); opacity: .85; }
@@ -433,6 +440,16 @@ select:is(:hover, :focus) { --chevron: var(--text); }
 .field-hint { color: var(--muted); font-size: var(--small); }
 .field-hint:empty { display: none; }
 .field-error:empty { display: none; }
+.field-error.field-note { color: var(--muted); }
+/* Grok Bot windows (ADR-0019): a simple row of their own, since they have no quota, usage or health columns. */
+.app-row { display: flex; align-items: center; gap: 12px; padding: 11px 10px 11px 16px; border-top: 1px solid var(--border); min-width: 0; }
+.app-row:first-child { border-top: 0; }
+.app-row > .ident { flex: 1; }
+.app-actions { flex: none; justify-content: flex-end; }
+.app-foot { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px 12px; border-top: 1px solid var(--border); }
+.app-foot > .btn { align-self: flex-start; }
+.app-new { display: flex; gap: 8px; align-items: center; max-width: 420px; }
+.app-new input { height: var(--ctl-h-sm); flex: 1; min-width: 0; }
 .fam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
 .fam-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--ctl-radius); cursor: pointer; min-width: 0; transition: border-color .12s, background-color .12s; }
 .fam-card:hover { border-color: var(--btn-hover-border); }
@@ -524,6 +541,8 @@ select:is(:hover, :focus) { --chevron: var(--text); }
 
 @media (max-width: 1100px) {
   .col-head { display: none; }
+  .app-row { flex-wrap: wrap; }
+  .app-actions { width: 100%; justify-content: flex-start; }
   .row { grid-template-columns: minmax(0, 1fr) auto var(--m-w); grid-template-areas: "id health more" "quota quota quota" "usage usage last" "notes notes notes"; row-gap: 10px; }
   .row-folded { grid-template-areas: "id id more"; }
   .row > .quota { grid-template-columns: repeat(var(--qn), minmax(0, 1fr)); max-width: 560px; }

package/dist/src/panel/page.d.ts

@@ -14,6 +14,8 @@ export interface PageOptions {
     theme?: ResolvedTheme;
     /** Host language from createPanelHandler's `lang`; `auto` (the default) lets the viewer choose. */
     lang?: 'auto' | 'en' | 'zh';
+    /** createPanelHandler's `updates`: false hides everything about sideby updates. */
+    updates?: boolean;
 }
 /** JSON that is safe inside a `<script>` element: no `</script>`, `<!--` or line separators survive. */
 export declare function jsonForScript(value: unknown): string;

package/dist/src/panel/page.js

@@ -1,6 +1,7 @@
 // The Panel page: one self-contained HTML document with inline CSS and JS, no external resources. The parts live in
 // sibling modules: page-styles.ts (tokens and CSS), page-script.ts (behaviour, with page-logic.ts helpers) and
 // i18n.ts (English and Chinese text); this module assembles them under the CSP nonce.
+import { MARK_SVG } from '../core/brand-mark.js';
 import { ALIAS_NAME, RESERVED_ALIASES } from '../core/config.js';
 import { QUOTA_FAIL_PERCENT, QUOTA_WARN_PERCENT, USAGE_DAYS } from '../core/quota-levels.js';
 import { MESSAGES } from './i18n.js';
@@ -33,6 +34,7 @@ export function renderPage(opts) {
         version: opts.version ?? '',
         build: opts.build ?? '',
         readOnly: Boolean(opts.readOnly),
+        updates: opts.updates !== false,
         colorScheme: theme.colorScheme,
         lang,
         warn: QUOTA_WARN_PERCENT,
@@ -50,14 +52,14 @@ export function renderPage(opts) {
 <meta name="color-scheme" content="${scheme}">
 <meta name="referrer" content="no-referrer">
 <title>sideby</title>
-<link rel="icon" href="data:,">
+<link rel="icon" type="image/svg+xml" href="${attr(opts.basePath)}/favicon.svg">
 <style${nonce}>${pageStyles(theme)}</style>
 </head>
 <body${theme.header === 'bar' ? ' class="header-bar"' : ''}>
 <header class="top">
   <div class="top-in">
     <div class="brand">
-      <span class="logo" aria-hidden="true"><svg viewBox="0 0 40 40"><path d="M18.5 8A10.5 10.5 0 0 0 18.5 29Z"/><path d="M21.5 11A10.5 10.5 0 0 1 21.5 32Z" fill-opacity=".55"/></svg></span>
+      <span class="logo" aria-hidden="true">${MARK_SVG}</span>
       <div>
         <h1>sideby</h1>
         <p class="tagline" data-i18n="top.tagline">Every AI coding account, side by side.</p>
@@ -67,6 +69,7 @@ export function renderPage(opts) {
       <span id="updated" class="muted small">Loading…</span>
       <button id="lang" class="icon-btn lang-btn" type="button"${lang === 'auto' ? '' : ' hidden'}>${lang === 'zh' ? 'EN' : '中文'}</button>
       <button id="theme" class="icon-btn" type="button" hidden></button>
+      <button id="update" class="btn update-btn" type="button" hidden></button>
       <button id="handoff" class="btn" type="button" hidden></button>
       <button id="refresh" class="btn" type="button" aria-label="Refresh"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11a8 8 0 1 0-2.3 5.7"/><path d="M20 4v7h-7"/></svg><span class="hide-sm" data-i18n="top.refresh">Refresh</span></button>
     </div>
@@ -87,7 +90,7 @@ export function renderPage(opts) {
     <div class="section-head"><h2 id="h-checkup" data-i18n="health.title">Health check</h2></div>
     <span class="sk sk-line w70"></span><span class="sk sk-line w50"></span>
   </section>
-  <footer class="foot muted small">sideby <span id="ver"></span> · <span data-i18n="foot.text">runs on this machine; nothing leaves it.</span></footer>
+  <footer class="foot muted small"><button id="ver" class="link-btn" type="button">sideby</button> · <span id="foot-text" data-i18n="foot.text">runs on this machine; nothing leaves it.</span></footer>
 </main>
 <div id="conn" class="conn" role="status" hidden></div>
 <div id="toasts" class="toasts" aria-live="polite" popover="manual"></div>

package/dist/src/runtime.d.ts

@@ -246,11 +246,13 @@ export interface Runtime {
     /**
      * Where an Auto Handoff from `origin` would go now (spec §3.17 "选号"): every Account of every Family is a
      * candidate; `used` lists the chain's Accounts so far. `ahead` decides early what happens once the origin's fullest
-     * window reaches the threshold, as plan.json and the Panel need. `to` names the only candidate (`handoff ready --to`).
+     * window reaches the threshold, as plan.json and the Panel need. `to` names the only candidate (`handoff ready --to`);
+     * `manual` (`handoff ready`) never waits for a reset.
      */
     handoffDecision(origin: Account, used: readonly string[], opts?: {
         ahead?: boolean;
         to?: string;
+        manual?: boolean;
     }): Promise<HandoffDecision>;
     readContext(): ReadContext;
 }

package/dist/src/runtime.js

@@ -668,6 +668,12 @@ export async function createRuntime(opts = {}) {
             const self = candidates.find((c) => c.ref === origin.ref);
             if (!self)
                 throw new UserError(`${origin.ref} is not an account sideby can find; run \`sideby list\``);
+            try {
+                self.resumesAtReset = (await familyOf(origin.family).handoff?.resumesAtReset?.(origin)) === true;
+            }
+            catch {
+                // cannot tell: do not wait
+            }
             return selectNext({
                 origin: self,
                 candidates,
@@ -677,6 +683,7 @@ export async function createRuntime(opts = {}) {
                 now: now(),
                 ...(opts.ahead ? { ahead: true } : {}),
                 ...(opts.to !== undefined ? { to: opts.to } : {}),
+                ...(opts.manual ? { manual: true } : {}),
             });
         },
         readContext,

package/dist/src/types.d.ts

@@ -150,6 +150,11 @@ export interface FamilyHandoff {
     }): Promise<string | undefined>;
     /** One-time hook installation for a Host without a launch option (Grok); the same contract as `quotaSetup`. */
     hookSetup?: QuotaSetup;
+    /**
+     * Whether a session of this Account stopped at the usage limit continues by itself once the limit resets (Claude's
+     * `autoContinueAtUsageLimit`). Auto Handoff waits for a reset only when this says true; left out, it never waits.
+     */
+    resumesAtReset?(account: Account): Promise<boolean>;
 }
 /** Identity fields of a signed-in Account. */
 export interface AccountIdentity {

package/dist/testing/index.js

@@ -19,6 +19,8 @@ export async function withFakeHome(fn) {
         XDG_STATE_HOME: join(home, '.local', 'state'),
         PATH: `${bin}:/usr/bin:/bin`,
         NO_COLOR: '1',
+        // No Update Check from tests (spec §3.23): it is sideby's only network request. Delete it to test checks.
+        SIDEBY_NO_UPDATE_NOTIFIER: '1',
     };
     const h = {
         home,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sideby",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Run work, personal and API-key accounts at the same time, without their configs drifting apart.",
   "license": "MIT",
   "author": "Adonis0123 (https://github.com/Adonis0123)",
@@ -77,5 +77,5 @@
   },
   "packageManager": "pnpm@10.15.0",
   "readmeFilename": "README.md",
-  "readme": "<p align=\"center\">\n  <img alt=\"sideby: work, personal and API-key accounts, one terminal each, one shared config\" src=\"https://raw.githubusercontent.com/Adonis0123/sideby/main/docs/assets/banner.jpg\" width=\"880\">\n</p>\n\n<p align=\"center\">\n  <b>Run work, personal and API-key accounts at the same time, without their configs drifting apart.</b><br>\n  Each account is its own directory and its own terminal. Skills, hooks and settings stay linked to your main account. Claude Code, Codex, Grok Build and pi.\n</p>\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/sideby\"><img alt=\"npm\" src=\"https://img.shields.io/npm/v/sideby\"></a>\n  <a href=\"https://github.com/Adonis0123/sideby/actions/workflows/ci.yml\"><img alt=\"CI\" src=\"https://github.com/Adonis0123/sideby/actions/workflows/ci.yml/badge.svg\"></a>\n  <img alt=\"Node 22.18+\" src=\"https://img.shields.io/badge/node-%E2%89%A522.18-339933\">\n  <a href=\"LICENSE\"><img alt=\"MIT\" src=\"https://img.shields.io/badge/license-MIT-blue\"></a>\n</p>\n\n<p align=\"center\">English | <a href=\"README.zh-CN.md\">中文</a></p>\n\n## Why not just an alias?\n\n`CLAUDE_CONFIG_DIR` plus a shell alias already starts a second account. It does not keep skills and settings in one place, and it does not show quota for every account. [Does this break a provider's terms?](docs/guide/faq.md#terms)\n\n| | At the same time | Skills, hooks, settings | Quota and usage | Setup |\n|---|---|---|---|---|\n| `CLAUDE_CONFIG_DIR` and an alias | Yes. Each terminal exports the variable. | Each directory is its own copy. They drift unless you symlink by hand. | That session's status line | One alias per account |\n| [cc-switch](https://github.com/farion1231/cc-switch) | Enabling a provider writes the host's live config, so open sessions share that switch. | Plugin settings are copied across providers as a separate step. | The active provider, from its quota endpoint | Install the desktop app |\n| sideby | Yes. `sideby run` selects the directory for that process and leaves your shell alone. | Linked to the main account. `sideby doctor --fix` repairs copies. Sign-in and sessions stay separate. | Every account, from local files. Claude needs `quota setup`. | `npm i -g sideby`, then `sideby new` and sign in |\n\ncc-switch's docs describe that switch: it writes the live settings file ([README](https://github.com/farion1231/cc-switch#readme)). [#1105](https://github.com/farion1231/cc-switch/issues/1105) and [#2908](https://github.com/farion1231/cc-switch/issues/2908) ask for several sessions at once. [#1106](https://github.com/farion1231/cc-switch/issues/1106) is closed; the maintainer says Claude Code's \"open terminal\" can start one provider without changing the global config.\n\n## Quick start\n\nRequires Node 22.18+ and at least one Host CLI (Claude Code, Codex, Grok Build or pi) installed. AI agents: follow the setup steps in [`llms.txt`](llms.txt) (\"Set up sideby for a user\") instead.\n\n```sh\nnpm i -g sideby\nsideby new claude work        # create ~/.claude-work, sharing ~/.claude's skills and hooks\nsideby login claude:work      # sign in once\nsideby run work               # Claude Code on the work account\nsideby ui                     # every account's quota at http://127.0.0.1:17420\n```\n\n`sideby run claude:main` keeps using `~/.claude` in another terminal at the same time. Arguments after `--` go to the Host: `sideby run work -- --resume`. To try it without installing, run `npx sideby`.\n\n## Set up with your AI agent\n\nPaste this into Claude Code, Codex or any coding agent:\n\n```text\nInstall the sideby CLI (npm package `sideby`) and its agent skill, then set up a second Claude Code account for me.\nFollow \"Set up sideby for a user\" in https://raw.githubusercontent.com/Adonis0123/sideby/main/llms.txt\n```\n\nThe agent checks Node and your Host CLIs, installs sideby and the skill, creates the account, tells you what it shares with your main one and makes its short command work. You sign in once in your browser; the agent gives you that one command. Once the skill is installed, short requests work too: \"add another Claude account, cc008\", \"what do my Codex accounts share?\", \"which account still has quota?\".\n\n## What it looks like\n\n<img alt=\"Two terminals: the personal account and the work account running at the same time, both linked to the main account's skills and settings, then the local quota panel, and at 95% Auto Handoff moving work's session to the next account\" src=\"https://raw.githubusercontent.com/Adonis0123/sideby/main/docs/assets/demo.gif\" width=\"1280\">\n\n<picture>\n  <source media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/Adonis0123/sideby/main/docs/assets/panel-dark.png\">\n  <source media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/Adonis0123/sideby/main/docs/assets/panel.png\">\n  <img alt=\"sideby panel: every account's 5h and 7d quota, 7-day token usage and health in one page\" src=\"https://raw.githubusercontent.com/Adonis0123/sideby/main/docs/assets/panel.png\" width=\"1280\">\n</picture>\n\n## What else it does\n\n| You want to | Run | Guide |\n|---|---|---|\n| Add an API key account (DeepSeek, a gateway, …) | `sideby new claude deepseek --api` | [API accounts](docs/guide/usage.md#api-accounts) |\n| Find and fix config drift between accounts | `sideby doctor --fix` | [Doctor](docs/guide/usage.md#doctor) |\n| See Claude quota (Codex needs no setup) | `sideby quota setup claude --yes` | [Claude quota](docs/guide/usage.md#claude-quota) |\n| Find the cheapest auto-compact size from your own sessions, and use it in one click | `sideby tune` (or the panel's Context tuning tab) | [Context tuning](docs/guide/usage.md#context-tuning) |\n| See each account's model and effort, and set them per account | `sideby model <account>` (or click the model in the panel) | [Model and effort](docs/guide/usage.md#model-and-effort) |\n| Stop Claude sessions from connecting to claude.ai by themselves (Remote Control), for every account at once | `sideby remote-control off` (or the panel's banner) | [Remote Control](docs/guide/usage.md#remote-control) |\n| Move on when an account hits its limit | `sideby next claude` | [Handoff](docs/guide/usage.md#when-an-account-hits-its-limit) |\n| Let a running task move to the next account by itself when quota runs low (off by default; see the risk) | `sideby handoff enable` (or the panel) | [Auto Handoff](docs/guide/usage.md#auto-handoff) |\n| Short commands such as `ccw` | `sideby alias add ccw claude:work` | [Shell functions](docs/guide/configuration.md#shell-functions) |\n| Reopen a session from Orca and the like in the account that holds it | `\"resumeRouting\": true` in config | [Resuming from other tools](docs/guide/configuration.md#resuming-from-other-tools) |\n| Open Claude Desktop or the Codex app as one account, several side by side (macOS) | `sideby desktop claude:work` (or the panel) | [Desktop apps](docs/guide/usage.md#desktop-apps) |\n| Open the panel from the Dock or app menu | `sideby app install` | [Panel app](docs/guide/panel.md#panel-app) |\n| Show the panel inside your own local page | `createPanelHandler()` | [Embed the panel](docs/guide/panel.md#embed-the-panel) |\n| Add a Host or a pre-launch check | a local plugin | [Plugins](docs/guide/plugins.md) |\n\n## Supported hosts\n\n| Host | Account directories | Sign-in | Quota | Usage (7 days) |\n|---|---|---|---|---|\n| Claude Code | `~/.claude`, `~/.claude-<name>` | `claude auth login` | ✓ after `quota setup claude` | ✓ |\n| Codex CLI | `~/.codex`, `~/.codex-<name>` | `codex login` | ✓ | ✓ |\n| Grok Build | `~/.grok`, `~/.grok-<name>` | `grok login` | no public source | no public source |\n| pi | `~/.pi/agent`, `~/.pi-<name>/agent` | `/login` inside pi | no public source | no public source |\n\nsideby starts the official binary on your `PATH` and never patches it. Tested versions and per-Host notes are in the [guide](docs/guide/usage.md#host-notes).\n\n## Platforms\n\nmacOS and Linux. CI runs the suite on `ubuntu-latest` and `macos-latest`, Node 22 and 24. **Windows is untested.** `sideby app` only installs a launcher on macOS and Linux. Linked items are symlinks, `sideby shell-init` prints bash and zsh functions, and the Claude quota wrapper runs `/bin/sh`.\n\n## Roadmap\n\n**Gemini CLI.** Gemini can point at another config directory with `GEMINI_CONFIG_DIR`. Older docs use `GEMINI_CLI_HOME`; current builds treat that name as deprecated, and exit on startup if it is set together with an exact directory override. A sideby family still needs a tested Gemini version, a login check that does not read tokens, and a list of which files to link or copy. That is more than a small patch, so it is not in this version.\n\n## Safe by design\n\n- It never edits a Host's global config to switch accounts. It moves a task to another account only when you turn on Auto Handoff, and never proxies requests or pools logins.\n- It never reads, prints or sends a credential value. Nothing leaves your machine: sideby calls no remote service.\n- `doctor --fix` never replaces a real file and never changes where a link points.\n\nDetails and the terms-of-service question are in the [FAQ](docs/guide/faq.md).\n\nUsage questions and ideas go in [Discussions](https://github.com/Adonis0123/sideby/discussions).\n\n## Docs\n\n- [Using sideby](docs/guide/usage.md): accounts, API accounts, Doctor, quota, Handoff, Host notes\n- [Commands](docs/guide/commands.md): every command, exit codes and `--json`\n- [Configuration](docs/guide/configuration.md): `config.json`, aliases, shell functions\n- [Panel](docs/guide/panel.md): the panel, panel app and embedding\n- [Plugins](docs/guide/plugins.md): write your own Family or launch hook\n- [FAQ](docs/guide/faq.md): terms of service, data locations, alternatives, uninstall\n- [Changelog](https://github.com/Adonis0123/sideby/releases)\n\n## For AI agents\n\n- [`llms.txt`](llms.txt): setup steps, commands, JSON contract and plugin API in one index. `sideby families --json` states what each Host's accounts share.\n- [`skills/sideby/SKILL.md`](skills/sideby/SKILL.md): one Agent Skill for seeing, repairing and creating accounts and for moving on when one hits its limit. Install with `npx skills add Adonis0123/sideby -g`; `sideby doctor` warns when the installed copy is for another sideby version.\n- [`AGENTS.md`](AGENTS.md): rules for agents working on this repository.\n\n## License\n\n[MIT](LICENSE)\n"
+  "readme": "<p align=\"center\">\n  <img alt=\"sideby: work, personal and API-key accounts, one terminal each, one shared config\" src=\"https://raw.githubusercontent.com/Adonis0123/sideby/main/docs/assets/banner.jpg\" width=\"880\">\n</p>\n\n<p align=\"center\">\n  <b>Run work, personal and API-key accounts at the same time, without their configs drifting apart.</b><br>\n  Each account is its own directory and its own terminal. Skills, hooks and settings stay linked to your main account. Claude Code, Codex, Grok Build and pi.\n</p>\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/sideby\"><img alt=\"npm\" src=\"https://img.shields.io/npm/v/sideby\"></a>\n  <a href=\"https://github.com/Adonis0123/sideby/actions/workflows/ci.yml\"><img alt=\"CI\" src=\"https://github.com/Adonis0123/sideby/actions/workflows/ci.yml/badge.svg\"></a>\n  <img alt=\"Node 22.18+\" src=\"https://img.shields.io/badge/node-%E2%89%A522.18-339933\">\n  <a href=\"LICENSE\"><img alt=\"MIT\" src=\"https://img.shields.io/badge/license-MIT-blue\"></a>\n</p>\n\n<p align=\"center\">English | <a href=\"README.zh-CN.md\">中文</a></p>\n\n## Quick start\n\nRequires Node 22.18+ and at least one Host CLI (Claude Code, Codex, Grok Build or pi) installed. AI agents: follow the setup steps in [`llms.txt`](llms.txt) (\"Set up sideby for a user\") instead.\n\n```sh\nnpm i -g sideby\nsideby new claude work           # create ~/.claude-work, sharing ~/.claude's skills and hooks\nsideby login claude:work         # sign in once\nsideby run work                  # Claude Code on the work account\nsideby quota setup claude --yes  # Claude quota in the panel; undo: sideby quota teardown claude\nsideby ui                        # every account's quota at http://127.0.0.1:17420\n```\n\n`sideby update` installs a newer sideby when there is one; sideby says so after a command and in the panel. `sideby run claude:main` keeps using `~/.claude` in another terminal at the same time. Arguments after `--` go to the Host: `sideby run work -- --resume`. To try it without installing, run `npx sideby`.\n\n## Set up with your AI agent\n\nPaste this into Claude Code, Codex or any coding agent:\n\n```text\nInstall the sideby CLI (npm package `sideby`) and its agent skill, then set up a second Claude Code account for me.\nFollow \"Set up sideby for a user\" in https://raw.githubusercontent.com/Adonis0123/sideby/main/llms.txt\n```\n\nThe agent checks Node and your Host CLIs, installs sideby and the skill, creates the account, tells you what it shares with your main one and makes its short command work. You sign in once in your browser; the agent gives you that one command. Once the skill is installed, short requests work too: \"add another Claude account, cc008\", \"what do my Codex accounts share?\", \"which account still has quota?\".\n\n## What it looks like\n\nThe 25-second story: one account buried in tasks, then accounts side by side sharing one setup, and a task moving on when one runs out.\n\nhttps://github.com/user-attachments/assets/3a470c03-9009-4f1d-b7f6-8b4625d74958\n\n<img alt=\"Two terminals: the personal account and the work account running at the same time, both linked to the main account's skills and settings, then the local quota panel, and at 95% Auto Handoff moving work's session to the next account\" src=\"https://raw.githubusercontent.com/Adonis0123/sideby/main/docs/assets/demo.gif\" width=\"1280\">\n\n<picture>\n  <source media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/Adonis0123/sideby/main/docs/assets/panel-dark.png\">\n  <source media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/Adonis0123/sideby/main/docs/assets/panel.png\">\n  <img alt=\"sideby panel: every account's 5h and 7d quota, 7-day token usage and health in one page\" src=\"https://raw.githubusercontent.com/Adonis0123/sideby/main/docs/assets/panel.png\" width=\"1280\">\n</picture>\n\n## Why not just an alias?\n\n`CLAUDE_CONFIG_DIR` plus a shell alias already starts a second account. It does not keep skills and settings in one place, and it does not show quota for every account. [Does this break a provider's terms?](docs/guide/faq.md#terms)\n\n| | At the same time | Skills, hooks, settings | Quota and usage | Setup |\n|---|---|---|---|---|\n| `CLAUDE_CONFIG_DIR` and an alias | Yes. Each terminal exports the variable. | Each directory is its own copy. They drift unless you symlink by hand. | That session's status line | One alias per account |\n| [cc-switch](https://github.com/farion1231/cc-switch) | Enabling a provider writes the host's live config, so open sessions share that switch. | Plugin settings are copied across providers as a separate step. | The active provider, from its quota endpoint | Install the desktop app |\n| sideby | Yes. `sideby run` selects the directory for that process and leaves your shell alone. | Linked to the main account. `sideby doctor --fix` repairs copies. Sign-in and sessions stay separate. | Every account, from local files. Claude needs `quota setup`. | `npm i -g sideby`, then `sideby new` and sign in |\n\ncc-switch's docs describe that switch: it writes the live settings file ([README](https://github.com/farion1231/cc-switch#readme)). [#1105](https://github.com/farion1231/cc-switch/issues/1105) and [#2908](https://github.com/farion1231/cc-switch/issues/2908) ask for several sessions at once. [#1106](https://github.com/farion1231/cc-switch/issues/1106) is closed; the maintainer says Claude Code's \"open terminal\" can start one provider without changing the global config.\n\n## What else it does\n\n| You want to | Run | Guide |\n|---|---|---|\n| Add an API key account (DeepSeek, a gateway, …) | `sideby new claude deepseek --api` | [API accounts](docs/guide/usage.md#api-accounts) |\n| Find and fix config drift between accounts | `sideby doctor --fix` | [Doctor](docs/guide/usage.md#doctor) |\n| See Claude quota (Codex needs no setup) | `sideby quota setup claude --yes` | [Claude quota](docs/guide/usage.md#claude-quota) |\n| Find the cheapest auto-compact size from your own sessions, and use it in one click | `sideby tune` (or the panel's Context tuning tab) | [Context tuning](docs/guide/usage.md#context-tuning) |\n| See each account's model and effort, and set them per account | `sideby model <account>` (or click the model in the panel) | [Model and effort](docs/guide/usage.md#model-and-effort) |\n| Stop Claude sessions from connecting to claude.ai by themselves (Remote Control), for every account at once | `sideby remote-control off` (or the panel's banner) | [Remote Control](docs/guide/usage.md#remote-control) |\n| Move on when an account hits its limit | `sideby next claude` | [Handoff](docs/guide/usage.md#when-an-account-hits-its-limit) |\n| Let a running task move to the next account by itself when quota runs low (off by default; see the risk) | `sideby handoff enable` (or the panel) | [Auto Handoff](docs/guide/usage.md#auto-handoff) |\n| Short commands such as `ccw` | `sideby alias add ccw claude:work` | [Shell functions](docs/guide/configuration.md#shell-functions) |\n| Reopen a session from Orca and the like in the account that holds it | `\"resumeRouting\": true` in config | [Resuming from other tools](docs/guide/configuration.md#resuming-from-other-tools) |\n| Open Claude Desktop or the Codex app as one account, several side by side (macOS) | `sideby desktop claude:work` (or the panel) | [Desktop apps](docs/guide/usage.md#desktop-apps) |\n| Keep several Grok Bot windows open, each signed in to its own account (macOS) | `sideby desktop grok-bot:002` (or the panel) | [Grok Bot windows](docs/guide/usage.md#grok-bot-windows) |\n| Open the panel from the Dock or app menu | `sideby app install` | [Panel app](docs/guide/panel.md#panel-app) |\n| Show the panel inside your own local page | `createPanelHandler()` | [Embed the panel](docs/guide/panel.md#embed-the-panel) |\n| Add a Host or a pre-launch check | a local plugin | [Plugins](docs/guide/plugins.md) |\n\n## Supported hosts\n\n| Host | Account directories | Sign-in | Quota | Usage (7 days) |\n|---|---|---|---|---|\n| Claude Code | `~/.claude`, `~/.claude-<name>` | `claude auth login` | ✓ after `quota setup claude` | ✓ |\n| Codex CLI | `~/.codex`, `~/.codex-<name>` | `codex login` | ✓ | ✓ |\n| Grok Build | `~/.grok`, `~/.grok-<name>` | `grok login` | no public source | no public source |\n| pi | `~/.pi/agent`, `~/.pi-<name>/agent` | `/login` inside pi | no public source | no public source |\n\nsideby starts the official binary on your `PATH` and never patches it. Tested versions and per-Host notes are in the [guide](docs/guide/usage.md#host-notes).\n\n## Platforms\n\nmacOS and Linux. CI runs the suite on `ubuntu-latest` and `macos-latest`, Node 22 and 24. **Windows is untested.** `sideby app` only installs a launcher on macOS and Linux. Linked items are symlinks, `sideby shell-init` prints bash and zsh functions, and the Claude quota wrapper runs `/bin/sh`.\n\n## Roadmap\n\n**Gemini CLI.** Gemini can point at another config directory with `GEMINI_CONFIG_DIR`. Older docs use `GEMINI_CLI_HOME`; current builds treat that name as deprecated, and exit on startup if it is set together with an exact directory override. A sideby family still needs a tested Gemini version, a login check that does not read tokens, and a list of which files to link or copy. That is more than a small patch, so it is not in this version.\n\n## Safe by design\n\n- It never edits a Host's global config to switch accounts. It moves a task to another account only when you turn on Auto Handoff, and never proxies requests or pools logins.\n- It never reads, prints or sends a credential value. Nothing about your accounts leaves your machine: the only request sideby makes on its own is a daily check of the npm registry for its newest version (off with `NO_UPDATE_NOTIFIER=1`; see [Updates](docs/guide/configuration.md#updates)).\n- `doctor --fix` never replaces a real file and never changes where a link points.\n\nDetails and the terms-of-service question are in the [FAQ](docs/guide/faq.md).\n\nUsage questions and ideas go in [Discussions](https://github.com/Adonis0123/sideby/discussions).\n\n## Docs\n\n- [Using sideby](docs/guide/usage.md): accounts, API accounts, Doctor, quota, Handoff, Host notes\n- [Commands](docs/guide/commands.md): every command, exit codes and `--json`\n- [Configuration](docs/guide/configuration.md): `config.json`, aliases, shell functions\n- [Panel](docs/guide/panel.md): the panel, panel app and embedding\n- [Plugins](docs/guide/plugins.md): write your own Family or launch hook\n- [FAQ](docs/guide/faq.md): terms of service, data locations, alternatives, uninstall\n- [Changelog](https://github.com/Adonis0123/sideby/releases)\n\n## For AI agents\n\n- [`llms.txt`](llms.txt): setup steps, commands, JSON contract and plugin API in one index. `sideby families --json` states what each Host's accounts share.\n- [`skills/sideby/SKILL.md`](skills/sideby/SKILL.md): one Agent Skill for seeing, repairing and creating accounts and for moving on when one hits its limit. Install with `npx skills add Adonis0123/sideby -g`; `sideby doctor` warns when the installed copy is for another sideby version.\n- [`AGENTS.md`](AGENTS.md): rules for agents working on this repository.\n\n## License\n\n[MIT](LICENSE)\n"
 }