clauddy 1.20.0 → 1.21.0

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clauddy",
   "desktopName": "clauddy.desktop",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "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

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%);
 }