clauddy 1.20.0 → 1.21.1

package/README.md

@@ -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

@@ -139,6 +139,32 @@ function remove(id) {
   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,
@@ -151,4 +177,5 @@ module.exports = {
   label,
   setClaudeDir,
   remove,
+  pruneOrphans,
 }

package/main.js

@@ -334,6 +334,7 @@ function createWindow() {
     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
@@ -677,16 +678,32 @@ function startUsagePoll() {
 }
 
 // push the logged-in account's identity (email + plan) to the renderer
-async function sendProfile() {
+let profileTimer = null
+async function sendProfile(tries = 0) {
+  clearTimeout(profileTimer)
   if (!auth.isConnected()) return
+  // whose profile this is, decided *before* the await: a switch during the
+  // fetch would otherwise label the new account with the old one's email
+  const id = accounts.activeId()
   try {
     const p = await auth.fetchProfile()
+    if (id !== accounts.activeId()) return // switched under us — this is stale
     if (p?.email) {
-      accounts.label(accounts.activeId(), p.email) // a better name than "acct-xyz"
+      accounts.label(id, p.email) // a better name than "acct-xyz"
       sendAccounts()
     }
     if (win && !win.isDestroyed()) win.webContents.send('profile', p)
-  } catch {} // non-fatal: the chip just stays hidden
+  } catch {
+    // a rate limit or a blip would otherwise hide the chip — and with it the
+    // account switcher — until the app is restarted, so keep trying for a while
+    if (tries >= 4) return
+    profileTimer = setTimeout(
+      () => {
+        if (id === accounts.activeId()) sendProfile(tries + 1)
+      },
+      30 * 1000 * 2 ** tries,
+    )
+  }
 }
 
 // begin() has to run *after* any account switch: switching resets the pending

package/package.json

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

package/renderer/index.html

@@ -112,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">

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
@@ -691,26 +700,38 @@ window.api.onAuthState((s) => {
 })
 
 // logged-in account chip (email + plan) shown top-left when connected
+let lastProfile = null
 function showProfile(p) {
+  lastProfile = p
+  paintChip()
+}
+
+// The chip is also the account switcher, so it must not vanish just because the
+// profile fetch failed — that would strand the user on one account until a
+// restart. The label main stored for the active account is the same email, so
+// it stands in until the profile lands.
+function paintChip() {
+  const p = lastProfile
+  const a = lastAccounts
+  const active = (a?.accounts || []).find((x) => x.id === a?.active)
+  const email = p?.email || (active?.connected ? active.label : null)
   // the settings line says who is connected, not just that someone is
-  el('acc-ok').textContent = p?.email
-    ? `● ${p.email}${p.plan ? ` · ${p.plan}` : ''}`
-    : '● Connected'
+  el('acc-ok').textContent = email ? `● ${email}${p?.plan ? ` · ${p.plan}` : ''}` : '● Connected'
   const chip = el('account-chip')
   const mini = el('mini-acct')
-  if (!p?.email) {
+  if (!email) {
     chip.hidden = true
     mini.hidden = true
     return
   }
   // expanded: full email chip in the top bar
-  el('ac-email').textContent = p.email
-  chip.title = p.name ? `${p.name} · ${p.email}` : p.email
-  setPlan(el('ac-plan'), p.plan)
+  el('ac-email').textContent = email
+  chip.title = p?.name ? `${p.name} · ${email}` : email
+  setPlan(el('ac-plan'), p?.plan)
   chip.hidden = false
   // collapsed: short name + plan in the mini block (email won't fit at 116px)
-  el('mini-acct-name').textContent = p.name || p.email.split('@')[0]
-  setPlan(el('mini-acct-plan'), p.plan)
+  el('mini-acct-name').textContent = p?.name || email.split('@')[0]
+  setPlan(el('mini-acct-plan'), p?.plan)
   mini.hidden = false
 }
 function setPlan(node, plan) {
@@ -756,6 +777,8 @@ function accountRow(acc, a) {
 function renderAccounts(a) {
   lastAccounts = a
   document.body.classList.toggle('one-account', (a?.accounts || []).length < 2)
+  paintChip() // the label may be all the chip has to go on
+
   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()

package/renderer/style.css

@@ -314,6 +314,19 @@ body.one-account .ac-caret {
 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 {
@@ -1076,7 +1089,7 @@ body.collapsed #mini {
   display: block;
 }
 body.collapsed #card {
-  width: 116px;
+  width: 144px;
   padding: 12px 12px 13px;
 }
 body.collapsed #stage {
@@ -1148,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;
@@ -1171,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%);
 }