clauddy 1.10.1 → 1.11.0

package/README.md

@@ -87,6 +87,8 @@ curl -fsSL https://raw.githubusercontent.com/renatoaug/claude-usage-monitor/main
 
 **Clauddy is free and open source** — the command above just downloads the latest release from this repo and drops it in `/Applications`, nothing else (you can read [`install.sh`](install.sh) first if you'd like).
 
+Once installed, you can update in-app: **⚙ Settings → Check for updates → Update now** runs the same installer and relaunches the new build.
+
 Why not a normal download? macOS blocks **unsigned** apps downloaded through a browser with a scary *"damaged, move to Trash"* warning — even when they're perfectly safe. It's a false alarm: the only way to silence it is to pay Apple **$99/year** to sign + notarize, which a free hobby app skips. Files fetched with `curl` aren't flagged, so this method simply **lets your Mac open the app** without the block. It then registers in **Login Items** and starts with your Mac — set it and forget it.
 
 #### 2. Run it via `bunx` (no install)

package/main.js

@@ -12,9 +12,12 @@ const {
 const path = require('node:path')
 const fs = require('node:fs')
 const os = require('node:os')
+const { spawn } = require('node:child_process')
 const { getUsage } = require('./usage')
 const auth = require('./auth')
 
+const REPO = 'renatoaug/claude-usage-monitor'
+
 // data dir: kept outside the project folder so moving the repo doesn't break it.
 // when CLAUDE_CONFIG_DIR is set (e.g. via direnv for multi-account setups), nest
 // the widget's data under that account's Claude config dir so each account gets
@@ -163,12 +166,15 @@ function createWindow() {
   win.webContents.once('did-finish-load', () => {
     tick()
     win.webContents.send('config', publicConfig(config))
+    win.webContents.send('version', app.getVersion())
     win.webContents.send('auth-state', { connected: auth.isConnected() })
     pollTimer = setInterval(tick, config.pollIntervalMs)
     startUsagePoll()
     sendProfile()
     watchDebug()
     applyMode(config.mode) // reveal the widget, or set up the tray + popover
+    setTimeout(autoUpdateCheck, 8000) // check once shortly after launch…
+    setInterval(autoUpdateCheck, 6 * 60 * 60 * 1000) // …then every 6h
   })
 }
 
@@ -412,6 +418,64 @@ ipcMain.on('save-config', (_e, patch) => {
   applyMode(config.mode) // switch between floating widget and menu-bar popover live
 })
 
+// ---- self-update (checks the latest GitHub release, runs install.sh) ---------
+async function fetchLatestTag() {
+  const res = await fetch(`https://api.github.com/repos/${REPO}/releases/latest`, {
+    headers: { 'User-Agent': 'Clauddy', Accept: 'application/vnd.github+json' },
+  })
+  if (!res.ok) throw new Error(`HTTP ${res.status}`)
+  const j = await res.json()
+  return j.tag_name // e.g. "v1.9.1"
+}
+// compare two "1.2.3" versions; >0 if a is newer than b
+function cmpVer(a, b) {
+  const pa = String(a).replace(/^v/, '').split('.').map(Number)
+  const pb = String(b).replace(/^v/, '').split('.').map(Number)
+  for (let i = 0; i < 3; i++) {
+    const d = (pa[i] || 0) - (pb[i] || 0)
+    if (d) return d > 0 ? 1 : -1
+  }
+  return 0
+}
+async function computeUpdate() {
+  const latest = await fetchLatestTag()
+  return { latest, available: cmpVer(latest, app.getVersion()) > 0 }
+}
+// manual check (from the Settings button): shows checking / result / error
+ipcMain.on('check-updates', async () => {
+  if (!win || win.isDestroyed()) return
+  const send = (s) => !win.isDestroyed() && win.webContents.send('update-status', s)
+  send({ state: 'checking' })
+  try {
+    const u = await computeUpdate()
+    send(u.available ? { state: 'available', latest: u.latest } : { state: 'uptodate' })
+  } catch (e) {
+    send({ state: 'error', message: String(e?.message || e) })
+  }
+})
+// silent background check: only speaks up when there's actually an update, so
+// the renderer can badge the gear without any UI churn on the common case
+async function autoUpdateCheck() {
+  if (!win || win.isDestroyed()) return
+  try {
+    const u = await computeUpdate()
+    if (u.available) win.webContents.send('update-status', { state: 'available', latest: u.latest })
+  } catch {} // offline / rate-limited: stay quiet, try again on the next tick
+}
+ipcMain.on('do-update', () => {
+  // Windows/Linux have no install.sh: send them to the releases page instead.
+  if (process.platform !== 'darwin') {
+    shell.openExternal(`https://github.com/${REPO}/releases/latest`)
+    return
+  }
+  if (win && !win.isDestroyed()) win.webContents.send('update-status', { state: 'updating' })
+  const cmd = `curl -fsSL https://raw.githubusercontent.com/${REPO}/main/install.sh | bash`
+  const child = spawn('/bin/bash', ['-lc', cmd], { detached: true, stdio: 'ignore' })
+  child.unref()
+  // quit so the installer can replace the running .app and relaunch the new build
+  setTimeout(() => app.quit(), 1500)
+})
+
 ipcMain.on('quit', () => app.quit())
 
 // Electron's login-item API only covers macOS (SMAppService) and Windows (the

package/package.json

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

package/preload.js

@@ -15,5 +15,9 @@ contextBridge.exposeInMainWorld('api', {
   authCode: (code) => ipcRenderer.send('auth-code', code),
   authLogout: () => ipcRenderer.send('auth-logout'),
   onDebugState: (cb) => ipcRenderer.on('debug-state', (_e, s) => cb(s)),
+  onVersion: (cb) => ipcRenderer.on('version', (_e, v) => cb(v)),
+  onUpdateStatus: (cb) => ipcRenderer.on('update-status', (_e, s) => cb(s)),
+  checkUpdates: () => ipcRenderer.send('check-updates'),
+  doUpdate: () => ipcRenderer.send('do-update'),
   quit: () => ipcRenderer.send('quit'),
 })

package/renderer/index.html

@@ -305,55 +305,72 @@
           </div>
         </div>
 
-        <div class="set-hint set-hint-left">Where Clauddy lives: a floating pet, or a menu-bar icon with a pop-up.</div>
-        <label class="set-field">Display
+        <div class="set-section">
+          <div class="set-sec-title">Display</div>
           <span class="seg" id="set-mode">
             <button type="button" class="seg-btn" data-mode="floating">Floating pet</button>
             <button type="button" class="seg-btn" data-mode="menubar">Menu bar</button>
           </span>
-        </label>
+        </div>
 
-        <label class="set-check"><input id="set-alerts" type="checkbox" /> Alerts</label>
-        <div class="set-hint set-hint-left">A macOS notification when your session or weekly usage crosses each level.</div>
-        <label class="set-field">Alert thresholds (%)
-          <span class="set-two">
-            <span class="num">
-              <input id="set-t1" type="number" min="1" max="100" />
-              <span class="num-spin">
-                <button type="button" class="num-btn" data-for="set-t1" data-step="1">▲</button>
-                <button type="button" class="num-btn" data-for="set-t1" data-step="-1">▼</button>
+        <div class="set-section">
+          <div class="set-sec-title">
+            Alerts
+            <input id="set-alerts" class="set-toggle" type="checkbox" aria-label="Enable alerts" />
+          </div>
+          <div class="set-thresholds">
+            <span class="thr">
+              <span class="thr-cap">heads-up</span>
+              <span class="num">
+                <input id="set-t1" type="number" min="1" max="100" />
+                <span class="num-spin">
+                  <button type="button" class="num-btn" data-for="set-t1" data-step="1">▲</button>
+                  <button type="button" class="num-btn" data-for="set-t1" data-step="-1">▼</button>
+                </span>
               </span>
             </span>
-            <span class="num">
-              <input id="set-t2" type="number" min="1" max="100" />
-              <span class="num-spin">
-                <button type="button" class="num-btn" data-for="set-t2" data-step="1">▲</button>
-                <button type="button" class="num-btn" data-for="set-t2" data-step="-1">▼</button>
+            <span class="thr">
+              <span class="thr-cap">near limit</span>
+              <span class="num">
+                <input id="set-t2" type="number" min="1" max="100" />
+                <span class="num-spin">
+                  <button type="button" class="num-btn" data-for="set-t2" data-step="1">▲</button>
+                  <button type="button" class="num-btn" data-for="set-t2" data-step="-1">▼</button>
+                </span>
               </span>
             </span>
-          </span>
-          <span class="set-two set-caps">
-            <span class="num-cap">heads-up</span>
-            <span class="num-cap">near limit</span>
-          </span>
-        </label>
-        <div class="set-hint set-hint-left">The pet catches fire past this session % (it's maxed out at 100%).</div>
-        <label class="set-field">Catch fire at (%)
-          <span class="set-two">
-            <span class="num">
-              <input id="set-fire" type="number" min="1" max="99" />
-              <span class="num-spin">
-                <button type="button" class="num-btn" data-for="set-fire" data-step="1">▲</button>
-                <button type="button" class="num-btn" data-for="set-fire" data-step="-1">▼</button>
+          </div>
+        </div>
+
+        <div class="set-section">
+          <div class="set-sec-title">Catch fire</div>
+          <div class="set-thresholds">
+            <span class="thr">
+              <span class="thr-cap">session %</span>
+              <span class="num">
+                <input id="set-fire" type="number" min="1" max="99" />
+                <span class="num-spin">
+                  <button type="button" class="num-btn" data-for="set-fire" data-step="1">▲</button>
+                  <button type="button" class="num-btn" data-for="set-fire" data-step="-1">▼</button>
+                </span>
               </span>
             </span>
-            <span class="num" aria-hidden="true"></span>
-          </span>
-        </label>
+          </div>
+        </div>
+
         <div class="set-actions">
           <button id="set-cancel">Cancel</button>
           <button id="set-save">Save</button>
         </div>
+
+        <div class="set-updates">
+          <span class="upd-ver">Clauddy v<span id="app-version">—</span></span>
+          <span class="upd-right">
+            <span id="upd-status"></span>
+            <button type="button" id="upd-check" class="acc-link">Check for updates</button>
+            <button type="button" id="upd-now" class="upd-btn" hidden>Update now</button>
+          </span>
+        </div>
       </div>
     </div>
     <script src="pet.js"></script>

package/renderer/pet.js

@@ -640,6 +640,51 @@ el('acc-confirm').addEventListener('click', () => {
 })
 el('acc-logout').addEventListener('click', () => window.api.authLogout())
 
+// self-update: show the version, check the latest release, one-click update
+window.api.onVersion((v) => {
+  if (v) el('app-version').textContent = v
+})
+window.api.onUpdateStatus((s) => {
+  const status = el('upd-status')
+  const now = el('upd-now')
+  const check = el('upd-check')
+  // reset to the idle look, then layer each state on top
+  now.hidden = true
+  check.hidden = false
+  status.textContent = ''
+  status.className = ''
+  const state = s?.state
+  if (state === 'checking') {
+    status.textContent = 'Checking…'
+    check.hidden = true
+  } else if (state === 'uptodate') {
+    status.textContent = "You're up to date"
+    status.className = 'ok'
+  } else if (state === 'available') {
+    // the button carries the version, so no separate status text is needed
+    now.textContent = `Update to ${s.latest}`
+    now.hidden = false
+    check.hidden = true
+  } else if (state === 'updating') {
+    status.textContent = 'Updating… the app will restart'
+    check.hidden = true
+  } else if (state === 'error') {
+    status.textContent = 'Check failed'
+    status.className = 'err'
+  }
+  // pulse a dot on the gear whenever an update is waiting (cleared once it's
+  // up to date or actively updating) — so it's noticeable without opening Settings
+  if (state === 'available') document.body.classList.add('has-update')
+  else if (state === 'uptodate' || state === 'updating')
+    document.body.classList.remove('has-update')
+  if (document.body.classList.contains('settings-open')) fitSize()
+})
+el('upd-check').addEventListener('click', () => window.api.checkUpdates())
+el('upd-now').addEventListener('click', () => {
+  el('upd-now').disabled = true
+  window.api.doUpdate()
+})
+
 // settings panel
 // snapshot of the editable fields, to tell whether there are unsaved changes
 let settingsBaseline = null

package/renderer/style.css

@@ -104,6 +104,38 @@ body {
 #gear {
   font-size: 10px;
 }
+/* "update available" cue: a soft pulsing coral dot on the gear's corner, so a
+   new version is noticeable without opening Settings */
+body.has-update #gear {
+  position: relative;
+  overflow: visible;
+}
+body.has-update #gear::after {
+  content: "";
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--coral);
+  box-shadow:
+    0 0 0 1.5px #2a1f19,
+    0 0 5px 1px rgba(217, 119, 87, 0.6);
+  animation: upd-badge 1.6s ease-in-out infinite;
+  pointer-events: none;
+}
+@keyframes upd-badge {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.9;
+  }
+  50% {
+    transform: scale(1.3);
+    opacity: 1;
+  }
+}
 /* minimize icon swaps to an "expand" icon when collapsed */
 .ic-max {
   display: none;
@@ -232,8 +264,8 @@ body.settings-open #settings {
   border-color: var(--coral);
 }
 /* hide the ugly native number spinners (custom ones below) */
-.set-field input[type="number"]::-webkit-inner-spin-button,
-.set-field input[type="number"]::-webkit-outer-spin-button {
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   appearance: none;
   margin: 0;
@@ -270,28 +302,73 @@ body.settings-open #settings {
 body.is-menubar #min {
   display: none;
 }
-.set-two {
+/* settings sections: Display / Alerts / Catch fire — each with a standardized
+   title, separated by a hairline divider */
+.set-section {
+  margin-bottom: 10px;
+}
+.set-section + .set-section {
+  border-top: 0.5px solid var(--hair);
+  padding-top: 10px;
+}
+.set-sec-title {
   display: flex;
-  gap: 6px;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 8px;
 }
-/* small captions under each threshold box */
-.set-caps {
-  margin-top: 3px;
+/* alerts on/off toggle, sitting to the right of the section title */
+.set-toggle {
+  margin: 0;
+  width: 13px;
+  height: 13px;
+  accent-color: var(--coral);
+  cursor: pointer;
 }
-.num-cap {
-  flex: 1;
-  font-size: 8.5px;
+/* threshold fields: caption on top, number input below — same shape for all
+   three (heads-up, near limit, catch fire) so they read as one set */
+.set-thresholds {
+  display: flex;
+  gap: 12px;
+}
+.thr {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.thr-cap {
+  font-size: 9px;
   color: var(--muted);
-  padding-left: 2px;
+  height: 12px;
+  line-height: 12px;
 }
-/* custom number stepper */
+/* number field + custom stepper */
 .num {
   position: relative;
-  flex: 1;
+  flex: none;
+  width: 66px;
 }
 .num input {
   width: 100%;
-  padding-right: 24px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 0.5px solid var(--hair);
+  border-radius: 8px;
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  padding: 6px 24px 6px 10px;
+  outline: none;
+  transition:
+    border-color 0.15s,
+    background 0.15s;
+}
+.num input:focus {
+  border-color: var(--coral);
+  background: rgba(255, 255, 255, 0.09);
 }
 .num-spin {
   position: absolute;
@@ -387,6 +464,61 @@ body.is-menubar #min {
   }
 }
 
+/* updates footer */
+.set-updates {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 11px;
+  padding-top: 9px;
+  border-top: 0.5px solid var(--hair);
+}
+.upd-ver {
+  font-size: 10px;
+  color: var(--muted);
+}
+.upd-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+#upd-status {
+  font-size: 10px;
+  color: var(--muted);
+}
+#upd-status.ok {
+  color: var(--green);
+}
+#upd-status.err {
+  color: var(--coral);
+}
+/* compact update button — lighter than the full-width .acc-btn */
+.upd-btn {
+  border: none;
+  border-radius: 7px;
+  padding: 4px 9px;
+  font-size: 10px;
+  font-weight: 600;
+  color: #fff;
+  background: var(--coral);
+  cursor: pointer;
+  -webkit-app-region: no-drag;
+  transition:
+    background 0.18s,
+    transform 0.1s;
+}
+.upd-btn:hover {
+  background: #e2876a;
+}
+.upd-btn:active {
+  transform: scale(0.97);
+}
+.upd-btn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
 /* live tag */
 .live-only {
   display: none;
@@ -402,6 +534,8 @@ body.live .live-only {
 /* account / auth */
 #account {
   margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 0.5px solid var(--hair); /* divider before the first section */
 }
 .acc-btn {
   width: 100%;
@@ -434,12 +568,13 @@ body.live .live-only {
   color: var(--muted);
   font-size: 10px;
   cursor: pointer;
-  text-decoration: underline;
+  text-decoration: none;
   -webkit-app-region: no-drag;
   transition: color 0.15s;
 }
 .acc-link:hover {
   color: var(--text);
+  text-decoration: underline;
 }
 .acc-ok {
   color: var(--green);