clauddy 1.3.0 → 1.5.0

package/README.md

@@ -1,9 +1,9 @@
-# 🟫 Claude Usage Monitor
+# 🟫 Clauddy
 
 A cute pixel-art desktop pet for macOS that tracks your Claude Code usage — mirroring the official **Settings → Usage** panel (current session + weekly limits, in tokens & %), with animations.
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/renatoaug/claude-usage-monitor/main/docs/media/overview.gif" width="300" alt="Claude Usage Monitor — the full widget showing session, weekly, by-model and 30-day usage" /><br />
+  <img src="https://raw.githubusercontent.com/renatoaug/claude-usage-monitor/main/docs/media/overview.gif" width="300" alt="Clauddy — the full widget showing session, weekly, by-model and 30-day usage" /><br />
   <em>A little terracotta creature that lives in the corner of your screen, eats your tokens, and naps when you're idle.</em>
 </p>
 
@@ -60,7 +60,9 @@ One command — it downloads the latest release and drops it in `/Applications`:
 curl -fsSL https://raw.githubusercontent.com/renatoaug/claude-usage-monitor/main/install.sh | bash
 ```
 
-No Gatekeeper warning: files fetched with `curl` aren't quarantined like browser downloads, so the (unsigned) app just opens. It registers itself in **Login Items**, so it **starts automatically** with your Mac — set it and forget it.
+**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).
+
+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)
 
@@ -74,19 +76,6 @@ The first run downloads Electron, so give it a moment. Handy for a quick run, bu
 
 > The app keeps its data in `~/.claude-usage-monitor`, regardless of how you run it.
 
-<details>
-<summary>Prefer to download the app by hand?</summary>
-
-Grab the **`…-mac.zip`** from [Releases](https://github.com/renatoaug/claude-usage-monitor/releases/latest), unzip, and drag the app to `/Applications`. The browser quarantines it, so macOS will call it *"damaged"* — clear the flag once (Terminal needs **Full Disk Access**):
-
-```bash
-xattr -dr com.apple.quarantine "/Applications/Claude Usage Monitor.app"
-```
-
-The `curl` installer above avoids all of this.
-
-</details>
-
 ## Controls
 
 - **Drag** the widget anywhere on screen

package/auth.js

@@ -9,6 +9,7 @@ const REDIRECT = 'https://platform.claude.com/oauth/code/callback'
 const AUTHORIZE = 'https://claude.ai/oauth/authorize'
 const TOKEN_URL = 'https://platform.claude.com/v1/oauth/token'
 const USAGE_URL = 'https://api.anthropic.com/api/oauth/usage'
+const PROFILE_URL = 'https://api.anthropic.com/api/oauth/profile'
 const SCOPE = 'org:create_api_key user:profile user:inference'
 const UA = 'claude-cli/2.1.181 (external, cli)'
 // when CLAUDE_CONFIG_DIR is set (e.g. via direnv for multi-account setups),
@@ -23,6 +24,7 @@ const b64url = (buf) =>
 
 let tokens = null // { access_token, refresh_token, expires_at }
 let pending = null // { verifier, state }
+let profile = null // { email, name, plan } — cached account identity
 
 function load() {
   if (tokens) return tokens
@@ -42,6 +44,7 @@ function save(t) {
 }
 function clear() {
   tokens = null
+  profile = null
   try {
     fs.unlinkSync(TOKEN_PATH)
   } catch {}
@@ -169,4 +172,29 @@ async function fetchUsage() {
   }
 }
 
-module.exports = { begin, complete, fetchUsage, clear, isConnected }
+// The logged-in account's identity (email + plan tier). Cached for the session;
+// only changes on logout/login, so we don't re-fetch on every usage poll.
+async function fetchProfile() {
+  if (profile) return profile
+  const token = await validToken()
+  const res = await fetch(PROFILE_URL, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'anthropic-beta': 'oauth-2025-04-20',
+      'anthropic-version': '2023-06-01',
+      'User-Agent': UA,
+    },
+  })
+  if (!res.ok) {
+    throw Object.assign(new Error(`profile ${res.status}`), { status: res.status })
+  }
+  const a = (await res.json()).account || {}
+  profile = {
+    email: a.email || null,
+    name: a.display_name || a.full_name || null,
+    plan: a.has_claude_max ? 'Max' : a.has_claude_pro ? 'Pro' : null,
+  }
+  return profile
+}
+
+module.exports = { begin, complete, fetchUsage, fetchProfile, clear, isConnected }

package/main.js

@@ -77,7 +77,7 @@ function checkAlerts(config, d) {
         if (!armed.has(key)) {
           armed.add(key)
           new Notification({
-            title: 'Claude Usage Monitor',
+            title: 'Clauddy',
             body: `Your ${name} is over ${t}% — now at ${Math.round(pct)}%`,
             silent: false,
           }).show()
@@ -135,6 +135,7 @@ function createWindow() {
     win.webContents.send('auth-state', { connected: auth.isConnected() })
     pollTimer = setInterval(tick, config.pollIntervalMs)
     startUsagePoll()
+    sendProfile()
     watchDebug()
   })
 }
@@ -182,6 +183,7 @@ async function pollUsage() {
       if (win && !win.isDestroyed()) {
         win.webContents.send('auth-state', { connected: false })
         win.webContents.send('real-usage', null)
+        win.webContents.send('profile', null)
       }
     }
   }
@@ -191,6 +193,15 @@ function startUsagePoll() {
   if (auth.isConnected()) pollUsage()
 }
 
+// push the logged-in account's identity (email + plan) to the renderer
+async function sendProfile() {
+  if (!auth.isConnected()) return
+  try {
+    const p = await auth.fetchProfile()
+    if (win && !win.isDestroyed()) win.webContents.send('profile', p)
+  } catch {} // non-fatal: the chip just stays hidden
+}
+
 ipcMain.on('auth-start', () => shell.openExternal(auth.begin()))
 ipcMain.on('auth-code', async (_e, code) => {
   const ok = () => {
@@ -198,6 +209,7 @@ ipcMain.on('auth-code', async (_e, code) => {
       win.webContents.send('auth-state', { connected: true })
       win.webContents.send('auth-result', { ok: true })
     }
+    sendProfile()
   }
   try {
     await auth.complete(code)
@@ -227,6 +239,7 @@ ipcMain.on('auth-logout', () => {
   if (win && !win.isDestroyed()) {
     win.webContents.send('auth-state', { connected: false })
     win.webContents.send('real-usage', null)
+    win.webContents.send('profile', null)
   }
 })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clauddy",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "A cute desktop pet that tracks your Claude Code usage",
   "main": "main.js",
   "bin": {
@@ -55,8 +55,8 @@
     "node": ">=24"
   },
   "build": {
-    "appId": "com.renato.claude-usage-monitor",
-    "productName": "Claude Usage Monitor",
+    "appId": "app.clauddy",
+    "productName": "Clauddy",
     "directories": {
       "output": "dist"
     },

package/preload.js

@@ -9,6 +9,7 @@ contextBridge.exposeInMainWorld('api', {
   openUsage: () => ipcRenderer.send('open-usage'),
   onRealUsage: (cb) => ipcRenderer.on('real-usage', (_e, u) => cb(u)),
   onAuthState: (cb) => ipcRenderer.on('auth-state', (_e, s) => cb(s)),
+  onProfile: (cb) => ipcRenderer.on('profile', (_e, p) => cb(p)),
   onAuthResult: (cb) => ipcRenderer.on('auth-result', (_e, r) => cb(r)),
   authStart: () => ipcRenderer.send('auth-start'),
   authCode: (code) => ipcRenderer.send('auth-code', code),

package/renderer/index.html

@@ -3,11 +3,16 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Claude Usage Monitor</title>
+    <title>Clauddy</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body class="state-idle">
     <div id="card">
+      <div id="account-chip" hidden>
+        <span class="ac-dot"></span>
+        <span id="ac-email"></span>
+        <span id="ac-plan" class="plan-badge" hidden></span>
+      </div>
       <div id="controls">
         <button id="gear" title="Settings">⚙</button>
         <button id="usage" title="Open Usage page">
@@ -47,6 +52,10 @@
 
       <!-- shown only when collapsed -->
       <div id="mini">
+        <div id="mini-acct" hidden>
+          <span id="mini-acct-name"></span>
+          <span id="mini-acct-plan" class="plan-badge" hidden></span>
+        </div>
         <div class="mini-line"><span id="mini-dot"></span><span id="mini-text">idle</span></div>
         <div id="mini-pct-row"><span id="mini-pct">0%</span> <span class="lbl">session</span></div>
       </div>

package/renderer/pet.js

@@ -499,9 +499,39 @@ window.api.onAuthState((s) => {
     realUsage = null
     document.body.classList.remove('live')
     el('acc-paste').classList.remove('show')
+    showProfile(null)
   }
   if (document.body.classList.contains('settings-open')) fitSize()
 })
+
+// logged-in account chip (email + plan) shown top-left when connected
+function showProfile(p) {
+  const chip = el('account-chip')
+  const mini = el('mini-acct')
+  if (!p?.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)
+  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)
+  mini.hidden = false
+}
+function setPlan(node, plan) {
+  if (plan) {
+    node.textContent = plan
+    node.hidden = false
+  } else {
+    node.hidden = true
+  }
+}
+window.api.onProfile(showProfile)
 window.api.onAuthResult((r) => {
   if (r?.ok) {
     el('acc-msg').textContent = ''

package/renderer/style.css

@@ -1,7 +1,7 @@
 :root {
   --coral: #d97757;
   --coral-soft: #e6a07f;
-  --pixel: #bd7853; /* pet terracotta (earthier, like the original) */
+  --pixel: #d57658; /* pet terracotta — matches the real Claude logo */
   --eye: #221b16;
   --text: #f3ebe3;
   --muted: #9d9085;
@@ -129,6 +129,54 @@ body.collapsed #usage {
   display: none;
 }
 
+/* logged-in account chip (top-left, mirrors #controls) */
+#account-chip {
+  position: absolute;
+  top: 6px;
+  left: 10px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  height: 19px; /* match #controls buttons so text centers on the same line */
+  max-width: 138px;
+  font-size: 9.5px;
+  line-height: 1;
+  color: var(--muted);
+}
+#account-chip[hidden] {
+  display: none;
+}
+.ac-dot {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--pixel);
+}
+#ac-email {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.plan-badge {
+  flex: none;
+  padding: 1.5px 5px;
+  border-radius: 6px;
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  color: var(--coral-soft);
+  background: rgba(217, 119, 87, 0.16);
+}
+.plan-badge[hidden] {
+  display: none;
+}
+/* no room for the chip when collapsed */
+body.collapsed #account-chip {
+  display: none;
+}
+
 /* settings panel */
 #settings {
   display: none;
@@ -440,6 +488,25 @@ body:not(.live) #mini-pct-row {
   text-align: center;
   margin-top: 2px;
 }
+/* account name + plan, shown above the status line when collapsed */
+#mini-acct {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  margin-bottom: 3px;
+}
+#mini-acct[hidden] {
+  display: none;
+}
+#mini-acct-name {
+  max-width: 56px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 9.5px;
+  color: var(--muted);
+}
 .mini-line {
   display: flex;
   align-items: center;
@@ -757,9 +824,6 @@ body.state-tired #sweat {
 body.state-working #claude {
   animation: hop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
 }
-body.state-working #body rect {
-  fill: #d68a64;
-}
 body.state-stressed #body rect {
   fill: #cb5642;
 }