clauddy 1.13.0 → 1.14.0

package/README.md

@@ -4,7 +4,7 @@ A cute pixel-art desktop pet for macOS that tracks your Claude Code usage — mi
 
 <p align="center">
 
-https://github.com/user-attachments/assets/76d87b6f-2876-4000-b6db-13ba2207ae31
+https://github.com/user-attachments/assets/dbe00d9a-b49c-48ea-941c-76c517dec358
 
 <em>A little terracotta creature that lives in the corner of your screen, eats your tokens, and naps when you're idle.</em>
 </p>
@@ -142,6 +142,18 @@ chmod +x Clauddy-*.AppImage
 ./Clauddy-*.AppImage
 ```
 
+Want the pet icon to show up in your app menu / taskbar too, instead of a generic icon? Running the AppImage directly doesn't register it anywhere — GNOME (and most Wayland desktops) only pick up an app's icon from an installed `.desktop` entry. One-time setup, right next to the AppImage:
+
+```bash
+./Clauddy-*.AppImage --appimage-extract clauddy.desktop >/dev/null
+./Clauddy-*.AppImage --appimage-extract usr/share/icons/hicolor/512x512/apps/clauddy.png >/dev/null
+mkdir -p ~/.local/share/applications ~/.local/share/icons/hicolor/512x512/apps
+cp squashfs-root/usr/share/icons/hicolor/512x512/apps/clauddy.png ~/.local/share/icons/hicolor/512x512/apps/clauddy.png
+sed "s|^Exec=.*|Exec=$(readlink -f Clauddy-*.AppImage) --no-sandbox %U|" squashfs-root/clauddy.desktop > ~/.local/share/applications/clauddy.desktop
+rm -rf squashfs-root
+update-desktop-database ~/.local/share/applications 2>/dev/null
+```
+
 > The system tray icon needs an indicator extension on vanilla GNOME (e.g. "AppIndicator and KStatusNotifier Item Support") — it works out of the box on Cinnamon, KDE, and XFCE. Autostart-at-login is wired up via an XDG `.desktop` entry in `~/.config/autostart/`.
 
 > The app keeps its data in `~/.claude-usage-monitor`, regardless of platform or how you run it.

package/config.json

@@ -4,6 +4,7 @@
   "alerts": true,
   "alertThresholds": [80, 95],
   "fireThreshold": 90,
+  "zoom": 100,
   "pollIntervalMs": 4000,
   "activeThresholdMs": 20000,
   "sleepThresholdMs": 300000

package/main.js

@@ -65,6 +65,7 @@ function publicConfig(c) {
     alerts: c.alerts,
     alertThresholds: c.alertThresholds,
     fireThreshold: c.fireThreshold,
+    zoom: c.zoom,
   }
 }
 
@@ -78,6 +79,7 @@ function loadConfig() {
     alerts: true,
     alertThresholds: [80, 95],
     fireThreshold: 90, // session % at which the pet catches fire (tired still fixed at 100)
+    zoom: 100, // widget scale %, 100-200
     pollIntervalMs: 4000,
     activeThresholdMs: 20000,
     sleepThresholdMs: 300000,
@@ -137,6 +139,7 @@ function createWindow() {
     skipTaskbar: true,
     hasShadow: false,
     fullscreenable: false,
+    icon: path.join(__dirname, 'build', 'icon.png'),
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
       contextIsolation: true,

package/package.json

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

package/renderer/index.html

@@ -328,6 +328,22 @@
           </span>
         </div>
 
+        <div class="set-section">
+          <div class="set-sec-title">Zoom</div>
+          <div class="set-thresholds">
+            <span class="thr">
+              <span class="thr-cap">size</span>
+              <span class="num">
+                <input id="set-zoom" type="number" min="100" max="200" step="25" />
+                <span class="num-spin">
+                  <button type="button" class="num-btn" data-for="set-zoom" data-step="25">▲</button>
+                  <button type="button" class="num-btn" data-for="set-zoom" data-step="-25">▼</button>
+                </span>
+              </span>
+            </span>
+          </div>
+        </div>
+
         <div class="set-section">
           <div class="set-sec-title">
             Alerts

package/renderer/pet.js

@@ -392,12 +392,15 @@ function renderBars(boxId, list, limit) {
 function fitNames(box) {
   const names = [...box.querySelectorAll('.mname')]
   // a collapsed section measures zero — it re-fits when it opens
-  if (!names.length || !box.getBoundingClientRect().width) return
+  if (!names.length || !box.offsetWidth) return
   box.style.setProperty('--name-w', 'auto')
+  // offsetWidth, not getBoundingClientRect: the width we hand back is a layout px,
+  // so it has to be measured in layout px too. A CSS transform on an ancestor
+  // (the video stage scales the card) inflates the rect and squeezes the bars away.
   let widest = 0
-  for (const n of names) widest = Math.max(widest, n.getBoundingClientRect().width)
-  const room = box.getBoundingClientRect().width - BAR_MIN
-  const w = Math.max(NAME_MIN, Math.min(Math.ceil(widest) + 1, room))
+  for (const n of names) widest = Math.max(widest, n.offsetWidth)
+  const room = box.offsetWidth - BAR_MIN
+  const w = Math.max(NAME_MIN, Math.min(widest + 2, room))
   box.style.setProperty('--name-w', `${w}px`)
 }
 
@@ -593,8 +596,12 @@ let lastW = 0
 function fitSize() {
   requestAnimationFrame(() => {
     const collapsed = document.body.classList.contains('collapsed')
-    const w = collapsed ? 140 : 276
-    const h = el('card').offsetHeight + 24 // 12px margin top + bottom
+    const zoom = Number.parseFloat(document.body.style.zoom) || 1
+    const w = (collapsed ? 140 : 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
+    const h = (el('card').offsetHeight + 24) * zoom // 12px margin top + bottom
     if (Math.abs(h - lastH) > 2 || w !== lastW) {
       lastH = h
       lastW = w
@@ -603,6 +610,12 @@ function fitSize() {
   })
 }
 
+// widget scale, applied as a CSS zoom (not transform) so offsetWidth/Height
+// keep reflecting it — see fitNames()'s comment on why transform can't be used here
+function applyZoom(z) {
+  document.body.style.zoom = (z || 100) / 100
+}
+
 let currentConfig = {}
 let realUsage = null
 let debugState = null
@@ -621,6 +634,8 @@ window.api.onError((msg) => {
 window.api.onConfig((cfg) => {
   currentConfig = cfg || {}
   document.body.classList.toggle('is-menubar', currentConfig.mode === 'menubar')
+  applyZoom(currentConfig.zoom)
+  fitSize()
 })
 window.api.onRealUsage((u) => {
   realUsage = u || null
@@ -806,6 +821,7 @@ function snapshotSettings() {
     t1: el('set-t1').value,
     t2: el('set-t2').value,
     fire: el('set-fire').value,
+    zoom: el('set-zoom').value,
   })
 }
 function refreshSaveDirty() {
@@ -824,6 +840,7 @@ function populateSettings() {
   el('set-t1').value = th[0] != null ? th[0] : 80
   el('set-t2').value = th[1] != null ? th[1] : 95
   el('set-fire').value = c.fireThreshold != null ? c.fireThreshold : 90
+  el('set-zoom').value = c.zoom != null ? c.zoom : 100
   clearSaveDirty() // fields now match the saved config
 }
 function openSettings() {
@@ -847,7 +864,7 @@ for (const b of document.querySelectorAll('.num-btn')) {
   })
 }
 // light up Save whenever an editable field changes
-for (const id of ['set-alerts', 'set-t1', 'set-t2', 'set-fire']) {
+for (const id of ['set-alerts', 'set-t1', 'set-t2', 'set-fire', 'set-zoom']) {
   el(id).addEventListener('input', refreshSaveDirty)
   el(id).addEventListener('change', refreshSaveDirty)
 }
@@ -866,6 +883,9 @@ el('set-cancel').addEventListener('click', () => {
 el('set-save').addEventListener('click', () => {
   const num = (id) => parseFloat(el(id).value)
   const fire = num('set-fire')
+  const zoomRaw = num('set-zoom')
+  const zoom = zoomRaw >= 100 && zoomRaw <= 200 ? Math.round(zoomRaw) : 100
+  applyZoom(zoom) // apply immediately so the fitSize() below measures the new size
   window.api.saveConfig({
     mode: selectedMode,
     alerts: el('set-alerts').checked,
@@ -873,6 +893,7 @@ el('set-save').addEventListener('click', () => {
       .filter((n) => n >= 1 && n <= 100)
       .sort((a, b) => a - b),
     fireThreshold: fire >= 1 && fire <= 99 ? fire : 90,
+    zoom,
   })
   clearSaveDirty()
   document.body.classList.remove('settings-open')