clauddy 1.13.1 → 1.15.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/auth.js

@@ -152,6 +152,32 @@ function win(o) {
     : null
 }
 
+// Weekly limits scoped to one model (e.g. "Fable" on Max) live in the `limits`
+// array. The older seven_day_<model> windows are kept as a fallback for plans
+// that still report them that way.
+function scopedWeeks(j) {
+  const out = []
+  for (const l of Array.isArray(j.limits) ? j.limits : []) {
+    if (l?.kind !== 'weekly_scoped' || typeof l.percent !== 'number') continue
+    const label = l.scope?.model?.display_name
+    if (!label) continue
+    out.push({
+      label,
+      pct: l.percent,
+      resetMs: l.resets_at ? Date.parse(l.resets_at) - Date.now() : null,
+    })
+  }
+  if (out.length) return out
+  for (const [key, label] of [
+    ['seven_day_opus', 'Opus'],
+    ['seven_day_sonnet', 'Sonnet'],
+  ]) {
+    const w = win(j[key])
+    if (w) out.push({ label, ...w })
+  }
+  return out
+}
+
 // Step 3: fetch the authoritative usage
 async function fetchUsage() {
   const token = await validToken()
@@ -173,8 +199,7 @@ async function fetchUsage() {
   return {
     session: win(j.five_hour) || { pct: 0, resetMs: null },
     week: win(j.seven_day) || { pct: 0, resetMs: null },
-    sonnet: win(j.seven_day_sonnet),
-    opus: win(j.seven_day_opus),
+    scoped: scopedWeeks(j),
   }
 }
 

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,
@@ -93,12 +95,22 @@ function loadConfig() {
 // native notification when usage crosses a threshold
 const armed = new Set()
 function checkAlerts(config, d) {
-  if (!config.alerts || !Notification.isSupported()) return
-  const ths = config.alertThresholds || [80, 95]
-  const scopes = [
+  alertScopes(config, [
     ['session', d.session.pct],
     ['weekly usage', d.week.pct],
-  ]
+  ])
+}
+// per-model weekly limits only exist on the account side, so they're checked
+// off the OAuth poll rather than the local tick
+function checkScopedAlerts(config, u) {
+  alertScopes(
+    config,
+    (u?.scoped || []).map((s) => [`${s.label} weekly usage`, s.pct]),
+  )
+}
+function alertScopes(config, scopes) {
+  if (!config.alerts || !Notification.isSupported()) return
+  const ths = config.alertThresholds || [80, 95]
   for (const [name, pct] of scopes) {
     for (const t of ths) {
       const key = `${name}:${t}`
@@ -137,6 +149,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,
@@ -358,6 +371,7 @@ function updateTray() {
 function pushRealUsage(u) {
   sessionPct = u?.session ? u.session.pct : null
   updateTray()
+  checkScopedAlerts(config, u)
   if (win && !win.isDestroyed()) win.webContents.send('real-usage', u)
 }
 

package/package.json

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

package/renderer/index.html

@@ -253,6 +253,8 @@
               <div class="track"><div class="fill week" id="week-fill"></div></div>
               <div class="sub" id="week-sub">—</div>
             </div>
+            <!-- per-model weekly limits (e.g. Fable), one meter each -->
+            <div id="scoped-meters"></div>
           </div>
           <button id="limits-connect">
             <svg class="lc-ico" viewBox="0 0 24 24" aria-hidden="true">
@@ -328,6 +330,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

@@ -404,6 +404,27 @@ function fitNames(box) {
   box.style.setProperty('--name-w', `${w}px`)
 }
 
+// per-model weekly limits (e.g. "Fable" on Max) — one meter each, in the same
+// shape as the all-models one. The token count pairs the limit with the local
+// log totals for that model family (a "Fable" limit covers every Fable row).
+function renderScoped(list, byModel) {
+  const box = el('scoped-meters')
+  box.innerHTML = ''
+  for (const s of list) {
+    const key = s.label.toLowerCase()
+    const tokens = byModel
+      .filter((m) => m.label.toLowerCase().startsWith(key))
+      .reduce((n, m) => n + m.tokens, 0)
+    const m = document.createElement('div')
+    m.className = 'meter'
+    m.innerHTML =
+      `<div class="meter-top"><span>weekly · ${esc(key)}</span><span>${Math.round(s.pct)}%</span></div>` +
+      `<div class="track"><div class="fill week${s.pct >= 80 ? ' high' : ''}" style="width:${s.pct}%"></div></div>` +
+      `<div class="sub">${s.resetMs != null ? `resets in ${fmtReset(s.resetMs)} · ` : ''}${fmtTokens(tokens)} tokens</div>`
+    box.appendChild(m)
+  }
+}
+
 // by model (7 days)
 function renderModels(list) {
   renderBars('bymodel-list', list, 4)
@@ -571,6 +592,7 @@ function render(d) {
       ? `resets in ${fmtReset(wkReset)} · ${fmtTokens(d.week.tokens)} tokens`
       : `${fmtTokens(d.week.tokens)} tokens · last 7 days`
 
+  renderScoped(liveOn ? realUsage.scoped || [] : [], d.byModel || [])
   renderModels(d.byModel || [])
   renderProjects(d.byProject || [])
   renderHeat(d.days30 || [])
@@ -596,8 +618,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
@@ -606,6 +632,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
@@ -624,6 +656,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
@@ -809,6 +843,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() {
@@ -827,6 +862,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() {
@@ -850,7 +886,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)
 }
@@ -869,6 +905,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,
@@ -876,6 +915,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')

package/renderer/style.css

@@ -1679,7 +1679,8 @@ body.state-tired #status-text {
 }
 
 /* meters */
-.meter + .meter {
+.meter + .meter,
+#scoped-meters .meter {
   margin-top: 9px;
 }
 .meter-top {