clauddy 1.8.0 → 1.9.0

package/README.md

@@ -121,10 +121,19 @@ Coming soon — the build is already wired for `tar.gz` and AppImage. In the mea
 
 - **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
-- **⚙** opens settings (log in, toggle alerts, set thresholds)
+- **⚙** opens settings (log in, toggle alerts, set thresholds, pick the display mode)
 - **↗** opens the official Usage page
 - **×** quits
 
+### Floating or menu bar
+
+Under **⚙ Settings → Display** you can pick where Clauddy lives:
+
+- **Floating pet** — the always-on widget in the corner (default).
+- **Menu bar** — a small pet icon in the macOS menu bar showing your live session **%** (it turns 🔥 near your limit). Click it to pop open the full pet + usage panel; click away to dismiss. Right-click for a quick menu.
+
+Switching is instant — no restart. (On Windows/Linux the icon lives in the system tray; the live % shows in its tooltip.)
+
 ## Alerts
 
 Optional **macOS notifications** when your session or weekly usage crosses the thresholds you set (default **80%** and **95%**) — e.g. _"Your session is over 80% — now at 82%"_. They re-arm automatically once usage drops back below a threshold (after a reset). Toggle them and edit the thresholds in **⚙ Settings**.
@@ -135,6 +144,7 @@ Settings saved from the UI live in `~/.claude-usage-monitor/config.json`, so you
 
 ```jsonc
 {
+  "mode": "floating", // "floating" pet in the corner, or "menubar" popover
   "alerts": true, // macOS notifications on/off
   "alertThresholds": [80, 95], // notify when session/week cross these % (two levels)
   "fireThreshold": 90, // session % at which the pet catches fire (maxed out stays 100)

package/config.json

@@ -1,5 +1,6 @@
 {
   "_note": "Defaults bundled with the app. User settings are saved to ~/.claude-usage-monitor/config.json. Session/weekly % come from your account (log in via Settings).",
+  "mode": "floating",
   "alerts": true,
   "alertThresholds": [80, 95],
   "fireThreshold": 90,

package/main.js

@@ -1,4 +1,14 @@
-const { app, BrowserWindow, ipcMain, screen, Notification, shell } = require('electron')
+const {
+  app,
+  BrowserWindow,
+  ipcMain,
+  screen,
+  Notification,
+  shell,
+  Tray,
+  Menu,
+  nativeImage,
+} = require('electron')
 const path = require('node:path')
 const fs = require('node:fs')
 const os = require('node:os')
@@ -30,12 +40,20 @@ let config
 let doTick = null
 const W = 276
 
+// menu-bar (tray) mode state
+let tray = null
+let currentMode = 'floating' // 'floating' widget | 'menubar' popover
+let trayBounds = null // last known tray icon rect, to anchor the popover
+let lastBlurHide = 0 // debounce: ignore the tray click that dismissed the popover
+let sessionPct = null // authoritative session % shown in the tray title
+
 function publicConfig(c) {
   return {
     plan: c.plan,
     sessionTokenBudget: c.sessionTokenBudget,
     weeklyTokenBudget: c.weeklyTokenBudget,
     weeklyAnchorIso: c.weeklyAnchorIso,
+    mode: c.mode,
     alerts: c.alerts,
     alertThresholds: c.alertThresholds,
     fireThreshold: c.fireThreshold,
@@ -48,6 +66,7 @@ function loadConfig() {
     sessionTokenBudget: 630000000,
     weeklyTokenBudget: 3450000000,
     weeklyAnchorIso: null,
+    mode: 'floating', // 'floating' widget or 'menubar' popover
     alerts: true,
     alertThresholds: [80, 95],
     fireThreshold: 90, // session % at which the pet catches fire (tired still fixed at 100)
@@ -105,6 +124,7 @@ function createWindow() {
     transparent: true,
     backgroundColor: '#00000000', // fully transparent — Windows needs this or the window paints black
     resizable: false,
+    show: false, // applyMode() reveals it (floating) or keeps it a hidden popover (menubar)
     alwaysOnTop: true,
     skipTaskbar: true,
     hasShadow: false,
@@ -120,6 +140,14 @@ function createWindow() {
   win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true })
   win.loadFile(path.join(__dirname, 'renderer', 'index.html'))
 
+  // in menu-bar mode the popover dismisses when it loses focus (click elsewhere)
+  win.on('blur', () => {
+    if (currentMode === 'menubar' && win.isVisible()) {
+      win.hide()
+      lastBlurHide = Date.now()
+    }
+  })
+
   const tick = () => {
     if (!win || win.isDestroyed()) return
     try {
@@ -140,7 +168,115 @@ function createWindow() {
     startUsagePoll()
     sendProfile()
     watchDebug()
+    applyMode(config.mode) // reveal the widget, or set up the tray + popover
+  })
+}
+
+// ---- menu-bar (tray) mode ----------------------------------------------------
+// Floating mode: the widget lives bottom-right, always visible. Menu-bar mode:
+// the same window becomes a popover shown under a tray icon on click. Switching
+// is live — no relaunch — so the Settings toggle applies immediately.
+function applyMode(mode) {
+  const next = mode === 'menubar' ? 'menubar' : 'floating'
+  const changed = next !== currentMode
+  currentMode = next
+  if (currentMode === 'menubar') {
+    ensureTray()
+    win.setSkipTaskbar(true)
+    if (changed && win.isVisible()) win.hide() // hide only when switching in
+  } else {
+    destroyTray()
+    if (changed || !win.isVisible()) {
+      positionFloating()
+      win.show()
+    }
+  }
+  updateTray()
+}
+
+function ensureTray() {
+  if (tray) return
+  const img = nativeImage.createFromPath(path.join(__dirname, 'build', 'trayTemplate.png'))
+  img.setTemplateImage(true) // let macOS recolor it for the light/dark menu bar
+  tray = new Tray(img)
+  tray.setToolTip('Clauddy')
+  tray.on('click', (_e, bounds) => {
+    trayBounds = bounds
+    togglePopover()
   })
+  tray.on('right-click', () => tray.popUpContextMenu(trayMenu()))
+}
+
+function destroyTray() {
+  if (tray) {
+    tray.destroy()
+    tray = null
+  }
+}
+
+function trayMenu() {
+  return Menu.buildFromTemplate([
+    { label: 'Open Clauddy', click: () => showPopover() },
+    {
+      label: 'Open Usage page',
+      click: () => shell.openExternal('https://claude.ai/settings/usage'),
+    },
+    { type: 'separator' },
+    { label: 'Quit Clauddy', click: () => app.quit() },
+  ])
+}
+
+function togglePopover() {
+  if (Date.now() - lastBlurHide < 250) return // this click just dismissed it
+  if (win.isVisible()) win.hide()
+  else showPopover()
+}
+
+function showPopover() {
+  positionUnderTray()
+  win.show()
+  win.focus()
+}
+
+// center the popover under the tray icon, kept on-screen
+function positionUnderTray() {
+  const b = win.getBounds()
+  const { workAreaSize } = screen.getPrimaryDisplay()
+  let x = workAreaSize.width - b.width - 24
+  let y = 24
+  if (trayBounds?.width) {
+    x = Math.round(trayBounds.x + trayBounds.width / 2 - b.width / 2)
+    y = Math.round(trayBounds.y + trayBounds.height)
+  }
+  x = Math.max(8, Math.min(x, workAreaSize.width - b.width - 8))
+  win.setPosition(x, y)
+}
+
+function positionFloating() {
+  const { workAreaSize } = screen.getPrimaryDisplay()
+  const b = win.getBounds()
+  win.setPosition(workAreaSize.width - b.width - 24, workAreaSize.height - b.height - 24)
+}
+
+// the tray shows the live session % (macOS title), turning 🔥 near the limit
+function updateTray() {
+  if (!tray) return
+  if (sessionPct == null) {
+    if (process.platform === 'darwin') tray.setTitle('')
+    tray.setToolTip('Clauddy — connect your account for live %')
+    return
+  }
+  const pct = Math.round(sessionPct)
+  const hot = pct >= (config?.fireThreshold ?? 90)
+  if (process.platform === 'darwin') tray.setTitle(hot ? ` ${pct}% 🔥` : ` ${pct}%`)
+  tray.setToolTip(`Clauddy — session ${pct}%`)
+}
+
+// send real usage to the renderer and refresh the tray title in one place
+function pushRealUsage(u) {
+  sessionPct = u?.session ? u.session.pct : null
+  updateTray()
+  if (win && !win.isDestroyed()) win.webContents.send('real-usage', u)
 }
 
 // resize the window to fit the content
@@ -149,8 +285,12 @@ ipcMain.on('resize', (_e, w, h) => {
   const width = Math.max(100, Math.round(w))
   const height = Math.max(110, Math.round(h))
   win.setContentSize(width, height)
-  const { workAreaSize } = screen.getPrimaryDisplay()
-  win.setPosition(workAreaSize.width - width - 24, workAreaSize.height - height - 24)
+  if (currentMode === 'menubar') {
+    if (win.isVisible()) positionUnderTray() // keep it anchored under the tray
+  } else {
+    const { workAreaSize } = screen.getPrimaryDisplay()
+    win.setPosition(workAreaSize.width - width - 24, workAreaSize.height - height - 24)
+  }
 })
 
 ipcMain.on('open-usage', () => shell.openExternal('https://claude.ai/settings/usage'))
@@ -177,15 +317,15 @@ async function pollUsage() {
   try {
     const u = await auth.fetchUsage()
     usageBackoff = 5 * 60 * 1000
-    if (win && !win.isDestroyed()) win.webContents.send('real-usage', u)
+    pushRealUsage(u)
   } catch (e) {
     if (e && e.status === 429) {
       usageBackoff = Math.min(usageBackoff * 2, 30 * 60 * 1000)
     } else if (e && e.status === 401) {
       auth.clear()
+      pushRealUsage(null)
       if (win && !win.isDestroyed()) {
         win.webContents.send('auth-state', { connected: false })
-        win.webContents.send('real-usage', null)
         win.webContents.send('profile', null)
       }
     }
@@ -220,7 +360,7 @@ ipcMain.on('auth-code', async (_e, code) => {
     try {
       const u = await auth.fetchUsage() // validate the token
       ok()
-      if (win && !win.isDestroyed()) win.webContents.send('real-usage', u)
+      pushRealUsage(u)
     } catch (e) {
       if (e && e.status === 429) {
         // token is fine, the usage endpoint is just throttled — keep it and retry later
@@ -239,9 +379,9 @@ ipcMain.on('auth-code', async (_e, code) => {
 ipcMain.on('auth-logout', () => {
   auth.clear()
   clearTimeout(usageTimer)
+  pushRealUsage(null)
   if (win && !win.isDestroyed()) {
     win.webContents.send('auth-state', { connected: false })
-    win.webContents.send('real-usage', null)
     win.webContents.send('profile', null)
   }
 })
@@ -263,6 +403,7 @@ ipcMain.on('save-config', (_e, patch) => {
   armed.clear() // re-arm alerts with new thresholds
   if (doTick) doTick()
   if (win && !win.isDestroyed()) win.webContents.send('config', publicConfig(config))
+  applyMode(config.mode) // switch between floating widget and menu-bar popover live
 })
 
 ipcMain.on('quit', () => app.quit())
@@ -280,6 +421,7 @@ app.whenReady().then(() => {
 app.on('window-all-closed', () => {
   if (pollTimer) clearInterval(pollTimer)
   fs.unwatchFile(DEBUG_FILE)
+  destroyTray()
   app.quit()
 })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clauddy",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "A cute desktop pet that tracks your Claude Code usage",
   "main": "main.js",
   "bin": {
@@ -68,7 +68,9 @@
       "usage.js",
       "auth.js",
       "config.json",
-      "renderer/**"
+      "renderer/**",
+      "build/trayTemplate.png",
+      "build/trayTemplate@2x.png"
     ],
     "mac": {
       "category": "public.app-category.developer-tools",

package/renderer/index.html

@@ -305,6 +305,14 @@
           </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
+          <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>
+
         <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 (%)

package/renderer/pet.js

@@ -560,6 +560,7 @@ window.api.onError((msg) => {
 })
 window.api.onConfig((cfg) => {
   currentConfig = cfg || {}
+  document.body.classList.toggle('is-menubar', currentConfig.mode === 'menubar')
 })
 window.api.onRealUsage((u) => {
   realUsage = u || null
@@ -642,8 +643,16 @@ el('acc-logout').addEventListener('click', () => window.api.authLogout())
 // settings panel
 // snapshot of the editable fields, to tell whether there are unsaved changes
 let settingsBaseline = null
+let selectedMode = 'floating'
+function setModeUI(mode) {
+  selectedMode = mode === 'menubar' ? 'menubar' : 'floating'
+  for (const b of document.querySelectorAll('#set-mode .seg-btn')) {
+    b.classList.toggle('on', b.dataset.mode === selectedMode)
+  }
+}
 function snapshotSettings() {
   return JSON.stringify({
+    mode: selectedMode,
     alerts: el('set-alerts').checked,
     t1: el('set-t1').value,
     t2: el('set-t2').value,
@@ -660,6 +669,7 @@ function clearSaveDirty() {
 }
 function populateSettings() {
   const c = currentConfig || {}
+  setModeUI(c.mode)
   el('set-alerts').checked = c.alerts !== false
   const th = c.alertThresholds || [80, 95]
   el('set-t1').value = th[0] != null ? th[0] : 80
@@ -692,6 +702,13 @@ for (const id of ['set-alerts', 'set-t1', 'set-t2', 'set-fire']) {
   el(id).addEventListener('input', refreshSaveDirty)
   el(id).addEventListener('change', refreshSaveDirty)
 }
+// display-mode segmented control (floating pet | menu bar)
+for (const b of document.querySelectorAll('#set-mode .seg-btn')) {
+  b.addEventListener('click', () => {
+    setModeUI(b.dataset.mode)
+    refreshSaveDirty()
+  })
+}
 el('set-cancel').addEventListener('click', () => {
   document.body.classList.remove('settings-open')
   clearSaveDirty()
@@ -701,6 +718,7 @@ el('set-save').addEventListener('click', () => {
   const num = (id) => parseFloat(el(id).value)
   const fire = num('set-fire')
   window.api.saveConfig({
+    mode: selectedMode,
     alerts: el('set-alerts').checked,
     alertThresholds: [num('set-t1'), num('set-t2')]
       .filter((n) => n >= 1 && n <= 100)

package/renderer/style.css

@@ -238,6 +238,38 @@ body.settings-open #settings {
   appearance: none;
   margin: 0;
 }
+/* display-mode segmented control (floating pet | menu bar) */
+.seg {
+  display: flex;
+  gap: 4px;
+  margin-top: 4px;
+}
+.seg-btn {
+  flex: 1;
+  padding: 6px 4px;
+  font-size: 11px;
+  color: var(--muted);
+  background: rgba(255, 255, 255, 0.06);
+  border: 0.5px solid var(--hair);
+  border-radius: 7px;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s,
+    border-color 0.15s;
+}
+.seg-btn:hover {
+  color: var(--text);
+}
+.seg-btn.on {
+  background: var(--coral);
+  border-color: var(--coral);
+  color: #fff;
+}
+/* menu-bar mode: the popover auto-sizes, so the minimize control is redundant */
+body.is-menubar #min {
+  display: none;
+}
 .set-two {
   display: flex;
   gap: 6px;