clauddy 1.19.0 → 1.21.0

package/README.md

@@ -31,11 +31,11 @@ The token is saved locally (see [Data & privacy](#data--privacy)) and refreshed
 
 ### Several subscriptions
 
-Got more than one Claude account — say a personal Pro and a Max from work? **⚙ Settings → "+ Add another account"** opens the same browser login, and the token it brings back lands in a new slot. Once two accounts exist, a list appears in Settings (and an **Account** submenu on the tray icon) to switch between them. Give up halfway and the empty slot disappears on its own — the list only ever holds accounts you actually logged into.
+Got more than one Claude account — say a personal Pro and a Max from work? The **account chip** in the top-left corner is the switcher: click it for the list of accounts, with the active one marked, plus **"+ Add another account"** — which opens the same browser login and drops the token it brings back into a new slot. The tray icon has the same list under its **Account** submenu. Give up halfway and the empty slot disappears on its own — the list only ever holds accounts you actually logged into.
 
 The widget follows **one account at a time**: the one you pick is the one whose % is shown, whose logs are counted, and the only one that can notify you. Each account keeps its own token and its own armed alerts, so switching never replays a notification you already dismissed elsewhere. Everything else — window position, display mode, zoom, thresholds — is shared.
 
-Removing an account deletes its token from disk. The first account can't be removed, and neither can the one you're currently on — switch away first.
+Removing an account (the **×** on its row) deletes its token from disk. The one you're currently on can't be removed — switch away first — and neither can the last one left. Removing the first account clears its token without touching the settings that live in the same folder.
 
 > Prefer one widget per account instead? Setting `CLAUDE_CONFIG_DIR` still isolates a whole instance — token, settings and logs — so you can run two Clauddys side by side.
 
@@ -171,7 +171,7 @@ update-desktop-database ~/.local/share/applications 2>/dev/null
 ## Controls
 
 - **Drag** the widget anywhere on screen
-- **–** minimizes to just the pet's face (showing the live session %); the **⤢** button or a double-click on the pet expands it back
+- **–** minimizes to just the pet, ringed by the live session % (the number sits inside the ring); the **⤢** button or a double-click on the pet expands it back
 - **⚙** opens settings (log in, toggle alerts, set thresholds, pick the display mode)
 - **↗** opens the official Usage page
 - **×** quits

package/accounts.js

@@ -28,8 +28,10 @@ function sane(j) {
       label: typeof a.label === 'string' && a.label ? a.label : null,
       claudeDir: typeof a.claudeDir === 'string' && a.claudeDir ? a.claudeDir : null,
     }))
-  if (!list.some((a) => a.id === DEFAULT_ID)) list.unshift(defaults().accounts[0])
-  const active = list.some((a) => a.id === j?.active) ? j.active : DEFAULT_ID
+  // the default account can be removed like any other, so it is only recreated
+  // when nothing is left — an empty list would leave the widget with no token
+  if (!list.length) list.push(defaults().accounts[0])
+  const active = list.some((a) => a.id === j?.active) ? j.active : list[0].id
   return { active, accounts: list }
 }
 
@@ -118,18 +120,51 @@ function setClaudeDir(id, dir) {
 // behind would be a credential nobody can see or revoke from the UI
 function remove(id) {
   const s = load()
-  if (id === DEFAULT_ID) return false // the original install's data: never dropped
   if (id === s.active) return false // switch away first: the widget is showing it
   const i = s.accounts.findIndex((a) => a.id === id)
   if (i < 0) return false
+  if (s.accounts.length < 2) return false // never leave the widget with no account
   s.accounts.splice(i, 1)
   save(s)
   try {
-    fs.rmSync(dataDirOf(id), { recursive: true, force: true })
+    if (id === DEFAULT_ID) {
+      // its folder is the app's own data dir: drop the credentials, not the
+      // settings, the account list or the simulator file that live beside them
+      for (const f of ['auth.json', 'alerts.json'])
+        fs.rmSync(path.join(dataDirOf(id), f), { force: true })
+    } else {
+      fs.rmSync(dataDirOf(id), { recursive: true, force: true })
+    }
   } catch {}
   return true
 }
 
+// Folders left behind under `accounts/` by slots that are no longer listed —
+// an add abandoned mid-login, mostly, since saving the alert state recreates
+// the folder on its way out. Only ever drops a folder with no auth.json in it,
+// so a token is never destroyed by a bad read of accounts.json.
+function pruneOrphans() {
+  const root = path.join(BASE_DIR, 'accounts')
+  let dirs = []
+  try {
+    dirs = fs.readdirSync(root, { withFileTypes: true })
+  } catch {
+    return 0 // no extra accounts were ever added
+  }
+  const known = new Set(list().map((a) => a.id))
+  let n = 0
+  for (const d of dirs) {
+    if (!d.isDirectory() || known.has(d.name)) continue
+    const dir = path.join(root, d.name)
+    if (fs.existsSync(path.join(dir, 'auth.json'))) continue
+    try {
+      fs.rmSync(dir, { recursive: true, force: true })
+      n++
+    } catch {}
+  }
+  return n
+}
+
 module.exports = {
   BASE_DIR,
   DEFAULT_ID,
@@ -142,4 +177,5 @@ module.exports = {
   label,
   setClaudeDir,
   remove,
+  pruneOrphans,
 }

package/main.js

@@ -296,7 +296,7 @@ function hasToken(id) {
 }
 
 function pruneEmpty(id) {
-  if (id === accounts.DEFAULT_ID || id === accounts.activeId()) return
+  if (id === accounts.DEFAULT_ID || id === accounts.activeId()) return // never auto-drop the original
   const acc = accounts.list().find((a) => a.id === id)
   if (!acc || acc.label || hasToken(id)) return
   accounts.remove(id)
@@ -305,10 +305,20 @@ function pruneEmpty(id) {
 ipcMain.on('accounts-switch', (_e, id) => switchAccount(String(id)))
 // "add an account" *is* "log in": the browser opens on the new, empty slot, so
 // the token lands in it and not in the account we just left
+// the account an "add" left behind: cancelling the login has to land back on
+// it, or the widget is stuck on an empty slot with no chip to switch from
+let addedFrom = null
 ipcMain.on('accounts-add', () => {
+  addedFrom = accounts.activeId()
   switchAccount(accounts.add())
   startLogin()
 })
+ipcMain.on('accounts-cancel-add', () => {
+  const from = addedFrom
+  addedFrom = null
+  if (!from || from === accounts.activeId() || hasToken(accounts.activeId())) return
+  switchAccount(from) // the empty slot is pruned on the way out
+})
 ipcMain.on('accounts-remove', (_e, id) => {
   if (accounts.remove(String(id))) sendAccounts()
 })
@@ -318,9 +328,13 @@ function createWindow() {
   // a login abandoned in an earlier run: nothing stays pending across a restart,
   // so fall back to the first account and let the empty slots go
   const boot = accounts.active()
-  if (boot.id !== accounts.DEFAULT_ID && !boot.label && !hasToken(boot.id))
-    accounts.setActive(accounts.DEFAULT_ID)
+  if (!boot.label && !hasToken(boot.id)) {
+    // the default account can be gone by now, so land on whatever comes first
+    const fallback = accounts.list().find((a) => a.id !== boot.id)
+    if (fallback) accounts.setActive(fallback.id)
+  }
   for (const a of accounts.list()) pruneEmpty(a.id)
+  accounts.pruneOrphans() // folders those slots left behind
   applyAccount(accounts.active())
   const { workAreaSize } = screen.getPrimaryDisplay()
   const H = 480
@@ -685,6 +699,7 @@ function startLogin() {
 ipcMain.on('auth-start', startLogin)
 ipcMain.on('auth-code', async (_e, code) => {
   const ok = () => {
+    addedFrom = null // the new account is real now: nothing to roll back to
     if (win && !win.isDestroyed()) {
       win.webContents.send('auth-state', { connected: true })
       win.webContents.send('auth-result', { ok: true })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clauddy",
   "desktopName": "clauddy.desktop",
-  "version": "1.19.0",
+  "version": "1.21.0",
   "description": "A cute desktop pet that tracks your Claude Code usage",
   "main": "main.js",
   "bin": {

package/preload.js

@@ -18,6 +18,7 @@ contextBridge.exposeInMainWorld('api', {
   onAccounts: (cb) => ipcRenderer.on('accounts', (_e, a) => cb(a)),
   accountSwitch: (id) => ipcRenderer.send('accounts-switch', id),
   accountAdd: () => ipcRenderer.send('accounts-add'),
+  accountCancelAdd: () => ipcRenderer.send('accounts-cancel-add'),
   accountRemove: (id) => ipcRenderer.send('accounts-remove', id),
   onDebugState: (cb) => ipcRenderer.on('debug-state', (_e, s) => cb(s)),
   onVersion: (cb) => ipcRenderer.on('version', (_e, v) => cb(v)),

package/renderer/index.html

@@ -6,13 +6,18 @@
     <title>Clauddy</title>
     <link rel="stylesheet" href="style.css" />
   </head>
-  <body class="state-idle">
+  <body class="state-idle one-account">
     <div id="card">
-      <div id="account-chip" hidden>
+      <div id="account-chip" hidden title="Switch account">
         <span class="ac-dot"></span>
         <span id="ac-email"></span>
+        <svg class="ac-caret" viewBox="0 0 12 12" aria-hidden="true">
+          <path d="M3 5l3 3 3-3" />
+        </svg>
         <span id="ac-plan" class="plan-badge" hidden></span>
       </div>
+      <div id="acc-backdrop" hidden></div>
+      <div id="acc-menu" hidden></div>
       <div id="controls">
         <button id="gear" title="Settings">⚙</button>
         <button id="usage" title="Open Usage page">
@@ -107,6 +112,12 @@
           <path class="dk-leaf" d="M198 103 q5 -12 3 -25 q-7 9 -3 25" />
           <path class="dk-leaf-c" d="M198 103 q0 -14 0 -27 q3 13 0 27" />
         </svg>
+        <!-- collapsed: a ring around the pet with the session % inside -->
+        <svg id="ring" viewBox="0 0 100 100" aria-hidden="true">
+          <circle class="ring-track" cx="50" cy="50" r="45" />
+          <circle id="ring-fill" cx="50" cy="50" r="45" />
+        </svg>
+        <span id="ring-pct">0%</span>
         <div id="shadow"></div>
         <div id="pet">
           <svg id="claude" viewBox="0 0 100 90" width="86" height="77">
@@ -311,12 +322,6 @@
             <span class="acc-ok" id="acc-ok">● Connected</span>
             <button id="acc-logout" class="acc-link">Disconnect</button>
           </div>
-          <!-- one row per subscription; only the active one is polled -->
-          <div id="acc-switch" hidden>
-            <div class="set-hint set-hint-left">Accounts</div>
-            <div id="acc-list"></div>
-          </div>
-          <button id="acc-add" class="acc-link">+ Add another account</button>
           <div id="acc-disconnected">
             <div class="set-hint set-hint-left" id="acc-intro">
               Connect your Claude account to show your real usage.

package/renderer/pet.js

@@ -455,6 +455,8 @@ function oneShot(cls, ms) {
   setTimeout(() => document.body.classList.remove(cls), ms)
 }
 
+const RING_LEN = 2 * Math.PI * 45 // the collapsed ring's circumference (r=45)
+
 // session-reset celebration: jump + a colorful confetti burst
 const CONFETTI_COLORS = ['#ffd23f', '#ff5d86', '#7ec77d', '#6db3f2', '#e0805a', '#c89bff']
 function spawnConfetti(i) {
@@ -577,6 +579,13 @@ function render(d) {
   const mini = el('mini-pct')
   mini.textContent = liveOn ? `${Math.round(sessPct)}%` : '—'
   mini.classList.toggle('high', liveOn && sessPct >= 80)
+  // the collapsed ring: how much of the session is already spent
+  const rf = el('ring-fill')
+  rf.style.strokeDashoffset = `${RING_LEN * (1 - Math.min(sessPct, 100) / 100)}`
+  rf.classList.toggle('high', sessPct >= 80)
+  const rp = el('ring-pct')
+  rp.textContent = mini.textContent
+  rp.classList.toggle('high', liveOn && sessPct >= 80)
   const sf = el('session-fill')
   sf.style.width = `${sessPct}%`
   sf.classList.toggle('high', sessPct >= 80)
@@ -632,7 +641,7 @@ function fitSize() {
   requestAnimationFrame(() => {
     const collapsed = document.body.classList.contains('collapsed')
     const zoom = Number.parseFloat(document.body.style.zoom) || 1
-    const w = (collapsed ? 140 : 276) * zoom
+    const w = (collapsed ? 168 : 276) * zoom
     // offsetHeight never reflects a CSS zoom applied to an ancestor (confirmed
     // empirically against this Electron build) — so measure the unzoomed content
     // height, then scale the whole thing (content + margin) ourselves
@@ -724,39 +733,56 @@ function setPlan(node, plan) {
 window.api.onProfile(showProfile)
 
 // ---- accounts ---------------------------------------------------------------
-// The list is only worth showing once there are two; with a single account the
-// panel keeps the shape it has always had, plus the "add" link.
+// The account chip doubles as the switcher: click it for the list, with the
+// active one marked. Settings only keeps the login flow itself.
 let pendingRemove = null // id whose × is armed, so removal takes two clicks
 let lastAccounts = null
+let switching = false // a switch is in flight, so the menu waits for its answer
+
+// one row of the chip dropdown
+function accountRow(acc, a) {
+  const active = acc.id === a.active
+  const row = document.createElement('div')
+  row.className = 'acc-item'
+  if (active) row.classList.add('active')
+  if (acc.connected) row.classList.add('connected')
+  // the account being switched to owns the spinner: everything on screen
+  // still belongs to the one we're leaving
+  if (a.busy === acc.id) row.classList.add('loading')
+
+  const dot = document.createElement('span')
+  dot.className = 'dot'
+  const who = document.createElement('span')
+  who.className = 'who'
+  who.textContent =
+    acc.label || (acc.connected ? 'Connected' : active ? 'Waiting for login…' : 'Not connected')
+  row.append(dot, who)
+  return row
+}
 
+// Everything about accounts lives in the chip dropdown: the chip already says
+// which one you are on, so switching, adding and removing all happen there.
 function renderAccounts(a) {
   lastAccounts = a
-  const list = a?.accounts || []
-  const box = el('acc-list')
-  el('acc-switch').hidden = list.length < 2
+  document.body.classList.toggle('one-account', (a?.accounts || []).length < 2)
+  if (el('acc-menu').hidden) return
+  // the switch is done: the chip now names the account the menu was pointing at
+  if (switching && !a?.busy) closeAccountMenu()
+  else renderAccountMenu()
+}
+
+function renderAccountMenu() {
+  const a = lastAccounts
+  const box = el('acc-menu')
   box.textContent = ''
   box.classList.toggle('busy', !!a?.busy)
-  for (const acc of list) {
+  for (const acc of a?.accounts || []) {
     const active = acc.id === a.active
-    const row = document.createElement('div')
-    row.className = 'acc-item'
-    if (active) row.classList.add('active')
-    if (acc.connected) row.classList.add('connected')
-    // the account being switched to owns the spinner: everything on screen
-    // still belongs to the one we're leaving
-    if (a.busy === acc.id) row.classList.add('loading')
-
-    const dot = document.createElement('span')
-    dot.className = 'dot'
-    const who = document.createElement('span')
-    who.className = 'who'
-    who.textContent =
-      acc.label || (acc.connected ? 'Connected' : active ? 'Waiting for login…' : 'Not connected')
-    row.append(dot, who)
-
-    // the first account holds the original install's data, and the active one
-    // is what the widget is showing — neither can be removed from under you
-    if (acc.id !== 'default' && !active) {
+    const row = accountRow(acc, a)
+
+    // the active account is what the widget is showing: it can't be removed
+    // from under you, and the last one standing can't be removed at all
+    if (!active && (a.accounts || []).length > 1) {
       const x = document.createElement('button')
       const armed = pendingRemove === acc.id
       x.className = armed ? 'drop armed' : 'drop'
@@ -769,24 +795,72 @@ function renderAccounts(a) {
           window.api.accountRemove(acc.id)
         } else {
           pendingRemove = acc.id // a click deletes a token: ask once
-          renderAccounts(a)
+          renderAccountMenu()
         }
       })
       row.appendChild(x)
     }
 
-    if (!active) row.addEventListener('click', () => switchAccount(acc.id))
+    // stopPropagation: re-rendering detaches this row, and the document-level
+    // "clicked outside" handler would then read that as a click off the menu
+    if (!active)
+      row.addEventListener('click', (e) => {
+        e.stopPropagation()
+        switchAccount(acc.id)
+      })
     box.appendChild(row)
   }
-  fitSize()
+
+  const add = document.createElement('div')
+  add.className = 'acc-item acc-add'
+  add.textContent = '+ Add another account'
+  add.addEventListener('click', () => {
+    closeAccountMenu()
+    el('acc-msg').textContent = ''
+    window.api.accountAdd() // switches to a fresh slot and opens the browser
+  })
+  box.appendChild(add)
+}
+
+function closeAccountMenu() {
+  el('acc-menu').hidden = true
+  el('acc-backdrop').hidden = true
+  pendingRemove = null
+  switching = false
 }
 
+function toggleAccountMenu() {
+  const box = el('acc-menu')
+  if (!box.hidden) {
+    closeAccountMenu()
+    return
+  }
+  renderAccountMenu()
+  box.hidden = false
+  el('acc-backdrop').hidden = false
+}
+
+el('account-chip').addEventListener('click', (e) => {
+  e.stopPropagation()
+  toggleAccountMenu()
+})
+// clicking anywhere else — the pet, the gear, another app — puts it away
+el('acc-backdrop').addEventListener('mousedown', closeAccountMenu)
+document.addEventListener('click', (e) => {
+  if (!el('acc-menu').hidden && !el('acc-menu').contains(e.target)) closeAccountMenu()
+})
+window.addEventListener('blur', closeAccountMenu)
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') closeAccountMenu()
+})
+
 // paint the pending state from the click itself rather than waiting for main to
 // answer — the answer is exactly what takes a moment
 function switchAccount(id) {
   if (lastAccounts?.busy) return
   endLogin() // the code from the account we're leaving is no good here
   pendingRemove = null
+  switching = true // the row stays on screen, pending, until main answers
   renderAccounts({ ...lastAccounts, busy: id })
   window.api.accountSwitch(id)
 }
@@ -796,16 +870,20 @@ window.api.onAccounts((a) => {
   renderAccounts(a)
 })
 
+// closing the panel while a login is pending gives up on it: main puts us back
+// on the account we were using, and the half-made one goes away
+function abandonLogin() {
+  if (!document.body.classList.contains('awaiting')) return
+  endLogin()
+  window.api.accountCancelAdd()
+}
+
 function endLogin() {
   document.body.classList.remove('awaiting')
   el('acc-paste').classList.remove('show')
   el('acc-code').value = ''
   el('acc-msg').textContent = ''
 }
-el('acc-add').addEventListener('click', () => {
-  el('acc-msg').textContent = ''
-  window.api.accountAdd() // switches to a fresh slot and opens the browser
-})
 let successTimer = null
 window.api.onAuthResult((r) => {
   if (r?.ok) {
@@ -884,14 +962,21 @@ el('acc-connect').addEventListener('click', () => window.api.authStart())
 // main opened the browser — the only thing left to do is paste the code back,
 // so the panel narrows to exactly that
 window.api.onAuthPending(() => {
+  // the login can start from the account menu, with the panel closed: the code
+  // field is where the flow continues, so bring it up
+  openSettings()
   document.body.classList.add('awaiting')
   el('acc-paste').classList.add('show')
+  el('acc-code').classList.remove('filled')
   el('acc-code').focus()
   fitSize()
 })
-// the Connect button only lights up once there's a code to submit
+// the Connect button only lights up once there's a code to submit, and the
+// field stops asking for attention once it has one
 el('acc-code').addEventListener('input', () => {
-  el('acc-confirm').classList.toggle('ready', !!el('acc-code').value.trim())
+  const code = el('acc-code').value.trim()
+  el('acc-confirm').classList.toggle('ready', !!code)
+  el('acc-code').classList.toggle('filled', !!code)
 })
 el('acc-confirm').addEventListener('click', () => {
   const code = el('acc-code').value.trim()
@@ -1042,12 +1127,14 @@ for (const b of document.querySelectorAll('#set-mode .seg-btn')) {
   })
 }
 el('set-cancel').addEventListener('click', () => {
+  abandonLogin()
   document.body.classList.remove('settings-open')
   clearSaveDirty()
   applyZoom(currentConfig?.zoom != null ? currentConfig.zoom : 100) // undo the preview
   fitSize()
 })
 el('set-save').addEventListener('click', () => {
+  abandonLogin() // leaving the panel gives up on a login waiting for its code
   const num = (id) => parseFloat(el(id).value)
   const fire = num('set-fire')
   const zoomRaw = num('set-zoom')
@@ -1116,6 +1203,7 @@ if (typeof module === 'object' && module.exports) {
     renderHeat,
     showProfile,
     renderAccounts,
+    renderAccountMenu,
     burn,
   }
 }

package/renderer/style.css

@@ -169,9 +169,10 @@ body.collapsed #usage {
   z-index: 10;
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: 3px;
   height: 19px; /* match #controls buttons so text centers on the same line */
-  max-width: 138px;
+  /* #controls starts at ~154px: stop short of it, the pill has padding too */
+  max-width: 142px;
   font-size: 9.5px;
   line-height: 1;
   color: var(--muted);
@@ -179,6 +180,106 @@ body.collapsed #usage {
 #account-chip[hidden] {
   display: none;
 }
+/* with something to switch to, the chip stops being a label and reads as a
+   control: a pill that holds the caret instead of leaving it floating */
+#account-chip {
+  -webkit-app-region: no-drag;
+  cursor: pointer;
+  padding: 0 5px 0 6px;
+  margin-left: -6px; /* the text stays where it has always been */
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.05);
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+#account-chip:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text);
+}
+/* a drawn chevron, not the ▾ glyph: the glyph's ink sits high in its em box, so
+   it never lines up with the dot and the text */
+.ac-caret {
+  flex: none;
+  width: 9px;
+  height: 9px;
+  margin-left: -2px; /* hugs the email rather than drifting off it */
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+/* a single account keeps the pill, minus the affordance: nothing to switch to.
+   The email then takes the width the chevron leaves behind. */
+body.one-account #account-chip {
+  cursor: default;
+}
+body.one-account #account-chip:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--muted);
+}
+body.one-account .ac-caret {
+  display: none;
+}
+/* the widget is mostly a drag region, and those swallow clicks before the page
+   ever sees them — so an invisible sheet under the menu catches them instead */
+#acc-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 19;
+  -webkit-app-region: no-drag;
+}
+#acc-backdrop[hidden] {
+  display: none;
+}
+/* dropdown under the chip; it overlays the pet rather than resizing the window */
+#acc-menu {
+  position: absolute;
+  top: 24px;
+  left: 8px;
+  z-index: 20;
+  min-width: 118px;
+  max-width: 176px;
+  max-height: 120px;
+  overflow-y: auto;
+  padding: 3px;
+  border: 0.5px solid rgba(255, 210, 180, 0.1);
+  border-radius: 7px;
+  background: #221a15;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
+  -webkit-app-region: no-drag;
+}
+#acc-menu[hidden] {
+  display: none;
+}
+#acc-menu.busy {
+  pointer-events: none; /* one switch at a time */
+}
+/* the add entry closes the list: it belongs to no account */
+#acc-menu .acc-add {
+  margin-top: 2px;
+  padding-top: 6px;
+  border-top: 0.5px solid var(--hair);
+  border-radius: 0;
+  color: var(--coral-soft);
+  /* no .who inside this one, so it needs the row font itself */
+  font-size: 9.5px;
+  white-space: nowrap;
+}
+#acc-menu .acc-add:hover {
+  background: none;
+  color: var(--coral);
+}
+/* tighter than the dropdown-less list it replaced: it floats over the pet */
+#acc-menu .acc-item {
+  gap: 6px;
+  padding: 4px 6px;
+  border-radius: 5px;
+}
+#acc-menu .acc-item .who {
+  font-size: 9.5px;
+}
 .ac-dot {
   flex: none;
   width: 6px;
@@ -187,6 +288,11 @@ body.collapsed #usage {
   background: var(--pixel);
 }
 #ac-email {
+  /* line-height:1 leaves the ascender inside the box, so the text reads a hair
+     lower than the dot next to it — lift it back onto the same line */
+  transform: translateY(-1px);
+  flex: 1; /* claim the leftover width so the ellipsis is not left hanging */
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -208,6 +314,19 @@ body.collapsed #usage {
 body.collapsed #account-chip {
   display: none;
 }
+/* collapsed: the account rides up on the button line, like the chip does */
+body.collapsed #mini-acct {
+  position: absolute;
+  top: 6px;
+  left: 10px;
+  z-index: 10;
+  height: 19px;
+  margin-bottom: 0;
+  justify-content: flex-start;
+}
+body.collapsed #mini-acct-name {
+  max-width: 62px;
+}
 
 /* settings panel */
 #settings {
@@ -683,20 +802,6 @@ body.live .live-only {
   gap: 10px; /* the email ellipsizes instead of touching Disconnect */
   flex-wrap: wrap; /* the success line drops to its own row */
 }
-#acc-switch {
-  margin-top: 10px;
-}
-#acc-switch[hidden] {
-  display: none;
-}
-#acc-list {
-  display: flex;
-  flex-direction: column;
-  margin-top: 2px;
-}
-#acc-list.busy {
-  pointer-events: none; /* one switch at a time */
-}
 /* a plain list, not a stack of cards: the panel already has enough boxes */
 .acc-item {
   display: flex;
@@ -762,11 +867,11 @@ body.live .live-only {
   line-height: 1;
   padding: 0 2px;
   cursor: pointer;
-  opacity: 0; /* one row at a time, on hover: this deletes a token */
+  opacity: 0.3; /* faint until hover: this deletes a token */
   transition: opacity 0.15s;
 }
 .acc-item:hover .drop {
-  opacity: 0.6;
+  opacity: 0.75;
 }
 .acc-item .drop:hover {
   opacity: 1;
@@ -779,13 +884,6 @@ body.live .live-only {
   font-size: 10px;
   color: var(--coral);
 }
-#acc-add {
-  margin-top: 6px;
-}
-/* while a login is pending, "add another" would start a second one */
-body.awaiting #acc-add {
-  display: none;
-}
 #acc-paste {
   display: none;
   margin-top: 8px;
@@ -793,6 +891,20 @@ body.awaiting #acc-add {
 #acc-paste.show {
   display: block;
 }
+/* while the browser is open, this empty field is the whole flow: make it say so */
+body.awaiting #acc-code:not(.filled) {
+  border-color: var(--coral);
+  animation: code-wait 1.6s ease-in-out infinite;
+}
+@keyframes code-wait {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(217, 119, 87, 0);
+  }
+  50% {
+    box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.22);
+  }
+}
 #acc-code {
   width: 100%;
   margin: 4px 0 6px;
@@ -977,7 +1089,7 @@ body.collapsed #mini {
   display: block;
 }
 body.collapsed #card {
-  width: 116px;
+  width: 144px;
   padding: 12px 12px 13px;
 }
 body.collapsed #stage {
@@ -1049,7 +1161,7 @@ body.settings-open #pet {
 
 /* collapsed: just the face, on the warm card (like before) */
 body.collapsed #stage {
-  height: 98px;
+  height: 120px;
   margin-top: 9px;
   background: transparent;
   box-shadow: none;
@@ -1072,19 +1184,95 @@ body.collapsed #gears,
 body.collapsed #glasses {
   display: none;
 }
+/* collapsed: the pet sits a bit high, so the % fits under it inside the ring */
 body.collapsed #pet {
   position: static;
   left: auto;
   bottom: auto;
-  zoom: 1;
+  transform: translateY(-8px);
+  zoom: 0.86;
+}
+/* the ring is a fixed frame, so the usual bob reads as jumping in there */
+body.collapsed #claude {
+  animation: bob-mini 3.6s ease-in-out infinite;
+}
+@keyframes bob-mini {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-1.5px);
+  }
+}
+/* the ring: session % drawn around the pet, only when there's a real % to show */
+#ring {
+  display: none;
+}
+body.collapsed #ring {
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 118px;
+  height: 118px;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  z-index: 1;
+}
+.ring-track {
+  fill: none;
+  stroke: var(--track);
+  stroke-width: 3.5;
+}
+#ring-fill {
+  fill: none;
+  stroke: var(--green);
+  stroke-width: 3.5;
+  stroke-linecap: round;
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+  stroke-dasharray: 282.7;
+  stroke-dashoffset: 282.7; /* set from JS */
+  transition:
+    stroke-dashoffset 0.5s ease,
+    stroke 0.3s ease;
+}
+#ring-fill.high {
+  stroke: #e0553f;
+}
+#ring-pct {
+  display: none;
+}
+body.collapsed #ring-pct {
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 12px;
+  z-index: 3;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+#ring-pct.high {
+  color: #e0553f;
+}
+/* the ring already says it — no need to repeat it under the pet */
+body.collapsed #mini-pct-row {
+  display: none;
 }
 body.collapsed #shadow {
   display: block;
   position: absolute;
-  bottom: 2px;
+  /* pinned under the pet's feet, which the ring lifted off the stage floor */
+  top: calc(50% + 23px);
   left: 50%;
-  width: 60px;
-  height: 9px;
+  width: 48px;
+  height: 8px;
   background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
   transform: translateX(-50%);
 }