sideby 0.8.0 → 0.9.0

package/dist/build.json

@@ -1 +1 @@
-{"id":"20261014T102906-2ab079"}
+{"id":"20261015T030631-4ed31c"}

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

@@ -120,6 +120,8 @@ declare const en: {
     'filter.clear': string;
     'group.expand': string;
     'group.collapse': string;
+    'row.collapse': string;
+    'row.expand': string;
     'group.toggle': string;
     'group.attention.one': string;
     'group.attention.other': string;

package/dist/src/panel/i18n.js

@@ -122,6 +122,8 @@ const en = {
     'filter.clear': 'Clear filters',
     'group.expand': 'Show accounts',
     'group.collapse': 'Hide accounts',
+    'row.collapse': 'Collapse {name}',
+    'row.expand': 'Expand {name}',
     'group.toggle': '{title} ({count}): {action}',
     'group.attention.one': '{n} needs attention',
     'group.attention.other': '{n} need attention',
@@ -582,6 +584,8 @@ const zh = {
     'filter.clear': '清除筛选',
     'group.expand': '展开账号',
     'group.collapse': '收起账号',
+    'row.collapse': '收起 {name}',
+    'row.expand': '展开 {name}',
     'group.toggle': '{title}（{count}）：{action}',
     'group.attention.one': '{n} 个需要处理',
     'group.attention.other': '{n} 个需要处理',

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

@@ -65,13 +65,15 @@ const MAIN = String.raw `
   function loadPrefs() {
     let raw = {}
     try { raw = JSON.parse(localStorage.getItem(PREFS_KEY) || '{}') || {} } catch {}
-    const p = { view: 'list', sort: 'pressure', quota: 'used', theme: 'system', lang: '', family: '', collapsed: {}, hideEmail: false }
+    const p = { view: 'list', sort: 'pressure', quota: 'used', theme: 'system', lang: '', family: '', collapsed: {}, rows: {}, hideEmail: false }
     for (const k of Object.keys(CHOICES)) if (CHOICES[k].includes(raw[k])) p[k] = raw[k]
     if (raw.hideEmail === true) p.hideEmail = true
     if (typeof raw.ahHintAt === 'number') p.ahHintAt = raw.ahHintAt
     if (typeof raw.family === 'string') p.family = raw.family
     if (raw.collapsed && typeof raw.collapsed === 'object')
       for (const k of Object.keys(raw.collapsed)) if (raw.collapsed[k] === true) p.collapsed[k] = true
+    if (raw.rows && typeof raw.rows === 'object')
+      for (const k of Object.keys(raw.rows)) if (raw.rows[k] === true) p.rows[k] = true
     return p
   }
   function savePrefs() { try { localStorage.setItem(PREFS_KEY, JSON.stringify(prefs)) } catch {} }
@@ -954,12 +956,63 @@ 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]) }
+  function rowSig(a) { return sig([a, healthOf(a.ref), isNext(a), ui.desktopRef === a.ref, folded(a)]) }
+  // Each account can be folded to one line (its name) and opened again, like a family group; the choice is kept in
+  // this browser's preferences.
+  function folded(a) { return prefs.rows[a.ref] === true }
+  function rowToggle(a) {
+    const open = !folded(a)
+    const label = t(open ? 'row.collapse' : 'row.expand', { name: a.name })
+    return h('button', { class: 'icon-btn row-toggle', type: 'button', 'aria-expanded': String(open), 'aria-label': label, title: label, onclick: (e) => { e.stopPropagation(); toggleRow(a) } }, icon('chevron', 'chev'))
+  }
+  // The whole account cell (and a folded row anywhere) folds and opens it, not only the arrow; the buttons and links
+  // inside keep their own action, and a click that ends a text selection does nothing.
+  function foldClick(a) {
+    return (e) => {
+      if (e.target.closest('button, a, input, select, textarea, .tip')) return
+      if (window.getSelection && String(window.getSelection())) return
+      toggleRow(a)
+    }
+  }
+  // Folding animates: the details fade out, then the row's height eases to one line; opening eases the height out
+  // and fades the details in. The arrow turns with it. Reduced motion just switches.
+  const EASE = 'cubic-bezier(.2, 0, 0, 1)'
+  function rowDetails(el) { return Array.from(el.querySelectorAll(':scope > :not(.ident):not(.more):not(.card-head), .ident-email, .ident-sub')) }
+  function toggleRow(a) {
+    const closing = !folded(a)
+    const find = () => document.querySelector('[data-ref="' + CSS.escape(a.ref) + '"]')
+    const apply = () => {
+      if (closing) prefs.rows[a.ref] = true; else delete prefs.rows[a.ref]
+      savePrefs()
+      renderAccounts()
+    }
+    const old = find()
+    // A hidden page delays animation events; switch at once there too.
+    if (REDUCED || document.hidden || !old || !old.animate) { apply(); return }
+    const from = old.getBoundingClientRect().height
+    const fade = closing ? rowDetails(old).map((d) => d.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 110, easing: 'ease-out', fill: 'forwards' }).finished) : []
+    Promise.all(fade).catch(() => {}).then(() => {
+      apply()
+      const el = find()
+      if (!el) return
+      const to = el.getBoundingClientRect().height
+      el.style.overflow = 'hidden'
+      const done = () => { el.style.overflow = '' }
+      el.animate([{ height: from + 'px' }, { height: to + 'px' }], { duration: 220, easing: EASE }).finished.then(done, done)
+      const chev = el.querySelector('.row-toggle .chev')
+      if (chev) chev.animate([{ transform: closing ? 'rotate(90deg)' : 'rotate(0deg)' }, { transform: closing ? 'rotate(0deg)' : 'rotate(90deg)' }], { duration: 220, easing: EASE })
+      if (!closing) for (const d of rowDetails(el)) d.animate([{ opacity: 0, transform: 'translateY(-4px)' }, { opacity: 1, transform: 'none' }], { duration: 200, delay: 60, easing: 'ease-out', fill: 'backwards' })
+    })
+  }
   // The Account 'sideby next <family>' would pick; the server ranks it with the CLI's rule (spec §3.13).
   function isNext(a) { return Boolean(S.state && S.state.handoff && S.state.handoff[a.family] === a.ref) }
   function row(a, now, cols) {
+    if (folded(a))
+      return h('div', { class: 'row row-folded fold-hit' + (a.error ? ' row-error' : ''), role: 'listitem', 'data-ref': a.ref, 'data-key': a.ref, 'data-sig': rowSig(a), onclick: foldClick(a) },
+        h('div', { class: 'ident' }, rowToggle(a), badge(a.family, 'sm'), h('div', { class: 'ident-text' }, nameLine(a))),
+        moreButton(a))
     return h('div', { class: 'row' + (a.error ? ' row-error' : ''), role: 'listitem', 'data-ref': a.ref, 'data-key': a.ref, 'data-sig': rowSig(a) },
-      h('div', { class: 'ident' }, badge(a.family, 'sm'), h('div', { class: 'ident-text' }, nameLine(a), emailLine(a), subLine(a))),
+      h('div', { class: 'ident fold-hit', onclick: foldClick(a) }, rowToggle(a), badge(a.family, 'sm'), h('div', { class: 'ident-text' }, nameLine(a), emailLine(a), subLine(a))),
       quotaBlock(a, now, cols),
       usageBlock(a),
       lastUsed(a),
@@ -968,8 +1021,12 @@ const MAIN = String.raw `
       notes(a))
   }
   function card(a, now, cols) {
+    if (folded(a))
+      return h('article', { class: 'card card-folded fold-hit' + (a.error ? ' card-error' : ''), 'data-ref': a.ref, 'data-key': a.ref, 'data-sig': rowSig(a), 'aria-label': a.ref, onclick: foldClick(a) },
+        h('header', { class: 'card-head' }, rowToggle(a), badge(a.family, 'sm'), h('div', { class: 'ident-text' }, nameLine(a)), moreButton(a)))
     return h('article', { class: 'card' + (a.error ? ' card-error' : ''), 'data-ref': a.ref, 'data-key': a.ref, 'data-sig': rowSig(a), 'aria-label': a.ref },
-      h('header', { class: 'card-head' },
+      h('header', { class: 'card-head fold-hit', onclick: foldClick(a) },
+        rowToggle(a),
         badge(a.family, 'sm'),
         h('div', { class: 'ident-text' }, nameLine(a), emailLine(a), subLine(a)),
         moreButton(a)),

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

@@ -159,6 +159,16 @@ code, .mono { font-family: var(--mono); font-size: 0.92em; }
 .row:first-child { border-top: 0; }
 .row:last-child { border-radius: 0 0 var(--radius) var(--radius); }
 .row-error .ident-name .name { color: var(--fail); }
+/* One account folded to its name line, opened again with the arrow at its start. */
+.row-toggle { width: 28px; height: 28px; margin: -4px -6px -4px -8px; }
+.fold-hit { cursor: pointer; }
+.row > .ident.fold-hit { align-self: stretch; margin: -11px 0 -11px -16px; padding: 11px 0 11px 16px; }
+.fold-hit:hover .row-toggle { background: var(--hover); color: var(--text); }
+.row-toggle[aria-expanded=true] .chev { transform: rotate(90deg); }
+.row-toggle[aria-expanded=true]:not(:hover) { background: transparent; color: var(--muted); }
+.fold-hit:hover .row-toggle[aria-expanded=true] { background: var(--hover); color: var(--text); }
+.row-folded { grid-template-areas: "id id id id id more"; padding-top: 7px; padding-bottom: 7px; }
+.card-folded .card-head { align-items: center; }
 .col-head { position: sticky; top: 0; z-index: 2; padding: 7px 10px 7px 16px; border-top: 1px solid var(--border); background: var(--surface); color: var(--faint); font-size: 11.5px; font-weight: var(--strong-weight); line-height: 1.3; white-space: nowrap; }
 .col-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .col-head .quota > span { overflow: hidden; text-overflow: ellipsis; }
@@ -515,6 +525,7 @@ select:is(:hover, :focus) { --chevron: var(--text); }
 @media (max-width: 1100px) {
   .col-head { display: none; }
   .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; }
   .rows .m-label, .rows .m-unit, .rows .u-unit { display: inline; }
   .rows .usage { justify-content: flex-start; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sideby",
-  "version": "0.8.0",
+  "version": "0.9.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)",

package/skills/sideby/SKILL.md

@@ -2,7 +2,7 @@
 name: sideby
 description: Use when the user runs, or wants to run, several AI coding accounts (Claude Code, Codex, Grok Build, pi) side by side. Covers installing sideby and setting up a new account ("install sideby", "set up another Claude account", "add cc008", "配置一个 cc00x", "再加一个 Codex 账号"), explaining what accounts share and what stays separate ("what do my accounts share?", "这些账号共享了什么"), showing which account a session is ("show [cc001] in the status line", "加上账号标识"), seeing accounts, quota and usage, moving on when one hits its 5-hour or weekly limit, adding a short command (alias), and repairing drifted account directories (skills, hooks, rules or settings not shared, wrong symlinks, credential file permissions). Drives the `sideby` CLI with `--json`; the agent does every step except browser sign-in, filling in secrets and starting interactive sessions, which it hands to the user as one command.
 metadata:
-  version: "0.8.0"
+  version: "0.9.0"
   requires:
     bins: [sideby, node]
   cliHelp: sideby --help