clauddy 1.19.0 → 1.20.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.
 

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,14 +120,21 @@ 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
 }

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,8 +328,11 @@ 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)
   applyAccount(accounts.active())
   const { workAreaSize } = screen.getPrimaryDisplay()
@@ -685,6 +698,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.20.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">
@@ -311,12 +316,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

@@ -724,39 +724,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 +786,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 +861,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 +953,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 +1118,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 +1194,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;
@@ -683,20 +789,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 +854,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 +871,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 +878,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;